You should totally use React@16+ with error boundaries: https://blog.sentry.io/2017/09/28/react-16-error-boundaries
A React Transform that catches errors inside React's lifecycle methods and reports to sentry.
First, install the Babel plugin:
npm install --save-dev babel-plugin-react-transform
Then, install the transform:
npm install --save-dev react-transform-sentry
Then, make sure to setup sentry in your web page:
<script src="https://cdn.ravenjs.com/1.3.0/jquery,native/raven.min.js"></script>
<script>Raven.config('your public dsn').install();</script>
Now edit your .babelrc
to include extra.babel-plugin-react-transform
.
It must be an array of the transforms you want to use:
{
"env": {
"production": { //only applies when NODE_ENV is set to 'production'
"plugins": [
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-sentry",
"imports": [
"react"
]
}
]
}
]
]
}
}
}
It is up to you to ensure that the transform is only enabled when you compile the app in production mode. The easiest way to do this is to put React Transform configuration inside env.production
in .babelrc
and ensure you’re calling babel
with NODE_ENV=production
. See babelrc documentation for more details about using env
option.