Issue: Custom UI for Offline Remote Plugin Persists Error State in Error Boundary

[basit-qayoom]

❓ Issue: Custom UI for Offline Remote Plugin Persists Error State in Error Boundary

Description

I'm using @module-federation/enhanced/runtime to handle remote modules in a federated setup. When a remote is offline, my offline-remote-plugin returns an error message. I also have an ErrorBoundary component to catch errors globally.

The issue is:

• When a remote is offline, I want to return a custom UI instead of just an error message.
• I modified the errorLoadRemote hook to return a component instead of a string.
• The custom UI renders correctly, but the ErrorBoundary also triggers.
• On route changes, the error state persists in the ErrorBoundary, requiring a full page refresh to reset the error state.

Code Implementation

Remote Plugin (offline-remote-plugin)

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

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

Error Boundary

import { Component, ReactNode } from 'react';

type Props = {
  children: ReactNode;
};

type State = {
  hasError: boolean;
};

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    // Update state to show fallback UI
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    // Log error details
    console.error('Error caught by ErrorBoundary:', error, info);
  }

  render() {
    if (this.state.hasError) {
      // Render fallback UI
      return <UI />;
    }

    return this.props.children;
  }
}

export { ErrorBoundary };

Current Behavior

• The custom UI from the offline remote plugin renders correctly.
• However, the ErrorBoundary is also triggered.
• The error state persists even after navigation, requiring a full page refresh to reset.

Expected Behavior

• The custom UI should replace the offline remote without triggering the ErrorBoundary.
• The error state should reset when the user navigates to a new route.

Possible Solutions Explored

1. Manually Resetting Error State on Route Change:

   • Using componentDidUpdate() in ErrorBoundary to reset state based on route changes.
   • This works but feels like a hack.

2. Conditionally Handling Errors in the Plugin:

   • Returning a functional component from errorLoadRemote instead of a simple error message.
   • But this still triggers the ErrorBoundary.

Question

How can I properly return a custom UI from the offline-remote-plugin without triggering the ErrorBoundary and ensure that errors reset properly on route changes?

Dependencies

"@module-federation/enhanced": "0.7.0",
"@module-federation/rsbuild-plugin": "0.7.0",
"@rsbuild/core": "1.1.0",
"@rsbuild/plugin-react": "1.0.6",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.1"