fix(runtime): throw RUNTIME-008 Error when script resources load failed (#3348)

Author: danpeen

.changeset/smart-crabs-burn.md

@@ -0,0 +1,7 @@
+---
+'@module-federation/error-codes': patch
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+fix: throw RUNTIME-008 Error when script resources load failed

packages/error-codes/src/desc.ts

@@ -6,6 +6,7 @@ import {
   RUNTIME_005,
   RUNTIME_006,
   RUNTIME_007,
+  RUNTIME_008,
   TYPE_001,
 } from './error-codes';
 
@@ -17,6 +18,7 @@ export const runtimeDescMap = {
   [RUNTIME_005]: 'Invalid loadShareSync function call from bundler runtime',
   [RUNTIME_006]: 'Invalid loadShareSync function call from runtime',
   [RUNTIME_007]: 'Failed to get remote snapshot.',
+  [RUNTIME_008]: 'Failed to load script resources.',
 };
 
 export const typeDescMap = {

packages/error-codes/src/error-codes.ts

@@ -5,5 +5,6 @@ export const RUNTIME_004 = 'RUNTIME-004';
 export const RUNTIME_005 = 'RUNTIME-005';
 export const RUNTIME_006 = 'RUNTIME-006';
 export const RUNTIME_007 = 'RUNTIME-007';
+export const RUNTIME_008 = 'RUNTIME-008';
 
 export const TYPE_001 = 'TYPE-001';

packages/runtime/src/utils/load.ts

@@ -11,6 +11,7 @@ import { Remote, RemoteEntryExports, RemoteInfo } from '../type';
 import { assert } from './logger';
 import {
   RUNTIME_001,
+  RUNTIME_008,
   getShortErrorMsg,
   runtimeDescMap,
 } from '@module-federation/error-codes';
@@ -129,6 +130,13 @@ async function loadEntryScript({
       return entryExports;
     })
     .catch((e) => {
+      assert(
+        undefined,
+        getShortErrorMsg(RUNTIME_008, runtimeDescMap, {
+          remoteName: name,
+          resourceUrl: entry,
+        }),
+      );
       throw e;
     });
 }

packages/sdk/__tests__/dom.spec.ts

@@ -252,18 +252,19 @@ describe('createLink', () => {
   it('should call the callback when the link fails to load', () => {
     const url = 'https://example.com/script.js';
     const cb = jest.fn();
+    const onErrorCallback = jest.fn();
     const { link, needAttach } = createLink({
       url,
       cb,
+      onErrorCallback,
       attrs: { as: 'script' },
     });
 
     if (needAttach) {
       document.head.appendChild(link);
     }
     link?.onerror?.(new Event('error'));
-
-    expect(cb).toHaveBeenCalled();
+    expect(onErrorCallback).toHaveBeenCalled();
   });
 
   it('should use the link element returned by createLinkHook', () => {

packages/sdk/src/dom.ts

@@ -26,6 +26,7 @@ export function isStaticResourcesEqual(url1: string, url2: string): boolean {
 export function createScript(info: {
   url: string;
   cb?: (value: void | PromiseLike<void>) => void;
+  onErrorCallback?: (error: Error) => void;
   attrs?: Record<string, any>;
   needDeleteScript?: boolean;
   createScriptHook?: CreateScriptHookDom;
@@ -36,6 +37,7 @@ export function createScript(info: {
   let timeout = 20000;
   let timeoutId: NodeJS.Timeout;
   const scripts = document.getElementsByTagName('script');
+
   for (let i = 0; i < scripts.length; i++) {
     const s = scripts[i];
     const scriptSrc = s.getAttribute('src');
@@ -88,6 +90,14 @@ export function createScript(info: {
     event: any,
   ): Promise<void> => {
     clearTimeout(timeoutId);
+    const onScriptCompleteCallback = () => {
+      if (event?.type === 'error') {
+        info?.onErrorCallback && info?.onErrorCallback(event);
+      } else {
+        info?.cb && info?.cb();
+      }
+    };
+
     // Prevent memory leaks in IE.
     if (script) {
       script.onerror = null;
@@ -102,14 +112,14 @@ export function createScript(info: {
         const result = (prev as any)(event);
         if (result instanceof Promise) {
           const res = await result;
-          info?.cb?.();
+          onScriptCompleteCallback();
           return res;
         }
-        info?.cb?.();
+        onScriptCompleteCallback();
         return result;
       }
     }
-    info?.cb?.();
+    onScriptCompleteCallback();
   };
 
   script.onerror = onScriptComplete.bind(null, script.onerror);
@@ -127,7 +137,8 @@ export function createScript(info: {
 
 export function createLink(info: {
   url: string;
-  cb: (value: void | PromiseLike<void>) => void;
+  cb?: (value: void | PromiseLike<void>) => void;
+  onErrorCallback?: (error: Error) => void;
   attrs: Record<string, string>;
   needDeleteLink?: boolean;
   createLinkHook?: (
@@ -184,6 +195,13 @@ export function createLink(info: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     event: any,
   ): void => {
+    const onLinkCompleteCallback = () => {
+      if (event?.type === 'error') {
+        info?.onErrorCallback && info?.onErrorCallback(event);
+      } else {
+        info?.cb && info?.cb();
+      }
+    };
     // Prevent memory leaks in IE.
     if (link) {
       link.onerror = null;
@@ -197,11 +215,11 @@ export function createLink(info: {
       if (prev) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const res = (prev as any)(event);
-        info.cb();
+        onLinkCompleteCallback();
         return res;
       }
     }
-    info.cb();
+    onLinkCompleteCallback();
   };
 
   link.onerror = onLinkComplete.bind(null, link.onerror);
@@ -218,10 +236,11 @@ export function loadScript(
   },
 ) {
   const { attrs = {}, createScriptHook } = info;
-  return new Promise<void>((resolve, _reject) => {
+  return new Promise<void>((resolve, reject) => {
     const { script, needAttach } = createScript({
       url,
       cb: resolve,
+      onErrorCallback: reject,
       attrs: {
         fetchpriority: 'high',
         ...attrs,