Gatsby: How to integrate gatsby.js with Bugsnag?

[rgesulfo]

Summary

I was wondering if anyone had some experience using Bugsnag (bugsnag.com) with Gatsby?
As I'm not too sure how to do it.

Thank you in advance for your help.

[lannonbr]

@rgesulfo It looks like they have support for React as described here: https://docs.bugsnag.com/platforms/javascript/react/

That said, they describe that you can call ReactDOM.render to wrap your app with a <ErrorBoundary> component. In the Gatsby world, we reccomend if you want to wrap the root element, use the wrapRootElement api described in the Gatsby Browser APIs

[DSchau]

@lannonbr @rgesulfo exactly! You'll want to use the APIs that Benjamin noted.

What would be _super cool_ is you first get this working with your own application, and once done, this can then be extracted into a standalone plugin so that anyone in the Gatsby ecosystem can get Bugsnag functionality working in their application super-easily!

The idea here is that you'll use gatsby-browser.js to import the necessary dependencies, and then wrap your root element if you want the additional functionality specific to React (which you probably do).

Hope this helps--going to close as answered, but please reply or re-open if we can help further. Thanks for using Gatsby!

[rgesulfo]

Thank you @lannonbr for your quick reply. It works.

Here is what I ended up doing for future reference:

_gatsby-browser.js_
```import React from 'react';
import { Provider } from 'react-redux';
import bugsnag from '@bugsnag/js';
import bugsnagReact from '@bugsnag/plugin-react';
import createStore from './src/state/createStore';

const bugsnagClient = bugsnag('BUGSNAG_ID');
bugsnagClient.use(bugsnagReact, React);
const ErrorBoundary = bugsnagClient.getPlugin('react');

const store = createStore();

const wrapRootElement = ({ element }) => (

{element}


);

export default wrapRootElement;```

[tbrannam]

I have attempted to write such a plugin - but it's somewhat tricky in that if the application's gatsby-browser implements wrapRootElement it will wrap the plugin's implementation

<!-- app's wrapRoot -->
<Provider store={store}>
    <!-- plugin's wrapRoot -->
    <ErrorBoundary>
      {element}
    </ErrorBoundary>
  </Provider>

I wonder if there's an opportunity to think about a hook especially for placing an ErrorBoundary at the top of the stack.

In the example above I think that errors that occur in the Provider would not be caught by the ErrorBoundary. Or am I missing a detail?

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!