Intro
This is really just for me to keep track of the gotchas i’ve encountered while integrating Sentry.io error reporting tool into a React application. Maybe some other people will find these useful.
Rendering Errors on unmounted components
The first issue I ran into was right at the very beginning of the integration. In the documentation they give you a suggested way to cause an intentional error which is a button with an unknown method in the click handler. This certainly caused the page to not render but I was unable to receive any error reports in the sentry.io dashboard.
The problem for me ended up being that the error was being thrown from a component that was unmounted on load. My app has authentication that runs, and then the rest of the applications components mount after that is done. Because I put the fatal test button in the part of the application that loads after authentication is complete, the component the button lived in was unmounted on load and something about that is causing the errors to not send. If the error comes from a component that is mounted then it worked just fine.
In theory this isn’t going to be an issue because if there is an error that causes the application to crash on load I will probably know about it, it’s the user generated errors that I am trying to monitor, and all those will be coming from mounted components. Hopefully.
Error Boundaries don’t catch errors in event handlers
I was using an error generated in a click event handler to test Sentry Error Boundaries and they weren’t catching the error.
It turns out this is because error boundaries do not catch errors inside event handlers.
