fix(retry-plugin): error-boundary should render until script retry finished (#3127)

Author: danpeen

.changeset/blue-poets-play.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/retry-plugin': patch
+'@module-federation/runtime': patch
+---
+
+fix(retry-plugin): fix script retry logic to make error-boundary should render until script retry finished.

apps/router-demo/router-host-2000/src/App.tsx

@@ -18,19 +18,13 @@ init({
         fallback: () => 'http://localhost:2001/mf-manifest.json',
       },
       script: {
-        url: 'http://localhost:2001/static/js/async/src_App_tsx.js',
-        customCreateScript: (url: string, attrs: Record<string, string>) => {
-          let script = document.createElement('script');
-          script.src = `http://localhost:2011/static/js/async/src_App_tsx.js`;
-          script.setAttribute('loader-hoos', 'isTrue');
-          script.setAttribute('crossorigin', 'anonymous');
-          script.onload = (event) => {
-            console.log('--------custom script onload--------', event);
-          };
-          script.onerror = (event) => {
-            console.log('--------custom script onerror--------', event);
-          };
-          return script;
+        retryTimes: 3,
+        retryDelay: 1000,
+        moduleName: ['remote1'],
+        cb: (resolve, error) => {
+          return setTimeout(() => {
+            resolve(error);
+          }, 1000);
         },
       },
     }),

apps/router-demo/router-host-2000/src/runtime-plugin/retry.ts

@@ -3,17 +3,17 @@ import { RetryPlugin } from '@module-federation/retry-plugin';
 const retryPlugin = () =>
   RetryPlugin({
     fetch: {
-      url: 'http://localhost:2008/not-exist-mf-manifest.json',
+      url: 'http://localhost:2001/mf-manifest.json',
       fallback: () => 'http://localhost:2001/mf-manifest.json',
     },
     script: {
-      url: 'http://localhost:2001/static/js/async/src_App_tsx.js',
-      customCreateScript: (url: string, attrs: Record<string, string>) => {
-        let script = document.createElement('script');
-        script.src = `http://localhost:2011/static/js/async/src_App_tsx.js`;
-        script.setAttribute('loader-hoos', 'isTrue');
-        script.setAttribute('crossorigin', 'anonymous');
-        return script;
+      retryTimes: 3,
+      retryDelay: 1000,
+      moduleName: ['remote1'],
+      cb: (resolve, error) => {
+        return setTimeout(() => {
+          resolve(error);
+        }, 1000);
       },
     },
   });

apps/website-new/docs/en/plugin/plugins/retry-plugin.mdx

@@ -1,14 +1,11 @@
 import { PackageManagerTabs, Tabs, Tab } from '@theme';
 
-# RetryPlugin
+# Resource Retry Plugin
 
-## Introduction
-
-Resource retry plugin is used to retry resources when they fail to load, thereby increasing the success rate of resource loading. In Module Federation, we provide the retry plugin `RetryPlugin` to increase the retry mechanism, which can improve the stability of the application.
+ resource retry plugin is used to retry resources when they fail to load, thereby increasing the success rate of resource loading. In Module Federation, we provide the retry plugin `RetryPlugin` to increase the retry mechanism for remote applications, which can improve the stability of the application.
 
 ## Installation
-
-This `RetryPlugin` is Provided by the `@module-federation/retry-plugin` package
+resource retry plugin is provided by the `@module-federation/retry-plugin` package. Let's install it first.
 
 <PackageManagerTabs
   command={{
@@ -21,16 +18,19 @@ This `RetryPlugin` is Provided by the `@module-federation/retry-plugin` package
 
 ## Usage
 
-`RetryPlugin` is a runtime plugin, we can register this plugin through the `runtimePlugin` of the build plugin or register it at runtime and configure retry parameters and retry logic, etc.:
-
+`RetryPlugin` is a runtime plugin, and we can register this plugin through the `runtimePlugin` of the build plugin or register it at runtime and configure retry parameters and retry logic, etc.:
 
 :::note
-Note: Choose either of the two ways to register the build plugin and do not register it repeatedly
+
+Attention
+
+- build plugin registration and runtime registration are optional. You can choose either one, but not both.
+- It is recommended to register the RetryPlugin as early as possible in the build plugin to avoid the failure of resource requests, which may cause the project to fail to start and cannot enter the runtime to register the retry plugin, thus failing to retry resources.
 
 :::
 
 
-### Method1: Register in the build plugin
+### The first way: register in the build plugin
 
 ```diff
 import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
@@ -47,67 +47,39 @@ export default defineConfig({
     }),
   ],
 });
+
 ```
 
+
 ```ts
 // ./src/runtime-plugin/retry.ts
 import { RetryPlugin } from '@module-federation/retry-plugin';
 const retryPlugin = () => RetryPlugin({
-    fetch: {
-        url: 'http://localhost:2008/not-exist-mf-manifest.json',
-        fallback: () => 'http://localhost:2001/mf-manifest.json',
-    },
-    script: {
-        // url: 'http://localhost:2008/not-exist-mf-manifest.json',
-        url: 'http://localhost:2001/static/js/async/src_App_tsx.js',
-        customCreateScript: (url: string, attrs: Record<string, string>) => {
-            let script = document.createElement('script');
-            script.src = `http://localhost:2011/static/js/async/src_App_tsx.js`;
-            script.setAttribute('loader-hoos', 'isTrue');
-            script.setAttribute('crossorigin', 'anonymous');
-            return script;
-        },
-    }
+    fetch: {},
+    script: {}
 })
 export default retryPlugin;
 ```
 
-### Method2: Register it at runtime
+### The Second way: register at runtime
 
 ```ts
-import {
-  RetryPlugin,
-} from '@module-federation/retry-plugin';
+import { init, loadRemote } from '@module-federation/enhanced/runtime';
+import { RetryPlugin } from '@module-federation/retry-plugin';
 
 init({
   name: 'federation_consumer',
   remotes: [],
   plugins: [
     RetryPlugin({
-      fetch: {
-        // the retry resource url
-        url: 'http://localhost:2008/not-exist-mf-manifest.json',
-        // after all retried failed, set a fallback function to guarantee a fallback resource
-        fallback: () => 'http://localhost:2001/mf-manifest.json',
-      },
-      script: {
-        // the retry resource url
-        url: 'http://localhost:2001/static/js/async/src_App_tsx.js',
-        // if you need to custom create script element, pass `customCreateScript` and plugin will use customCreateScript to create script element
-        customCreateScript: (url: string, attrs: Record<string, string>) => {
-          let script = document.createElement('script');
-          script.src = `http://localhost:2011/static/js/async/src_App_tsx.js`;
-          script.setAttribute('loader-hoos', 'isTrue');
-          script.setAttribute('crossorigin', 'anonymous');
-          return script;
-        },
-      },
+      fetch: {},
+      script: {},
     }),
   ],
 });
 ```
 
-the resource that needs to be retried is divided into two types: the `fetch` type and the `script` type, and we control the retry logic of these two resource types through the `fetch` parameter and the `script` parameter, respectively.
+the resources that need to be retried are divided into two types: fetch type and script type. We control the retry logic of these two resource types respectively through the `fetch` parameter and the `script` parameter.
 
 ## Type
 
@@ -128,87 +100,107 @@ type FetchWithRetryOptions = {
 }
 
 type ScriptWithRetryOptions = {
-  url?: string;
-  attrs?: Record<string, string>;
   retryTimes?: number;
-  customCreateScript?: CreateScriptFunc;
+  retryDelay?: number;
+  moduleName?: Array<string>;
+  cb?: (resolve: (value: unknown) => void, error: any) => void;
 }
 
 ```
 
+## RetryPluginParams Type Description
 
-## RetryPluginParams type description
-
-`RetryPluginParams` is the parameter type used to configure `RetryPlugin`, which contains retry options for two types of resources: `fetch` and `script`.
+`RetryPluginParams` is the parameter type used to configure the `RetryPlugin`, which contains retry options for two types of resources: `fetch` and `script`.
 
 ### Properties
 
-- **fetch**: `FetchWithRetryOptions` (optional)
-  - Used to configure the retry options for fetch type resources.
-
 - **script**: `ScriptWithRetryOptions` (optional)
-  - Used to configure the retry options for script type resources.
+  - used to configure the retry options for fetch type resources.
 
+- **script**: `ScriptWithRetryOptions` (optional)
+  - `ScriptWithRetryOptions` is the type used to configure the retry options for script type resources.
 
-## FetchWithRetryOptions type description
-
-`FetchWithRetryOptions` is the type used to configure the retry options for fetch type resources.
-
-### 属性
-### Properties
+### FetchWithRetryOptions Type Description
 
 - **url**:
   - `string`
-  - Optional. When not set, all failed resources will default to retry logic.
-  - The URL of the resource to be retried.
+  - optional, when not set, all failed URLs will enter the retry logic by default
+  - The URL of the resource that needs to be retried.
 
 - **options**:
   - `RequestInit`
-  - Optional.
-  - The request options for the fetch request.
+  - optional
+  - Options passed to the fetch request.
 
 - **retryTimes**:
   - `number`
-  - Optional.
-  - The number of retry attempts. Defaults to 3.
+  - Options
+  - The number of retries, default is 3.
 
 - **retryDelay**:
   - `number`
-  - Optional.
-  - The delay between retry attempts in milliseconds. Defaults to 1000.
+  - optional
+  - The delay time between each retry (in milliseconds).
 
 - **fallback**:
   - `() => string`
-  - Optional. A function that returns a Promise that resolves to a Response object. This function is called when all retry attempts have failed.
-
+  - optional
+  - Returns the URL of a backup resource after all retries fail.
 
-### ScriptWithRetryOptions Type Description
+### ScriptWithRetryOptions 类型说明
 
-`ScriptWithRetryOptions` is the type used to configure the retry options for script type resources.
+- **retryTimes**:
+  - `number`
+  - optional
+  - The number of retries, default is 3.
 
-### Properties
+- **retryDelay**:
+  - `number`
+  - optional
+  - The delay time between each retry (in milliseconds).
 
-- **url**:
+- **moduleName**:
   - `string`
-  - Optional. When not set, all failed resources will default to retry logic.
-  - The URL of the resource to be retried.
+  - optional
+  - The module name, used to identify the module that needs to be retried.
 
-- **attrs**:
-  - `Record<string, string>`
-  - Optional
-  - The attributes to be passed to the script element.
+- **cb**:
+  - `(resolve: (value: unknown) => void, error: any) => void`
+  - optional
+  - Callback function, callback after retry failure
 
-- **retryTimes**:
-  - `number`
-  - Optional
-  - The number of retry attempts. Defaults to 3.
+the complete configuration can be referred to as follows:
 
-- **retryDelay**:
-  - `number`
-  - Optional
-  - The delay between retry attempts in milliseconds. Defaults to 1000.
+```ts
+import { init, loadRemote } from '@module-federation/enhanced/runtime';
+import { RetryPlugin } from '@module-federation/retry-plugin';
 
-- **customCreateScript**:
-  - `CreateScriptFunc`
-  - Optional.
-  - A custom function to create the script element.
+init({
+  name: 'federation_consumer',
+  remotes: [],
+  plugins: [
+    RetryPlugin({
+      fetch: {
+        // the retry resource url
+        url: 'http://localhost:2001/-mf-manifest.json',
+        // after all retried failed, set a fallback function to guarantee a fallback resource
+        fallback: () => 'http://localhost:2002/mf-manifest.json',
+      },
+      script: {
+        // the retry times
+        retryTimes: 3,
+        // the retry delay
+        retryDelay: 1000,
+        // the module name list that need to be retried, defualt behavior is to retry all modules
+        moduleName: ['remote1'],
+        // the callback function that will be called after all retried failed
+        cb: (resolve, error) => {
+          return setTimeout(() => {
+            resolve(error);
+          }, 2000);
+        },
+      },
+    }),
+  ],
+});
+```