React Error Boundary Intermittently masking error with generic error message

Question

We are testing React error boundaries within our application. Currently, we are seeing the React error boundary intermittently mask the error with the following:

"An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue. at Object.invokeGuardedCallbackImpl"

The error boundary does successfully capture the stack trace; however, without the error message, we only have half of the picture of what's failing.

Has anyone come across this behavior before? Or are there any suggestions on capturing the full error with React's Error Boundary?

Instead of the error message above, we are expecting something like "Cannot read properties of undefined (reading 'toString')" for the error message.

Environment

• We are using React 16.12.0.
• We are testing with a production build.

Sample Code

export class ReactErrorBoundary extends React.Component<
  {},
  ReactErrorBoundaryState
> {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static contextType = CpqTelemetryContext;

  static getDerivedStateFromError(error: TypeError): ReactErrorBoundaryState {
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo): void {
    const telemetryProvider: ILoggerService = this.context;
    telemetryProvider.logException("App.ErrorBoundary", error, errorInfo);
  }

  render(): JSX.Element {
    if (this.state.hasError) {
      return (
        <div style={{ margin: "5%", maxWidth: "900px" }}>
          <h1>
            Something went wrong in the react project..
          </h1>
          {/* Likely want to add a support email here. */}
          <div>
            <b>Message: </b>
            <p>{this.state.error && this.state.error.message}</p>
          </div>
          <div>
            <b>Stack: </b>
            <p>{this.state.error && this.state.error.stack}</p>
          </div>
        </div>
      );
    }

    return <div>{this.props.children}</div>;
  }
}

Corticosteroid

Answer 1

Exact behaviour i have seen in my app. Note: Error boundaries do not catch errors for:

Event handlers (learn more) Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) Server side rendering Errors thrown in the error boundary itself (rather than its children)

Most of the work we do in event handler or in our async code so as given in documentation it will not be captured. Best solution is use try catch for above use cases and console error in catch to get more info.or may be you can throw Error(your custom exception) and that will get capture in your error boundary which can be captured.

Odyl

Thanks for the response @Pradnya Kulkarni . Appreciate the tip on the event handlers and async processing. – Corticosteroid

Answer 2

Has anyone come across this behavior before? Or are there any suggestions on capturing the full error with React's Error Boundary?

I've never come across this behaviour using react-error-boundary, and I see that their implementation of the error boundary differs from the sample code you provided.

Maybe you can try react-error-boundary, and if it works, experiment with what they do differently in their implementation?

Deputize

Thanks @Deputize for sharing this We are unable to upgrade our current project to use the react-error-boundary package. We will review their open-source repository to see how they are going about it. Much appreciated! – Corticosteroid