Trying to catch errors in your front-end app or in your back-end server can be tricky as the problems happen rarely or when you are not looking at the log traces. But being able to catch every error is really valuable!
On the market, there are many vendors selling you all-in-one solutions to track every possible error in real-time. But most of them come with a locked codebase, stopping you from changing vendors or from adding a new language when you need it.
With Sentry, however, we are not locked in and we will get one of the best products ever, without any of the problems we discussed before.
Why Do I Need Sentry or Similar Services?
I’m going to cite the official Sentry statement, which fully represents why handling errors or issues in a modern way is critical.
Sentry empowers developers to quickly triage and resolve issues while reducing everything-is-on-fire stress, chaos, and potential financial loss, by providing cross-stack visibility and deep context about errors — From the Sentry about page.
The message is clear. When issues arise, you have to find and resolve them as quickly as possible, with Sentry you have the power to do that for every single issue.
- Sentry has been dramatically growing in the last year (2019). Looking at the trend of npm downloads, you can clearly see it’s dominating the competitors.
- Sentry creators offer a managed version of Sentry for free with a huge free plan and they provide all the documentation to let you install Sentry on your personal server, whenever you like.
- Add the Sentry SDK as a dependency using
npmto your project:
2. Go to Sentry.io to log in or register and add a new project with the specific programming language or framework of your project, in this case, React.
No projects? Create a project and choose the language or framework you are using.
3. Finally, you will copy the custom DSN URL from the code shown on the onboarding page. Here’s mine:
Then, you will connect the SDK to Sentry by adding a
Sentry.init command before the start of your React app. Remember to copy your Sentry DSN key from the web project.
Let’s throw a simple error and you will see the first issue appear inside the Sentry dashboard.
And, if you go to the Sentry page, you will see this nice error appear.
How To Link the Error to a User
Inside your application, you will have a class with the logic that manages the log-in state. There, you will need to add this code to link any error to the user that encountered it.
What Do Errors Look Like?
Sentry will automatically group any new error with any other related or identical error that multiple users might have.
It will try to match and merge them to let you see an overview of issues already grouped together, you won’t have to manually assign a specific error to a specific issue.
CodeSandbox Sentry + React
I hope you will start catching every error using Sentry or other services like BugSnag or RollBar and remember that errors are like Pokemon.
"You gotta catch ’em all!" — front-end engineer talking about browser issues after getting used to Sentry
Sentry awesome artworks from their blog! - https://sentry.io/