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
yarn
pnpm
bun
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.:

NOTE

Note: Choose either of the two ways to register the build plugin and do not register it repeatedly

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.