feat(retry-plugin): add getRetryPath in retry plugin to support users to customize retry path (#4023)

Author: danpeen

.changeset/fuzzy-foxes-perform.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/retry-plugin': patch
+'@module-federation/runtime-core': patch
+---
+
+feat(retry-plugin): Add getRetryPath support in retry plugin to allow users to customize retry path

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

@@ -17,6 +17,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import Remote1AppNew from 'remote1/app';
 import type { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';
 import { Spin } from 'antd';
+import { createInstance } from '@module-federation/enhanced/runtime';
 
 const fallbackPlugin: () => ModuleFederationRuntimePlugin = function () {
   return {
@@ -27,7 +28,7 @@ const fallbackPlugin: () => ModuleFederationRuntimePlugin = function () {
   };
 };
 
-init({
+const mf = createInstance({
   name: 'federation_consumer',
   remotes: [],
   plugins: [

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

@@ -3,8 +3,10 @@ import { RetryPlugin } from '@module-federation/retry-plugin';
 const retryPlugin = () =>
   RetryPlugin({
     fetch: {
-      // url: 'http://localhost:2001/mf-manifest.json',
       // fallback: () => 'http://localhost:2001/mf-manifest.json',
+      // getRetryPath: (url) => {
+      //   return 'http://localhost:2001/mf-manifest.json?test=1';
+      // },
     },
     script: {
       retryTimes: 3,
@@ -20,6 +22,9 @@ const retryPlugin = () =>
           resolve(error);
         }, 1000);
       },
+      getRetryPath: (url) => {
+        return 'http://localhost:2001/remote1.js?test=2';
+      },
     },
   });
 export default retryPlugin;

packages/retry-plugin/__tests__/retry.spec.ts

@@ -1,7 +1,6 @@
 import { fetchWithRetry } from '../src/fetch-retry';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
-// Mock the DOM environment
 beforeEach(() => {
   vi.clearAllMocks();
   vi.useFakeTimers();
@@ -20,7 +19,9 @@ vi.spyOn(document, 'createElement').mockImplementation(() => {
   return mockScriptElement as unknown as HTMLScriptElement;
 });
 
-vi.spyOn(document.head, 'appendChild').mockImplementation(() => {});
+vi.spyOn(document.head, 'appendChild').mockImplementation(
+  () => mockScriptElement as any,
+);
 
 const mockGlobalFetch = (mockData) => {
   const mockFetch = vi.fn().mockResolvedValueOnce(mockResponse(200, mockData));
@@ -65,7 +66,7 @@ describe('fetchWithRetry', () => {
     const mockData = { success: true };
     mockGlobalFetch(mockData);
     const response = await fetchWithRetry({
-      url: 'https://example.com',
+      manifestUrl: 'https://example.com',
       retryDelay: 0,
     });
     expect(await response.json()).toEqual(mockData);
@@ -76,7 +77,7 @@ describe('fetchWithRetry', () => {
     mockGlobalFetch(mockData);
 
     const response = await fetchWithRetry({
-      url: 'https://example.com',
+      manifestUrl: 'https://example.com',
       retryDelay: 0,
     });
 
@@ -88,7 +89,7 @@ describe('fetchWithRetry', () => {
     mockErrorFetch();
     const retryTimes = 3;
     const responsePromise = fetchWithRetry({
-      url: 'https://example.com',
+      manifestUrl: 'https://example.com',
       retryTimes,
       retryDelay: 0,
     });
@@ -97,14 +98,14 @@ describe('fetchWithRetry', () => {
     await expect(responsePromise).rejects.toThrow(
       'The request failed three times and has now been abandoned',
     );
-    expect(fetch).toHaveBeenCalledTimes(4); //first fetch + retryTimes fetch
+    expect(fetch).toHaveBeenCalledTimes(4);
   });
 
   it('should fall back to the fallback URL after retries fail', async () => {
     mockErrorFetch();
     const retryTimes = 3;
     const responsePromise = fetchWithRetry({
-      url: 'https://example.com',
+      manifestUrl: 'https://example.com',
       retryTimes,
       retryDelay: 0,
       fallback: () => 'https://fallback.com',
@@ -114,15 +115,15 @@ describe('fetchWithRetry', () => {
     await expect(responsePromise).rejects.toThrow(
       'The request failed three times and has now been abandoned',
     );
-    expect(fetch).toHaveBeenCalledTimes(5); //first fetch + retryTimes fetch
+    expect(fetch).toHaveBeenCalledTimes(5);
     expect(fetch).toHaveBeenLastCalledWith('https://fallback.com', {});
   });
 
   it('should build fallback URL from remote after retries fail', async () => {
     mockErrorFetch();
     const retryTimes = 3;
     const responsePromise = fetchWithRetry({
-      url: 'https://example.com',
+      manifestUrl: 'https://example.com',
       retryTimes,
       retryDelay: 0,
       fallback: (url) => `${url}/fallback`,
@@ -132,7 +133,7 @@ describe('fetchWithRetry', () => {
     await expect(responsePromise).rejects.toThrow(
       'The request failed three times and has now been abandoned',
     );
-    expect(fetch).toHaveBeenCalledTimes(5); //first fetch + retryTimes fetch
+    expect(fetch).toHaveBeenCalledTimes(5);
     expect(fetch).toHaveBeenLastCalledWith('https://example.com/fallback', {});
   });
 
@@ -148,28 +149,180 @@ describe('fetchWithRetry', () => {
     global.fetch = mockFetch;
     await expect(
       fetchWithRetry({
-        url: 'https://example.com',
+        manifestUrl: 'https://example.com',
         retryTimes: 0,
         retryDelay: 0,
       }),
     ).rejects.toThrow('Json parse error');
   });
 
-  it('should build fallback URL from remote after retries fail', async () => {
-    mockErrorFetch();
-    const retryTimes = 3;
-    const responsePromise = fetchWithRetry({
-      url: 'https://example.com',
-      retryTimes,
-      retryDelay: 0,
-      fallback: (url) => `${url}/fallback`,
+  describe('getRetryPath functionality', () => {
+    it('should use original URL for first attempt and getRetryPath for retries', async () => {
+      const mockFetch = vi
+        .fn()
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockResolvedValueOnce(mockResponse(200, { success: true }));
+
+      global.fetch = mockFetch;
+      const getRetryPath = vi.fn().mockReturnValue('https://retry.example.com');
+
+      const response = await fetchWithRetry({
+        manifestUrl: 'https://example.com',
+        retryTimes: 3,
+        retryDelay: 0,
+        getRetryPath,
+      });
+
+      expect(fetch).toHaveBeenCalledTimes(2);
+      expect(fetch).toHaveBeenNthCalledWith(1, 'https://example.com', {});
+      expect(fetch).toHaveBeenNthCalledWith(2, 'https://retry.example.com', {});
+      expect(getRetryPath).toHaveBeenCalledWith('https://example.com');
     });
-    vi.advanceTimersByTime(2000 * retryTimes);
 
-    await expect(responsePromise).rejects.toThrow(
-      'The request failed three times and has now been abandoned',
-    );
-    expect(fetch).toHaveBeenCalledTimes(5); //first fetch + retryTimes fetch
-    expect(fetch).toHaveBeenLastCalledWith('https://example.com/fallback', {});
+    it('should not call getRetryPath on first attempt', async () => {
+      const mockData = { success: true };
+      mockGlobalFetch(mockData);
+      const getRetryPath = vi.fn().mockReturnValue('https://retry.example.com');
+      const response = await fetchWithRetry({
+        manifestUrl: 'https://example.com',
+        retryDelay: 0,
+        getRetryPath,
+      });
+
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(fetch).toHaveBeenCalledWith('https://example.com', {});
+      expect(getRetryPath).not.toHaveBeenCalled();
+    });
+
+    it('should use getRetryPath for all retry attempts', async () => {
+      const mockFetch = vi
+        .fn()
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockResolvedValueOnce(mockResponse(200, { success: true }));
+
+      global.fetch = mockFetch;
+      const getRetryPath = vi.fn().mockReturnValue('https://retry.example.com');
+      const response = await fetchWithRetry({
+        manifestUrl: 'https://example.com',
+        retryTimes: 3,
+        retryDelay: 0,
+        getRetryPath,
+      });
+
+      expect(fetch).toHaveBeenCalledTimes(4);
+      expect(fetch).toHaveBeenNthCalledWith(1, 'https://example.com', {});
+      expect(fetch).toHaveBeenNthCalledWith(2, 'https://retry.example.com', {});
+      expect(fetch).toHaveBeenNthCalledWith(3, 'https://retry.example.com', {});
+      expect(fetch).toHaveBeenNthCalledWith(4, 'https://retry.example.com', {});
+      expect(getRetryPath).toHaveBeenCalledTimes(3);
+    });
+
+    it('should handle getRetryPath returning different URLs for each retry', async () => {
+      const mockFetch = vi
+        .fn()
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockResolvedValueOnce(mockResponse(200, { success: true }));
+
+      global.fetch = mockFetch;
+
+      const getRetryPath = vi
+        .fn()
+        .mockReturnValueOnce('https://retry1.example.com')
+        .mockReturnValueOnce('https://retry2.example.com');
+
+      const response = await fetchWithRetry({
+        manifestUrl: 'https://example.com',
+        retryTimes: 2,
+        retryDelay: 0,
+        getRetryPath,
+      });
+
+      expect(fetch).toHaveBeenCalledTimes(3);
+      expect(fetch).toHaveBeenNthCalledWith(1, 'https://example.com', {});
+      expect(fetch).toHaveBeenNthCalledWith(
+        2,
+        'https://retry1.example.com',
+        {},
+      );
+      expect(fetch).toHaveBeenNthCalledWith(
+        3,
+        'https://retry2.example.com',
+        {},
+      );
+      expect(getRetryPath).toHaveBeenCalledTimes(2);
+      expect(getRetryPath).toHaveBeenNthCalledWith(1, 'https://example.com');
+      expect(getRetryPath).toHaveBeenNthCalledWith(2, 'https://example.com');
+    });
+
+    it('should handle getRetryPath returning undefined or null', async () => {
+      const mockFetch = vi
+        .fn()
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockResolvedValueOnce(mockResponse(200, { success: true }));
+
+      global.fetch = mockFetch;
+      const getRetryPath = vi.fn().mockReturnValue(undefined);
+      const response = await fetchWithRetry({
+        manifestUrl: 'https://example.com',
+        retryTimes: 1,
+        retryDelay: 0,
+        getRetryPath,
+      });
+
+      expect(fetch).toHaveBeenCalledTimes(2);
+      expect(fetch).toHaveBeenNthCalledWith(1, 'https://example.com', {});
+      expect(fetch).toHaveBeenNthCalledWith(2, 'https://example.com', {});
+      expect(getRetryPath).toHaveBeenCalledWith('https://example.com');
+    });
+  });
+
+  describe('retry count and timing', () => {
+    it('should execute exactly retryTimes + 1 attempts when retryTimes = 3', async () => {
+      const mockFetch = vi
+        .fn()
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockRejectedValueOnce(new Error('Network error'));
+
+      global.fetch = mockFetch;
+
+      const responsePromise = fetchWithRetry({
+        manifestUrl: 'https://example.com',
+        retryTimes: 3,
+        retryDelay: 0,
+      });
+
+      vi.advanceTimersByTime(1000);
+
+      await expect(responsePromise).rejects.toThrow(
+        'The request failed three times and has now been abandoned',
+      );
+      expect(fetch).toHaveBeenCalledTimes(4);
+    });
+
+    it.skip('should respect retryDelay timing', async () => {
+      const mockFetch = vi
+        .fn()
+        .mockRejectedValueOnce(new Error('Network error'))
+        .mockResolvedValueOnce(mockResponse(200, { success: true }));
+
+      global.fetch = mockFetch;
+
+      const response = await fetchWithRetry({
+        manifestUrl: 'https://example.com',
+        retryTimes: 1,
+        retryDelay: 100,
+      });
+
+      expect(fetch).toHaveBeenCalledTimes(2);
+      expect(fetch).toHaveBeenNthCalledWith(1, 'https://example.com', {});
+      expect(fetch).toHaveBeenNthCalledWith(2, 'https://example.com', {});
+
+      expect(response).toBeDefined();
+    }, 10000);
   });
 });