|
| 1 | +import { PackageManagerTabs, Tabs, Tab } from '@theme'; |
| 2 | + |
| 3 | +# RetryPlugin |
| 4 | + |
| 5 | +## Introduction |
| 6 | + |
| 7 | +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. |
| 8 | + |
| 9 | +## Installation |
| 10 | + |
| 11 | +This `RetryPlugin` is Provided by the `@module-federation/retry-plugin` package |
| 12 | + |
| 13 | +<PackageManagerTabs |
| 14 | + command={{ |
| 15 | + npm: 'npm add @module-federation/retry-plugin --save', |
| 16 | + yarn: 'yarn add @module-federation/retry-plugin --save', |
| 17 | + pnpm: 'pnpm add @module-federation/retry-plugin --save', |
| 18 | + bun: 'bun add @module-federation/retry-plugin --save', |
| 19 | + }} |
| 20 | +/> |
| 21 | + |
| 22 | +## Usage |
| 23 | + |
| 24 | +`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.: |
| 25 | + |
| 26 | + |
| 27 | +:::note |
| 28 | +Note: Choose either of the two ways to register the build plugin and do not register it repeatedly |
| 29 | + |
| 30 | +::: |
| 31 | + |
| 32 | + |
| 33 | +### Method1: Register in the build plugin |
| 34 | + |
| 35 | +```ts |
| 36 | +// ./src/runtime-plugin/retry.ts |
| 37 | +import { RetryPlugin } from '@module-federation/retry-plugin'; |
| 38 | +const retryPlugin = () => RetryPlugin({ |
| 39 | + fetch: { |
| 40 | + url: 'http://localhost:2008/not-exist-mf-manifest.json', |
| 41 | + fallback: () => 'http://localhost:2001/mf-manifest.json', |
| 42 | + }, |
| 43 | + script: { |
| 44 | + // url: 'http://localhost:2008/not-exist-mf-manifest.json', |
| 45 | + url: 'http://localhost:2001/static/js/async/src_App_tsx.js', |
| 46 | + customCreateScript: (url: string, attrs: Record<string, string>) => { |
| 47 | + let script = document.createElement('script'); |
| 48 | + script.src = `http://localhost:2011/static/js/async/src_App_tsx.js`; |
| 49 | + script.setAttribute('loader-hoos', 'isTrue'); |
| 50 | + script.setAttribute('crossorigin', 'anonymous'); |
| 51 | + return script; |
| 52 | + }, |
| 53 | + } |
| 54 | +}) |
| 55 | +export default retryPlugin; |
| 56 | +``` |
| 57 | + |
| 58 | +### Method2: Register it at runtime |
| 59 | + |
| 60 | +```ts |
| 61 | +import { |
| 62 | + init, |
| 63 | + loadRemote, |
| 64 | + RetryPlugin, |
| 65 | +} from '@module-federation/retry-plugin'; |
| 66 | + |
| 67 | +init({ |
| 68 | + name: 'federation_consumer', |
| 69 | + remotes: [], |
| 70 | + plugins: [ |
| 71 | + RetryPlugin({ |
| 72 | + fetch: { |
| 73 | + // the retry resource url |
| 74 | + url: 'http://localhost:2008/not-exist-mf-manifest.json', |
| 75 | + // after all retried failed, set a fallback function to guarantee a fallback resource |
| 76 | + fallback: () => 'http://localhost:2001/mf-manifest.json', |
| 77 | + }, |
| 78 | + script: { |
| 79 | + // the retry resource url |
| 80 | + url: 'http://localhost:2001/static/js/async/src_App_tsx.js', |
| 81 | + // if you need to custom create script element, pass `customCreateScript` and plugin will use customCreateScript to create script element |
| 82 | + customCreateScript: (url: string, attrs: Record<string, string>) => { |
| 83 | + let script = document.createElement('script'); |
| 84 | + script.src = `http://localhost:2011/static/js/async/src_App_tsx.js`; |
| 85 | + script.setAttribute('loader-hoos', 'isTrue'); |
| 86 | + script.setAttribute('crossorigin', 'anonymous'); |
| 87 | + return script; |
| 88 | + }, |
| 89 | + }, |
| 90 | + }), |
| 91 | + ], |
| 92 | +}); |
| 93 | +``` |
| 94 | + |
| 95 | +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. |
| 96 | + |
| 97 | +## Type |
| 98 | + |
| 99 | +```ts |
| 100 | +const RetryPlugin: (params: RetryPluginParams) => FederationRuntimePlugin; |
| 101 | + |
| 102 | +type RetryPluginParams = { |
| 103 | + fetch?: FetchWithRetryOptions; // fetch retry options |
| 104 | + script?: ScriptWithRetryOptions; // script retry options |
| 105 | +}; |
| 106 | + |
| 107 | +type FetchWithRetryOptions = { |
| 108 | + url?: string; |
| 109 | + options?: RequestInit; |
| 110 | + retryTimes?: number; |
| 111 | + retryDelay?: number; |
| 112 | + fallback?: () => string; |
| 113 | +} |
| 114 | + |
| 115 | +type ScriptWithRetryOptions = { |
| 116 | + url?: string; |
| 117 | + attrs?: Record<string, string>; |
| 118 | + retryTimes?: number; |
| 119 | + customCreateScript?: CreateScriptFunc; |
| 120 | +} |
| 121 | + |
| 122 | +``` |
| 123 | + |
| 124 | + |
| 125 | +## RetryPluginParams type description |
| 126 | + |
| 127 | +`RetryPluginParams` is the parameter type used to configure `RetryPlugin`, which contains retry options for two types of resources: `fetch` and `script`. |
| 128 | + |
| 129 | +### Properties |
| 130 | + |
| 131 | +- **fetch**: `FetchWithRetryOptions` (optional) |
| 132 | + - Used to configure the retry options for fetch type resources. |
| 133 | + |
| 134 | +- **script**: `ScriptWithRetryOptions` (optional) |
| 135 | + - Used to configure the retry options for script type resources. |
| 136 | + |
| 137 | + |
| 138 | +## FetchWithRetryOptions type description |
| 139 | + |
| 140 | +`FetchWithRetryOptions` is the type used to configure the retry options for fetch type resources. |
| 141 | + |
| 142 | +### 属性 |
| 143 | +### Properties |
| 144 | + |
| 145 | +- **url**: |
| 146 | + - `string` |
| 147 | + - Optional. When not set, all failed resources will default to retry logic. |
| 148 | + - The URL of the resource to be retried. |
| 149 | + |
| 150 | +- **options**: |
| 151 | + - `RequestInit` |
| 152 | + - Optional. |
| 153 | + - The request options for the fetch request. |
| 154 | + |
| 155 | +- **retryTimes**: |
| 156 | + - `number` |
| 157 | + - Optional. |
| 158 | + - The number of retry attempts. Defaults to 3. |
| 159 | + |
| 160 | +- **retryDelay**: |
| 161 | + - `number` |
| 162 | + - Optional. |
| 163 | + - The delay between retry attempts in milliseconds. Defaults to 1000. |
| 164 | + |
| 165 | +- **fallback**: |
| 166 | + - `() => string` |
| 167 | + - Optional. A function that returns a Promise that resolves to a Response object. This function is called when all retry attempts have failed. |
| 168 | + |
| 169 | + |
| 170 | +### ScriptWithRetryOptions Type Description |
| 171 | + |
| 172 | +`ScriptWithRetryOptions` is the type used to configure the retry options for script type resources. |
| 173 | + |
| 174 | +### Properties |
| 175 | + |
| 176 | +- **url**: |
| 177 | + - `string` |
| 178 | + - Optional. When not set, all failed resources will default to retry logic. |
| 179 | + - The URL of the resource to be retried. |
| 180 | + |
| 181 | +- **attrs**: |
| 182 | + - `Record<string, string>` |
| 183 | + - Optional |
| 184 | + - The attributes to be passed to the script element. |
| 185 | + |
| 186 | +- **retryTimes**: |
| 187 | + - `number` |
| 188 | + - Optional |
| 189 | + - The number of retry attempts. Defaults to 3. |
| 190 | + |
| 191 | +- **retryDelay**: |
| 192 | + - `number` |
| 193 | + - Optional |
| 194 | + - The delay between retry attempts in milliseconds. Defaults to 1000. |
| 195 | + |
| 196 | +- **customCreateScript**: |
| 197 | + - `CreateScriptFunc` |
| 198 | + - Optional. |
| 199 | + - A custom function to create the script element. |
0 commit comments