How to setup tracking and monitoring for JavaScript errors in less than 5 minutes

Photo by Caspar Camille Rubin on Unsplash

So, you’re writing an application…

Hopefully, you have some unit tests, e2e tests and a level of confidence that your application is ready for customers. ✅

You go live... 🎉

Then you might start to think….

  • “I wonder how our application is doing?”
  • “I wonder how customers are using our application?”
  • “I wonder if they are experiencing any problems?”

Without the correct level of monitoring in place, these questions are hard to answer.

The combination of possible devices and browsers that our customers can use is HUGE. It’s impossible to make sure we check and test every permutation.

I have recently been exploring more ways to answer some of these questions and started to explore a tool called Sentry.

What is Sentry.io

Quick Disclaimer: I do not work for Sentry or have been asked to write this, It's just a tool I found have useful and wanted to share my experience with you 👍

Taken straight from their website….

“Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience.”.

One reason why Sentry appeals so much to me is the fact it is open source and can be free to use.

After exploring Sentry for a few hours, I had something working and reporting JavaScript errors from my React application.

I wanted to try and lower the barrier to entry and want to share with you have you can get something up and running in 5 minutes 🕐.

So let's get started.

Getting Started

In this example, we will be using React and Sentry.

Step 1: Clone this repo: https://github.com/boyney123/sentry-react-example

Step 2: Once cloned, go into the folder and run sh init.shWhen you are prompted setup a username, email, and password (seen below).

Example of setting up a user

Step 3: Once complete then run sh start.sh and go to localhost:9000. You will see the sentry.io login page. Login using the details you set in Step 2.

Login

Step 4: Once you log in successfully, you will be shown this modal (only on the first login). Next, enter some details in the modal (example below)

Step 5: You will now be shown a dashboard. Next lets set up a React project in Sentry. Click Add new -> Project -> React Application -> Create Project

Add new Project

Step 6: Configure the React application. Copy the url from the Configuring the Client section. (In the React example cloned from the repo, most things are done for you, you just need to copy and set the url into the component, which we will see in the next step)

Copy the highlighted area.

Step 7: Copy the URL into the <Sentry url={url} /> component in sentry-react-example/src/App.js.

For example your App.js the file should look like something below:

Once that is done, click the button Got it! Take me to the Issue Stream

Step 8: Go to http://localhost:3000 and after 5 seconds the ErrorExample component will throw an Error which you should then see in the Sentry dashboard.

Example of error coming in!

That's it! 🎉

You now have Sentry running locally listening for errors from your React application.

Summary

This is a very basic example of getting set up with React and Sentry but there are loads more you can do. Go over to the Sentry docs to get started and start exploring.

Here are some features that instantly stick out to me:

  • Assigning errors to users
  • Source map integration with errors
  • Some great plugins. For example Integration with Slack, GitHub, Jira & Pagerduty
  • Its open source 🎉

If you want something hosted you can easily do this using a cheap $10 box from Digital Ocean. If you create a box with Docker installed, you can follow this guide to get something up and running.

I hope you have found this quick tutorial helpful, I’m interested to hear how you track errors in your applications or if you have any tips & tricks, please comment below.

If you found this article useful, feel free to 👍 and spread the 💚

Music Loving 🎹, Father 👨‍👩‍👦‍👦, In with ❤️ JavaScript 🐱.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store