Display ErrorBoundary for failure in fetching remoteEntry.js instead of white / blank page

[KageyamaJie]

Hi everyone!

I have been trying to display fallback via ErrorBoundary with following steps:

1. Purposely not running remote app in preview mode.
2. Only run host app in dev mode.
3. Attempt to catch the error 404 with remoteEntry.js via vite.config.ts (But nothing is logged there in the console)
4. ErrorBoundaryWrap component never gets to display the fallback

In short, with my understanding if I have two app. Calling them Host & Remote app.
If remote goes down, leaving only host available.
Host should be able to capture the error via ErrorBoundary instead of displaying white / blank screen.

Anyone have any idea to go around this?

App.tsx (Host app):

import { Home } from '@remote/modules';
import { ErrorBoundaryWrap } from './ErrorBoundaryWrap';

export const App = () => {
    return (
        <div>
                <ErrorBoundaryWrap>
                    <Home />
                </ErrorBoundaryWrap>
        </div>
    );
};

ErrorBoundaryWrap.tsx (Host app):

import { FC } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

type ErrorBoundaryWrapProp = {
    children: JSX.Element;
};

export const ErrorBoundaryWrap: FC<ErrorBoundaryWrapProp> = ({ children }) => {
    return (
        <ErrorBoundary fallbackRender={() => <div>Something went wrong while fetching remoteEntry</div>}>
            {children}
        </ErrorBoundary>
    );
};

vite.config.ts - portion of the MFE plugin (Host app):
Note: the catch and finally block never gets logged in console

plugins: [
            react(),
            federation({
                name: 'host-app',
                filename: 'remoteEntry.js',
                remotes: {
                    '@remote': {
                        external: `Promise.resolve('http://localhost:3001/assets/remoteEntry.js')`,
                        externalType: 'promise',
                        catch: async (onrejected) => {
                            console.log(`catch`);
                        },
                        finally: async (onfinally) => {
                            console.log(`finally`);
                        },
                    },
                },
            }),
        ],

Error message:
Note: Once this error message appears, ErrorBoundary never get to display on UI