@podium/client 5.1.10 → 5.2.0-next.2

package/CHANGELOG.md

@@ -1,9 +1,30 @@
-## [5.1.10](https://github.com/podium-lib/client/compare/v5.1.9...v5.1.10) (2024-09-06)
+# [5.2.0-next.2](https://github.com/podium-lib/client/compare/v5.2.0-next.1...v5.2.0-next.2) (2024-09-16)
 
 
 ### Bug Fixes
 
-* **deps:** update dependency @podium/utils to v5.2.0 ([f7d4675](https://github.com/podium-lib/client/commit/f7d4675e6e2b9f2fba26cbd164d3e7a73b9c132e))
+* improve error messages when fetching from manifest, content and fallback routes when a timeout occurs ([e188bbc](https://github.com/podium-lib/client/commit/e188bbc40d30ed2e21947dd29de76bd218907428))
+
+# [5.2.0-next.1](https://github.com/podium-lib/client/compare/v5.1.10-next.2...v5.2.0-next.1) (2024-09-10)
+
+
+### Features
+
+* read assets from podlets using 103 early hints ([64e4b27](https://github.com/podium-lib/client/commit/64e4b27773b87c220bcab1028ecdda82be2aa9fc))
+
+## [5.1.10-next.2](https://github.com/podium-lib/client/compare/v5.1.10-next.1...v5.1.10-next.2) (2024-08-26)
+
+
+### Bug Fixes
+
+* use AbortController instead of AbortSignal to avoid unhandled exception ([#412](https://github.com/podium-lib/client/issues/412)) ([87f5ffe](https://github.com/podium-lib/client/commit/87f5ffe553aa49189658a9be0e19d1323878a55a))
+
+## [5.1.10-next.1](https://github.com/podium-lib/client/compare/v5.1.9...v5.1.10-next.1) (2024-08-22)
+
+
+### Bug Fixes
+
+* use AbortSignal to ensure timeouts are respected ([08899d9](https://github.com/podium-lib/client/commit/08899d974246037cb1893a5b6d06bd6df58815e2))
 
 ## [5.1.9](https://github.com/podium-lib/client/compare/v5.1.8...v5.1.9) (2024-08-19)
 

package/lib/http-outgoing.js

@@ -67,6 +67,8 @@ export default class PodletClientHttpOutgoing extends PassThrough {
     #status;
     #name;
     #uri;
+    #js;
+    #css;
 
     /**
      * @constructor
@@ -120,6 +122,8 @@ export default class PodletClientHttpOutgoing extends PassThrough {
         this.#manifest = {
             // @ts-expect-error Internal property
             _fallback: '',
+            _js: [],
+            _css: [],
         };
 
         // How long before a request should time out
@@ -146,6 +150,24 @@ export default class PodletClientHttpOutgoing extends PassThrough {
         this.#redirectable = redirectable;
     }
 
+    get js() {
+        // return the internal js value or, fallback to the manifest for backwards compatibility
+        return this.#js || this.#manifest.js;
+    }
+
+    set js(value) {
+        this.#js = value;
+    }
+
+    get css() {
+        // return the internal css value or, fallback to the manifest for backwards compatibility
+        return this.#css || this.#manifest.css;
+    }
+
+    set css(value) {
+        this.#css = value;
+    }
+
     get rejectUnauthorized() {
         return this.#rejectUnauthorized;
     }
@@ -308,6 +330,10 @@ export default class PodletClientHttpOutgoing extends PassThrough {
     pushFallback() {
         // @ts-expect-error Internal property
         this.push(this.#manifest._fallback);
+        // @ts-expect-error Internal property
+        this.js = this.#manifest._js;
+        // @ts-expect-error Internal property
+        this.css = this.#manifest._css;
         this.push(null);
         this.#isFallback = true;
     }

package/lib/http.js

@@ -1,4 +1,4 @@
-import { request } from 'undici';
+import { request as undiciRequest } from 'undici';
 
 /**
  * @typedef {object} PodiumHttpClientRequestOptions
@@ -7,22 +7,39 @@ import { request } from 'undici';
  * @property {boolean} [rejectUnauthorized]
  * @property {boolean} [follow]
  * @property {number} [timeout]
- * @property {number} [bodyTimeout]
  * @property {object} [query]
  * @property {import('http').IncomingHttpHeaders} [headers]
+ * @property {(info: { statusCode: number; headers: Record<string, string | string[]>; }) => void} [onInfo]
  */
 
 export default class HTTP {
+    constructor(requestFn = undiciRequest) {
+        this.requestFn = requestFn;
+    }
+
     /**
      * @param {string} url
      * @param {PodiumHttpClientRequestOptions} options
      * @returns {Promise<Pick<import('undici').Dispatcher.ResponseData, 'statusCode' | 'headers' | 'body'>>}
      */
     async request(url, options) {
-        const { statusCode, headers, body } = await request(
-            new URL(url),
-            options,
-        );
-        return { statusCode, headers, body };
+        const abortController = new AbortController();
+
+        const timeoutId = setTimeout(() => {
+            abortController.abort();
+        }, options.timeout || 1000);
+
+        try {
+            const { statusCode, headers, body } = await this.requestFn(
+                new URL(url),
+                {
+                    ...options,
+                    signal: abortController.signal,
+                },
+            );
+            return { statusCode, headers, body };
+        } finally {
+            clearTimeout(timeoutId);
+        }
     }
 }

package/lib/resolver.content.js

@@ -9,6 +9,8 @@ import fs from 'fs';
 import * as utils from './utils.js';
 import Response from './response.js';
 import HTTP from './http.js';
+import { parseLinkHeaders, filterAssets } from './utils.js';
+import { AssetJs, AssetCss } from '@podium/utils';
 
 const currentDirectory = dirname(fileURLToPath(import.meta.url));
 
@@ -133,13 +135,33 @@ export default class PodletClientContentResolver {
             outgoing.contentUri,
         );
 
+        let hintsReceived = false;
+
         /** @type {import('./http.js').PodiumHttpClientRequestOptions} */
         const reqOptions = {
             rejectUnauthorized: outgoing.rejectUnauthorized,
-            bodyTimeout: outgoing.timeout,
+            timeout: outgoing.timeout,
             method: 'GET',
             query: outgoing.reqOptions.query,
             headers,
+            onInfo({ statusCode, headers }) {
+                if (statusCode === 103 && !hintsReceived) {
+                    const parsedAssetObjects = parseLinkHeaders(headers.link);
+
+                    const scriptObjects = parsedAssetObjects.filter(
+                        (asset) => asset instanceof AssetJs,
+                    );
+                    const styleObjects = parsedAssetObjects.filter(
+                        (asset) => asset instanceof AssetCss,
+                    );
+                    // set the content js asset objects
+                    outgoing.js = filterAssets('content', scriptObjects);
+                    // set the content css asset objects
+                    outgoing.css = filterAssets('content', styleObjects);
+
+                    hintsReceived = true;
+                }
+            },
         };
 
         if (outgoing.redirectable) {
@@ -267,6 +289,7 @@ export default class PodletClientContentResolver {
                 }),
             );
 
+            // @ts-ignore
             pipeline([body, outgoing], (err) => {
                 if (err) {
                     this.#log.warn('error while piping content stream', err);
@@ -275,18 +298,14 @@ export default class PodletClientContentResolver {
         } catch (error) {
             if (error.isBoom) throw error;
 
-            // Network error
-            if (outgoing.throwable) {
-                timer({
-                    labels: {
-                        status: 'failure',
-                    },
-                });
-
+            if (error.name === 'AbortError') {
+                this.#log.warn(
+                    `request to remote resource for content was aborted due to the resource failing to respond before the configured timeout (${outgoing.timeout}ms) - resource: ${outgoing.name} - url: ${uri}`,
+                );
+            } else {
                 this.#log.warn(
                     `could not create network connection to remote resource when trying to request content - resource: ${outgoing.name} - url: ${uri}`,
                 );
-                throw badGateway(`Error reading content at ${uri}`, error);
             }
 
             timer({
@@ -295,9 +314,10 @@ export default class PodletClientContentResolver {
                 },
             });
 
-            this.#log.warn(
-                `could not create network connection to remote resource when trying to request content - resource: ${outgoing.name} - url: ${uri}`,
-            );
+            // Network error
+            if (outgoing.throwable) {
+                throw badGateway(`Error reading content at ${uri}`, error);
+            }
 
             outgoing.success = true;
 
@@ -305,8 +325,8 @@ export default class PodletClientContentResolver {
             outgoing.emit(
                 'beforeStream',
                 new Response({
-                    js: utils.filterAssets('fallback', outgoing.manifest.js),
-                    css: utils.filterAssets('fallback', outgoing.manifest.css),
+                    js: utils.filterAssets('fallback', outgoing.js),
+                    css: utils.filterAssets('fallback', outgoing.css),
                 }),
             );
 

package/lib/resolver.fallback.js

@@ -4,6 +4,8 @@ import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs';
 import HTTP from './http.js';
+import { parseLinkHeaders, filterAssets } from './utils.js';
+import { AssetJs, AssetCss } from '@podium/utils';
 
 const currentDirectory = dirname(fileURLToPath(import.meta.url));
 
@@ -94,12 +96,40 @@ export default class PodletClientFallbackResolver {
             'User-Agent': UA_STRING,
         };
 
+        let hintsReceived = false;
+
         /** @type {import('./http.js').PodiumHttpClientRequestOptions} */
         const reqOptions = {
             rejectUnauthorized: outgoing.rejectUnauthorized,
             timeout: outgoing.timeout,
             method: 'GET',
             headers,
+            onInfo({ statusCode, headers }) {
+                if (statusCode === 103 && !hintsReceived) {
+                    const parsedAssetObjects = parseLinkHeaders(headers.link);
+
+                    const scriptObjects = parsedAssetObjects.filter(
+                        (asset) => asset instanceof AssetJs,
+                    );
+                    const styleObjects = parsedAssetObjects.filter(
+                        (asset) => asset instanceof AssetCss,
+                    );
+                    // set the content js asset fallback objects
+                    // @ts-expect-error internal property
+                    outgoing.manifest._js = filterAssets(
+                        'fallback',
+                        scriptObjects,
+                    );
+                    // set the fallback css asset fallback objects
+                    // @ts-expect-error internal property
+                    outgoing.manifest._css = filterAssets(
+                        'fallback',
+                        styleObjects,
+                    );
+
+                    hintsReceived = true;
+                }
+            },
         };
 
         const timer = this.#histogram.timer({
@@ -151,7 +181,6 @@ export default class PodletClientFallbackResolver {
                 `successfully read fallback from remote resource - resource: ${outgoing.name} - url: ${outgoing.fallbackUri}`,
             );
             return outgoing;
-            // eslint-disable-next-line no-unused-vars
         } catch (error) {
             timer({
                 labels: {
@@ -159,9 +188,15 @@ export default class PodletClientFallbackResolver {
                 },
             });
 
-            this.#log.warn(
-                `could not create network connection to remote resource for fallback content - resource: ${outgoing.name} - url: ${outgoing.fallbackUri}`,
-            );
+            if (error.name === 'AbortError') {
+                this.#log.warn(
+                    `request to read fallback was aborted due to the resource failing to respond before the configured timeout (${outgoing.timeout}ms) - resource: ${outgoing.name} - url: ${outgoing.fallbackUri}`,
+                );
+            } else {
+                this.#log.warn(
+                    `could not create network connection to remote resource for fallback - resource: ${outgoing.name} - url: ${outgoing.fallbackUri}`,
+                );
+            }
 
             outgoing.fallback = '';
             return outgoing;

package/lib/resolver.manifest.js

@@ -246,7 +246,6 @@ export default class PodletClientManifestResolver {
                 `successfully read manifest from remote resource - resource: ${outgoing.name} - url: ${outgoing.manifestUri}`,
             );
             return outgoing;
-            // eslint-disable-next-line no-unused-vars
         } catch (error) {
             timer({
                 labels: {
@@ -254,9 +253,15 @@ export default class PodletClientManifestResolver {
                 },
             });
 
-            this.#log.warn(
-                `could not create network connection to remote manifest - resource: ${outgoing.name} - url: ${outgoing.manifestUri}`,
-            );
+            if (error.name === 'AbortError') {
+                this.#log.warn(
+                    `request to remote manifest was aborted due to the resource failing to respond before the configured timeout (${outgoing.timeout}ms) - resource: ${outgoing.name} - url: ${outgoing.manifestUri}`,
+                );
+            } else {
+                this.#log.warn(
+                    `could not create network connection to remote manifest - resource: ${outgoing.name} - url: ${outgoing.manifestUri}`,
+                );
+            }
             return outgoing;
         }
     }

package/lib/resource.js

@@ -159,7 +159,7 @@ export default class PodiumClientResource {
 
         this.#state.setInitializingState();
 
-        const { manifest, headers, redirect, isFallback } =
+        const { headers, redirect, isFallback } =
             await this.#resolver.resolve(outgoing);
 
         const chunks = [];
@@ -177,11 +177,11 @@ export default class PodiumClientResource {
             content,
             css: utils.filterAssets(
                 isFallback ? 'fallback' : 'content',
-                manifest.css,
+                outgoing.css,
             ),
             js: utils.filterAssets(
                 isFallback ? 'fallback' : 'content',
-                manifest.js,
+                outgoing.js,
             ),
             redirect,
         });

package/lib/utils.js

@@ -1,3 +1,5 @@
+import { AssetJs, AssetCss } from '@podium/utils';
+
 /**
  * Checks if a header object has a header.
  * Will return true if the header exist and is not an empty
@@ -71,3 +73,45 @@ export const filterAssets = (scope, assets) => {
             !asset.scope || asset.scope === scope || asset.scope === 'all',
     );
 };
+
+// parse link headers in AssetCss and AssetJs objects
+export const parseLinkHeaders = (headers) => {
+    const links = [];
+
+    if (!headers) return links;
+    headers.split(',').forEach((link) => {
+        const parts = link.split(';');
+        const [href, ...rest] = parts;
+        const value = href.replace(/<|>|"/g, '').trim();
+
+        const asset = { value };
+        for (const key of rest) {
+            const [keyName, keyValue] = key.split('=');
+            asset[keyName.trim()] = keyValue.trim();
+        }
+
+        if (asset['asset-type'] === 'script') {
+            links.push(new AssetJs(asset));
+        }
+        if (asset['asset-type'] === 'style') {
+            links.push(new AssetCss(asset));
+        }
+    });
+    return links;
+};
+
+export const toPreloadAssetObjects = (assetObjects) => {
+    return assetObjects.map((assetObject) => {
+        return new AssetCss({
+            type:
+                assetObject instanceof AssetJs
+                    ? 'application/javascript'
+                    : 'text/css',
+            crossorigin: !!assetObject.crossorigin,
+            rel: 'preload',
+            as: assetObject instanceof AssetJs ? 'script' : 'style',
+            media: assetObject.media || '',
+            value: assetObject.value.trim(),
+        });
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@podium/client",
-  "version": "5.1.10",
+  "version": "5.2.0-next.2",
   "type": "module",
   "license": "MIT",
   "keywords": [
@@ -48,13 +48,13 @@
     "undici": "6.19.8"
   },
   "devDependencies": {
-    "@podium/test-utils": "2.5.2",
+    "@podium/test-utils": "3.1.0-next.3",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "10.1.7",
+    "@semantic-release/github": "10.0.6",
     "@semantic-release/npm": "12.0.1",
     "@semantic-release/release-notes-generator": "13.0.0",
-    "@sinonjs/fake-timers": "11.3.1",
+    "@sinonjs/fake-timers": "11.2.2",
     "@types/readable-stream": "4.0.15",
     "benchmark": "2.1.4",
     "eslint": "9.6.0",
@@ -62,10 +62,10 @@
     "eslint-plugin-prettier": "5.1.3",
     "express": "4.19.2",
     "get-stream": "9.0.1",
-    "globals": "15.9.0",
+    "globals": "15.8.0",
     "http-proxy": "1.18.1",
     "is-stream": "4.0.1",
-    "npm-run-all2": "5.0.2",
+    "npm-run-all2": "5.0.0",
     "prettier": "3.3.2",
     "semantic-release": "23.1.1",
     "tap": "18.7.2",

package/types/http-outgoing.d.ts

@@ -46,6 +46,10 @@ export default class PodletClientHttpOutgoing extends PassThrough {
      * @param {import('@podium/utils').HttpIncoming} [incoming]
      */
     constructor(options?: PodiumClientHttpOutgoingOptions, reqOptions?: PodiumClientResourceOptions, incoming?: import('@podium/utils').HttpIncoming);
+    set js(value: any);
+    get js(): any;
+    set css(value: any);
+    get css(): any;
     get rejectUnauthorized(): boolean;
     get reqOptions(): {
         pathname: string;

package/types/http.d.ts

@@ -5,11 +5,13 @@
  * @property {boolean} [rejectUnauthorized]
  * @property {boolean} [follow]
  * @property {number} [timeout]
- * @property {number} [bodyTimeout]
  * @property {object} [query]
  * @property {import('http').IncomingHttpHeaders} [headers]
+ * @property {(info: { statusCode: number; headers: Record<string, string | string[]>; }) => void} [onInfo]
  */
 export default class HTTP {
+    constructor(requestFn?: typeof undiciRequest);
+    requestFn: typeof undiciRequest;
     /**
      * @param {string} url
      * @param {PodiumHttpClientRequestOptions} options
@@ -23,7 +25,11 @@ export type PodiumHttpClientRequestOptions = {
     rejectUnauthorized?: boolean;
     follow?: boolean;
     timeout?: number;
-    bodyTimeout?: number;
     query?: object;
     headers?: import('http').IncomingHttpHeaders;
+    onInfo?: (info: {
+        statusCode: number;
+        headers: Record<string, string | string[]>;
+    }) => void;
 };
+import { request as undiciRequest } from 'undici';

package/types/utils.d.ts

@@ -1,4 +1,8 @@
 export function isHeaderDefined(headers: object, header: string): boolean;
 export function hasManifestChange(item: object): boolean;
 export function validateIncoming(incoming?: object): boolean;
-export function filterAssets<T extends import("@podium/utils").AssetJs | import("@podium/utils").AssetCss>(scope: "content" | "fallback" | "all", assets: T[]): T[];
+export function filterAssets<T extends AssetJs | AssetCss>(scope: "content" | "fallback" | "all", assets: T[]): T[];
+export function parseLinkHeaders(headers: any): any[];
+export function toPreloadAssetObjects(assetObjects: any): any;
+import { AssetJs } from '@podium/utils';
+import { AssetCss } from '@podium/utils';