Skip to Main ContentSkip to Footer

Real-Time Error Reporting — Catch Every Bug or Error

September 30, 2019

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.

Some famous companies are BugSnag, RollBar, and Sentry.

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.

Sentry is 100% open-source!

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.

Why Sentry?

1 XQqDA5NXGj8s2y eVw8hZQ

1 tMjDgoIMyqJXu7FBixnI3Q

How To Install It in React or JavaScript

To use Sentry with your React or JavaScript application, you will need to use [@sentry/browser](https://www.npmjs.com/package/@sentry/browser) (Sentry’s browser JavaScript SDK).

  1. Add the Sentry SDK as a dependency using yarn or npm to 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.

1  nrlSou3CGTw2li2cYQT23g

No projects? Create a project and choose the language or framework you are using. 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:

1  v6r561I0CRQzf1  gjUMw3Q

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.

If you use React ≥16 and you want to use the new React error boundaries,I suggest you follow the docs.

Testing Sentry

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.

1  WYDiM0xcS45F8tJEAKqfaQ

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.

1  rYFBLf2p3ncIgISRANaxcw 1  UI3Yh8y3SYL  bKPczP71zQ

CodeSandbox Sentry + React

Conclusion

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/](https://sentry.io/) Sentry awesome artworks from their blog! - https://sentry.io/

References and Resources


Subscribe to my email list!

If you enjoy my work, you should definitely join my newsletter"Giorat Mails". It’s one email a week with everything interesting I’ve read or found, plus new articles and fresh tutorials.

Sign up for our newsletter