GlobalErrorHandler: Catch the errors that falls through ErrorBoundary's fingers!

ErrorBoundary is a magnificent tool to capture errors thrown from React components. You can provide custom error messages according to the nature and placement of the error itself. But not all errors thrown are handled by the ErrorBoundary! What do you do with those?

When considering both async errors and errors throw from outside of React, the ErrorBoundary fall short. To mitigate this, I have in my applications created what I call an GlobalErrorHandler. A functional component that simply A) Pop up an error dialog, telling the user that something went wrong, B) Logs the error to the server, so we can investigate and find solutions.

The idea is simple. We want one GlobalErrorHandler in the root of our application. This handler should only handle errors not caught by the ErrorBoundary. What more, it should be easily dismissed by the user, and we should assume that the application still is usable (to some degree).

So the strategy is this: The GlobalErrorHandler doesn't do anything at all, except rendering its children (i.e. the rest of the application), by default. But, it sets up two event listeners, listening for all error and unhandledrejection events in the browser. Then it examines the error, and see if it has already been handled by any ErrorBoundaries. Finally, if that isn't the case, it pops up a Dialog, telling the user that something went wrong somewhere, and lets the user dismiss the dialog and continue using the application.

Has the error already been handled

Before pestering end users with unnecessary dialogs ON TOP OF the handling done by ErrorBoundary, we first have to start with asking the error: Have you been handled already? My solution to this, is to introduce a new field on the error-object isHandledByBoundary. This is set to true within ErrorBoundary:

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    (error as any).isHandledByBoundary = true;
    ....
  }

With this in place in all ErrorBoundary-components (and other machinery that handles uncaught errors), we are ready to start defining our GlobalErrorHandler.

The bare skeleton

Then we can build the skeleton of our GlobalErrorHandler. It straightforwardly render its children, and it also renders an "ErrorDialog" defined elsewhere. (If you want to share this component across applications, the ErrorDialog could be a prop instead.)

import { useState, useEffect, ReactNode } from 'react';
import { ErrorDialog } from '../Components/ErrorDialog';

type Props = {
  children: ReactNode;
};

export function GlobalErrorHandler({ children }: Props) {
  const [error, setError] = useState<Error | string | null>(null);
  const [isDialogOpen, setDialogOpen] = useState(false);

  useEffect(() => {
    ....
  }, []);

  function handleCloseDialog() {
    setDialogOpen(false);
    setError(null);
  }

  return (
    <>
      {children}

      {isDialogOpen && error && (
        <ErrorDialog
          actionName="Unhandled error"
          error={error}
          loggFeilmelding={true}
          onClose={handleCloseDialog}
        />
      )}
    </>
  );
}

The only thing we are lacking now, are the error handling itself, defined within useEffect.

Handling the errors

All the code in this section should be located within the useEffect function!

First we define handleWindowError. This is to be delivered to the error event-handler on the window-object. Nothing mysterious here, but witness that the error event also contains information about source, line number and col number. Which might be valuable to collect.

Usually this information is also found within the error object, but I need to make more empirical investigations into this. Perhaps we always should keep the line and col numbers as reported by the error-event? In that case, we could also have a state for this within GlobalErrorHandler (and make sure this is sent when logging the error).

   function handleWindowError(
      message: string | Event,
      source?: string,
      lineno?: number,
      colno?: number,
      error?: Error
    ) {
      if (error && (error as any).isHandledByBoundary) {
        return true;
      }

      const errorMessage = error
        ? error
        : `Error: ${message} at ${source}:${lineno}:${colno}`;
      setError(errorMessage);
      setDialogOpen(true);
      return true;
    }

We will also define the handleUnhandledRejection handler. This is for errors that are raised within promises, but where we forgot to write a .catch()-clause.

    function handleUnhandledRejection(event: PromiseRejectionEvent) {
      setError(`Unhandled promise rejection: ${event.reason}`);
      setDialogOpen(true);
    }

Then all we need to do, is to setup the listeners, and remove the listeners whenever GlobalErrorHandler is not rendered anymore:

    window.addEventListener('error', handleWindowError);
    window.addEventListener('unhandledrejection', handleUnhandledRejection);

    return () => {
      window.removeEventListener('error', handleWindowError);
      window.removeEventListener(
        'unhandledrejection',
        handleUnhandledRejection
      );
    };

The return statements is, of course, where we return out of the function we are feeding useEffect. This ensures that we are starting to listen on events and handle them when the component renders, and stop when the component is not rendered any more.

Thus we have a GlobalEventHandler, to handle those pesky errors in our React-application that are either thrown from asynchronous sources, or thrown from outside of the React components!