Gatsby: How to integrate gatsby.js with Sentry.io?

[calpa]

I have tried to install sentry.io with raven.js in two ways, but none of them seems to catch the errors correctly...

1. Add the raven.js script tag into page

<script src="https://cdn.ravenjs.com/3.20.1/raven.min.js" crossorigin="anonymous"></script>

1. Use raven-js via npm

I wonder what kinds of error catching methods or utilities I can use in gatsby.js.

I can report the error manually using Raven.captureException(e), which is stated at https://docs.sentry.io/clients/javascript/usage/#raven-js-reporting-errors

The official documentation is available at https://docs.sentry.io/clients/javascript/integrations/react/

[abumalick]

you can could instegrate an error boundary in src/HTML.js and log the error to sentry there.

[abumalick]

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#introducing-error-boundaries

[calcsam]

Take a look into how Gatsby plugins for Google Analytics and Intercom.io work. You'll probably want to modify the onRenderBody hook of gatsby-ssr.js and cut-and-paste the JS in your raven.min.js file there so it is called before the page loads.

Eg, https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js

[octalmage]

I actually made a plugin for this, you can find it here:

https://www.npmjs.com/package/gatsby-plugin-sentry

[KyleAMathews]

@octalmage awesome thanks!