CODEWITHSUNDEEP
reactjsreact-error-boundary
Brennan Mann
Brennan Mann

Reputation: 1537

React Error Boundary Intermittently masking error with generic error message

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

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>;
  }
}

Upvotes: 6

Views: 1093

Answers (2)

Pradnya Kulkarni
Pradnya Kulkarni

Reputation: 114

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.

Upvotes: 2

Kaffekoppen
Kaffekoppen

Reputation: 432

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?

Upvotes: 1

Related Questions