This app shows how Sentry's 'React Error Boundary' provides a fallback UI when the react component tree crashes, and provides "component stack" information on the error that gets sent up to Sentry. See App.js. Example from docs.sentry.io
The "component stack" spoken of here is viewable on the Sentry Issue like this:
(this error was from a lifecycle callback error'ing)
npm install
npm run build
./node_modules/serve/bin/serve.js -s build
The component stack info will be minified, because you have not uploaded source maps. Run make
to take care of all run instructions and source map uploading. If it's still minified, then try causing a different kind of React error by uncommenting the code in componentDidMount in App.js and run npm start
instead.
If you'd like to use npm start
instead, then uncomment the code in componentDidMount in App.js, and this will cause an error and the Sentry Issue will have the Component Stack shown. The fallback UI component will not render in development mode (npm start).
If you use npm run build but don't upload sourcemaps, then your Component Stack info will be minified just like your source bundle code. This is a common problem that customers may encounter:
The component stack info is ultimately just a string, so hard to parse it against the source map, this is why it's not very pretty looking. facebook/create-react-app#6667
https://blog.sentry.io/2017/09/28/react-16-error-boundaries