Bugsnag-js: TypeError: Cannot read property 'createErrorBoundary' of undefined

[duzliang]

Following the Bugsnag Docs to config the project and run got this error from:
const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React);

• react 16.11.0
• react-native 0.62.2
• @bugsnag/react-native 7.5.0

[johnkiely1]

Hi @duzliang ,

Could you confirm what error you are seeing? Also could you share you Bugsnag configuration code for both your JS and native layers. Feel free to email [email protected] if you don't want to share this information publicly.

Thanks

[duzliang]

@johnkiely1 Thank you for viewing this issue:

Both the Android and iOS configuration are set up step by step by the Docs

Below is a simple Javascript code snippets:

1. App.js

import Bugsnag from '@bugsnag/react-native';

import ErrorView from './containers/ErrorView';

const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React);

export default class AppRepair extends React.Component {
  constructor(props) {
    Bugsnag.start();
  }

 render() {
    return (
      <ErrorBoundary FallbackComponent={ErrorView}>
        <Provider store={store}>
          <Routes handleExit={this.handleExit} />
        </Provider>
      </ErrorBoundary>
    );
  }
}

1. index.js

import { AppRegistry } from 'react-native';
import App from './src/App.js';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

when running the App, get the error:

TypeError: Cannot read property 'createErrorBoundary' of undefined 

[kennethjiang]

I'm having the same problem here.

• react 16.13.1
• react-native 0.63.2
• @bugsnag/react-native 7.5.1

[mattdyoung]

@duzliang
The issue is that you're calling Bugsnag.getPlugin('react') before you call Bugsnag.start().

Bugsnag.start() must be called before any other method so you'll need to move it out of the constructor of your component.

[duzliang]

Move it out of the constructor also get the Error while open the Debug mode of React Native Debug Menu
When close the Debug mode this error disappear

import Bugsnag from '@bugsnag/react-native';

import ErrorView from './containers/ErrorView';

Bugsnag.start();

const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React);

export default class AppRepair extends React.Component {
  constructor(props) {
  }

 render() {
    return (
      <ErrorBoundary FallbackComponent={ErrorView}>
        <Provider store={store}>
          <Routes handleExit={this.handleExit} />
        </Provider>
      </ErrorBoundary>
    );
  }
}

[mattdyoung]

That does look like a bug, although one that would only have an impact when the debugger is attached.

We'll look into whether this can be resolved in a future release.

[adkenyon]

Is there a workaround for this? Being unable to attach a debugger makes getPlugin unusable.

I'm using the reactNavigation, being core app functionality I'm not sure there's a way to lazily load this.

Any recommendations on a fix? happy to help if I can get pointed in the right direction.

[xander-jones]

Hey @adkenyon, we're looking into a fix for this notifier side. But, in the meantime you can guard against this by checking whether the getPlugin() call returns undefined, and in these cases point your application to a no-op ErrorBoundary, for example:

class NoopErrorBoundary extends React.Component {
    // define your Noop Error Boundary here
}

var ErrorBoundary;
if (typeof Bugsnag.getPlugin('react') === 'undefined') {
    ErrorBoundary = NoopErrorBoundary;
} else {
    ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React);
}

// use the ErrorBoundary as normal

When running without the debugger, Bugsnag will continue as normal with the Bugsnag error boundary.

[adkenyon]

@xander-jones thank you for the workaround!