Resource Retry Plugin#

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#

resource retry plugin is provided by the @module-federation/retry-plugin package. Let's install it first.

npm add @module-federation/retry-plugin --save

Usage#

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.:

The first way: register in the build plugin#

import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginModuleFederation({
      ...,
+     runtimePlugins: [
+       path.join(__dirname, './src/runtime-plugin/retry.ts'),
+     ],
    }),
  ],
});

// ./src/runtime-plugin/retry.ts
import { RetryPlugin } from '@module-federation/retry-plugin';
const retryPlugin = () => RetryPlugin({
    fetch: {},
    script: {}
})
export default retryPlugin;

The Second way: register at runtime#

import { init, loadRemote } from '@module-federation/enhanced/runtime';
import { RetryPlugin } from '@module-federation/retry-plugin';

init({
  name: 'federation_consumer',
  remotes: [],
  plugins: [
    RetryPlugin({
      fetch: {},
      script: {},
    }),
  ],
});

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#

const RetryPlugin: (params: RetryPluginParams) => FederationRuntimePlugin;

type RetryPluginParams = {
  fetch?: FetchWithRetryOptions; // fetch retry options
  script?: ScriptWithRetryOptions; // script retry options
};

type FetchWithRetryOptions = {
  url?: string;
  options?: RequestInit;
  retryTimes?: number;
  retryDelay?: number;
  fallback?: (() => string) | ((url: string | URL | globalThis.Request) => string);
}

type ScriptWithRetryOptions = {
  retryTimes?: number;
  retryDelay?: number;
  moduleName?: Array<string>;
  cb?: (resolve: (value: unknown) => void, error: any) => void;
}

RetryPluginParams Type Description#

RetryPluginParams is the parameter type used to configure the RetryPlugin, which contains retry options for two types of resources: fetch and script.

Properties#

• script: ScriptWithRetryOptions (optional)

  • 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#

• url:

  • string
  • 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
  • Options passed to the fetch request.

• retryTimes:

  • number
  • Options
  • The number of retries, default is 3.

• retryDelay:

  • number
  • optional
  • The delay time between each retry (in milliseconds).

• fallback:

  • () => string | ((url: string | URL | globalThis.Request) => string)
  • optional
  • A function, which can optionally receive the failed URL, that returns a fallback string to be used if all retries fail. This function is called when all retry attempts have failed.

ScriptWithRetryOptions 类型说明#

• retryTimes:

  • number
  • optional
  • The number of retries, default is 3.

• retryDelay:

  • number
  • optional
  • The delay time between each retry (in milliseconds).

• moduleName:

  • Array<string>
  • optional
  • module name list, the value is the module name or module alias. Used to identify the module that needs to be retried. If not set, it defaults to retrying all modules that failed to load.

• cb:

  • (resolve: (value: unknown) => void, error: any) => void
  • optional
  • Callback function, callback after retry failure

the complete configuration can be referred to as follows:

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:2001/-mf-manifest.json',
        // after all retried failed, set a fallback function to guarantee a fallback resource
        fallback: (url: string) => '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);
        },
      },
    }),
  ],
});