Module Federation Runtime - Preload and Error Handling

[petrosD93]

Hello,

I have a basic example set up to work with Module Federation Runtime.
My host application has the following in App.tsx:

init({
    name: 'host',
    remotes: [
        {
            name: "remote",
            alias: 'remote',
            entry: "http://localhost:3001/mf-manifest.json",
        }
    ],
});

preloadRemote([{
    nameOrAlias: 'remote',
}])

Now everything works fine when the remote is up and running, however, when the remote is offline I do get the following error:

My rsbuild.config.js looks like this:

module.exports = {
  plugins: [
    pluginReact({ splitChunks: { react: false, router: false } }),
    pluginSass({
      sassLoaderOptions: {
        sassOptions: {
          silenceDeprecations: ['import', 'global-builtin', 'abs-percent', 'color-functions', 'mixed-decls'],
        },
      },
    }),
    // pluginModuleFederation(mfConfig)
  ],
  html: {
    template: path.resolve(process.cwd(), 'public/index.html'),
  },
  server: {
    port: 3000,
    open: '/',
  },
  tools: {
    rspack: {
      plugins:[
        new ModuleFederationPlugin(
        {
          name: 'host',
          shared: ['react', 'react-dom'],
          runtimePlugins: [path.resolve(__dirname, './offline-remote.js')],
        }
        ),
      ],
      output: {
        publicPath: 'auto',
      },
    },
  },
  output: {
    distPath: {
      root: 'build',
    },
  },
}

and offline-remote.js looks like this

export default function () {
    const getErrorMessage = (id, error) => `Remote ${id} is offline due to error: ${error}`;

    const getModule = (pg, from) => {
        if (from === 'build') {
            return () => ({
                __esModule: true,
                default: pg,
            });
        } else {
            return {
                default: pg,
            };
        }
    };

    return {
        name: 'offline-remote-plugin',
        errorLoadRemote({id, error, from, origin, lifecycle}) {
            const pg = function () {
                return null;
            };

            if (lifecycle === 'onLoad') {
                const remoteId = id.split('/')?.[0] ?? id
                console.log(`%cError Loading Remote: ${remoteId}`, 'color: red; font-size: 20px')
                console.error(getErrorMessage(remoteId, error));
            }

            return getModule(pg, from);
        },
    };
}

The question here is how we can handle the error shown above so that the Failed to fetch manifest error is not shown?