Handling Errors Globally In React

global_errors_in_react.md

Handling Global Errors In React

My Approach: React Context with a custom useError hook

Even though React provides Error Boundaries API, it is not a good candidate, nor is relevant for handling GraphQL query errors.

useError custom hook

import { useState, useCallback } from 'react';

export const useError = () => {
    /**
     * Reminder:
     * - multiple calls to useError() create multiple isolated states
     * 
     * Solution:
     * - use `useContext`, and pass an instance of useError via the Context object
     */
    const [errorCode, setErrorCode] = useState('');
    const [errorMessage, setErrorMessage] = useState('');

    const setError = useCallback(
        (err: any) => {
            if (!err) return;
            const { code, message } = err;
            setErrorCode(code);
            setErrorMessage(message);
        },
        [setErrorCode, setErrorMessage],
    );

    return { errorCode, errorMessage, setError };
};

Custom Context

export App = () => {
  const {errorCode, errorMessage, setError} = useError();
  
  return (
    <MyCustomContext.Provider 
      value={{ errorCode, errorMessage, setError }}
    >
      <NotificationBar severity="error" errorMesage={errorMessage} errorCode={errorCode} />
      <... />
    </MyCustomContext.Provider>
  );
}

Nice one.