Handling async and mouse event errors using context

[HenryKenya]

Summary

I'm well aware that ErrorBoundary in React does not handle errors from async and mouse events. However, I'm looking for a way to centralise the logic for handling those types of errors by having the state managed by some sort of context and then having that error state propagated to the error boundary.

I have the following

"use client";

import { createContext, useContext, useState } from "react";
import type { ReactNode } from "react";

interface ErrorContextType {
  error: Error | null;
  setErrorHandler: (error: Error) => void;
  clearErrorHandler: () => void;
}

const ErrorContext = createContext<ErrorContextType | undefined>(undefined);

export const useError = (): ErrorContextType => {
  const context = useContext(ErrorContext);
  if (!context) {
    throw new Error("useError must be used within a ErrorProvider");
  }
  return context;
};
export const ErrorProvider = ({ children }: { children: ReactNode }) => {
  const [error, setError] = useState<Error | null>(null);

  const setErrorHandler = (error: Error) => setError(error);
  const clearErrorHandler = () => setError(null);
  
  return (
    <ErrorContext.Provider
      value={{ error, setErrorHandler, clearErrorHandler }}
    >
      {children}
    </ErrorContext.Provider>
  );
};

And then in the app folder, I have a new component called Providers that I use to set the above provider before injecting it into the root layout

export default function Providers({ children }: { children: any }) {
  return <ErrorProvider>{children}</ErrorProvider>;
}

And finally I have this component injected into the root layout. I have an error.tsx route within a nested child root. So the folder structure looks something like: app (my provider and root layout live here) -> child (error.tsx route lives here).

Now within the child, I use the setErrorHandler to set the error. I notice that even though the state is updated on the ErrorProvider, it's not caught by the ErrorBoundary. I was hoping someone might have an idea as to why this is the case.

Additional information

No response

Example

No response

[icyJoseph]

Hi,

I'm well aware that ErrorBoundary in React does not handle errors from async and mouse events.

But you can make it be aware of them...

Kent C Dodds goes in depth about it here: https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react#handle-all-errors

And although he is using the react-error-boundary library, you could still do that yourself. Though I'd recommend using that library, because it develops the Error Boundary API very well.

Anyway, you can see how they implemented their solution here: https://github.com/bvaughn/react-error-boundary/blob/master/src/useErrorBoundary.ts

[HenryKenya]

Thank @icyJoseph ...This works for my use case. Throwing the error was the missing part.

[HenryKenya]

Another curious question I have (related to error boundary but not necessarily the first one)...can someone access the children within Next13's error route?