Question: how to integrate Bugsnag in a custom React ErrorBoundary?

I use custom error boundaries in my application. They are used in different parts of the page, have a beautiful look and a «retry» button. The proposed Bugsnag approach to wrap the whole application in the Bugsnag’s error boundary won’t work in my case because the errors are already caught by my error boundaries.

function MyApp() {
  return (
    <div>
      <MyErrorBoundary>
        Column 1
      </MyErrorBoundary>
      <MyErrorBoundary>
        Column 2
      </MyErrorBoundary>
    </div>
  );
}

const ErrorBoundary = bugsnagClient.getPlugin('react')

ReactDOM.render(
  <ErrorBoundary> {/* Will never catch */}
    <MyApp />
  </ErrorBoundary>,
  document.getElementById('app')
)

So the question is: what is the correct way to add a Bugsnag error reporting to my custom error boundary component?

class MyErrorBoundary extends React.PureComponent {
  state = {hasError: false};

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

  componentDidCatch(error, errorInfo) {
    // What to type here?
    // Maybe `bugsnagClient.notify(error)`? But how to send `errorInfo` too?
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 'My custom pretty error display with a retry button';
    }

    return this.props.children; 
  }

  retry() {
    this.setState({hasError: false});
  }
}

[Haraldson]

@bengourley Is exposing some kind of notifyReactError method something Bugsnag would be open to?

I feel like I’m losing control implementing this with a proxied, blackboxed Bugsnag-flavoured ErrorBoundary and would rather just do

componentDidCatch = (error, info) => notifyReactError(error, info)

in a vanilla one and have the component stack formatted for me, by Bugsnag, instead of relying on @Finesse’s hack above, even though it seems nice enough.

Reading the docs, it’s also quite unclear what arguments are provided to onError and which props are provided to FallbackComponent. Yes, it’s partially documented in this issue’s comments, but should be much easier to find.

Finally, and possibly the biggest reason for why I want to roll my own ErrorBoundary, is due to the timing of my Bugsnag.start() call being async, as it depends on network calls resolving, as that’s how my web client gets a hold of the API key from that environment’s variables. The official way of wiring this up just doesn’t make much sense to me.

[Finesse]

Here is a version of the report function for Bugsnag v7:

// @ts-ignore
import {formatComponentStack} from '@bugsnag/plugin-react';
import React from 'react';
import bugsnagClient from '../bugsnag'; // bugsnagClient is the object you created during the initialization of Bugsnag

function notifyReactError(error: Error, info: React.ErrorInfo) {
  const handledState = {severity: 'error', unhandled: true, severityReason: {type: 'unhandledException'}};
  const event = bugsnagClient.Event.create(error, true, handledState, 'Error boundary', 1);
  if (info && info.componentStack) {
    info.componentStack = formatComponentStack(info.componentStack);
  }
  event.addMetadata('react', info);
  bugsnagClient._notify(event);
}