RetryPlugin#

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.

Installation#

This RetryPlugin is Provided by the @module-federation/retry-plugin package

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

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

Method1: Register in the build plugin#

import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  tools: {
    rspack: (config, { appendPlugins }) => {
      appendPlugins([
        new ModuleFederationPlugin({
          ...,
+         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: {
        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;
        },
    }
})
export default retryPlugin;

Method2: Register it at 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;
        },
      },
    }),
  ],
});

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.

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;
}

type ScriptWithRetryOptions = {
  url?: string;
  attrs?: Record<string, string>;
  retryTimes?: number;
  customCreateScript?: CreateScriptFunc;
}

RetryPluginParams type description#

RetryPluginParams is the parameter type used to configure 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.

FetchWithRetryOptions type description#

FetchWithRetryOptions is the type used to configure the retry options for fetch type resources.

属性#

Properties#

• url:

  • string
  • Optional. When not set, all failed resources will default to retry logic.
  • The URL of the resource to be retried.

• options:

  • RequestInit
  • Optional.
  • The request options for the fetch request.

• retryTimes:

  • number
  • Optional.
  • The number of retry attempts. Defaults to 3.

• retryDelay:

  • number
  • Optional.
  • The delay between retry attempts in milliseconds. Defaults to 1000.

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

ScriptWithRetryOptions Type Description#

ScriptWithRetryOptions is the type used to configure the retry options for script type resources.

Properties#

• url:

  • string
  • Optional. When not set, all failed resources will default to retry logic.
  • The URL of the resource to be retried.

• attrs:

  • Record<string, string>
  • Optional
  • The attributes to be passed to the script element.

• retryTimes:

  • number
  • Optional
  • The number of retry attempts. Defaults to 3.

• retryDelay:

  • number
  • Optional
  • The delay between retry attempts in milliseconds. Defaults to 1000.

• customCreateScript:

  • CreateScriptFunc
  • Optional.
  • A custom function to create the script element.