How to Create a UI and Show It in the Shell if a Remote Is Down

[basit-qayoom]

How to Create a UI and Show It in the Shell if a Remote Is Down

Introduction

I'm currently working on a Module Federation setup using @module-federation/enhanced (v0.7.0) with repack. I've implemented a custom FederationRuntimePlugin to handle scenarios where a remote module is offline. My current plugin logs an error message when a remote fails to load and provides a fallback function.

The goal is to improve the user experience by showing a UI component in the shell application whenever a remote is unavailable, instead of just logging errors or displaying textual error messages.

---

Current Plugin Code

Here is the FederationRuntimePlugin I am using:

import { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';

export default function (): FederationRuntimePlugin {
  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 }) {
      console.error(id, 'offline');
      const pg = function () {
        console.error(id, 'offline', error);
        return getErrorMessage(id, error);
      };

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

This handles errors by logging the remote ID and error message and returning a fallback function with an error message. However, it does not display a UI in the shell.

Requirements
• When a remote module fails to load, the shell should display a user-friendly UI to inform the user about the issue.
• The UI should be customizable and can optionally include retry logic or error-specific details.
• The solution should integrate smoothly with the runtime plugin.

[ryok90]

Hey there!
I did something similar on Next.js + React.
Check to see if something like this would work for ya: