Tracking JavaScript Errors with Sentry

In this blog I am going to tell you about a real-time errors tracking for JavaScript. Trying to catch errors in your front-end app can be tricky as the problems happen rarely or when you are not looking at the log traces.

On the market, there are many vendors selling you all-in-one solutions to track every possible error in real-time but recently I used one of the best tool which we can used to track the every JS errors at production label.

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.

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


  1. About Sentry
  2. Sign In and create a project
  3. Integrate Sentry in JavaScript
  4. First error tracking

1. What Is Sentry ?

Sentry is Open-source error tracking that helps developers to monitor, fix crashes in real time. Don’t forget about boosting the efficiency, improving user experience. Sentry has support for JavaScript, Node, Python, PHP, Ruby, Java and other programming languages.

Let’s get started

2. Sign In and create a project

Step 1: Open your Sentry Account. You might need to sign in. Go here

Step 2: Next create a project

Step 3: Choose your language from the list (‘we are going to pick JS’)

Step 4: Set your default alert settings (we are going to select first option)

Step 5: Give your project a name and click on create project button

3. Integrate Sentry in JavaScript

First of all, we should install npm package in your project. Sentry captures data by using an SDK within your application’s runtime.

We have two options to install the Sentry SDK using npm or yarn

# Using yarn
yarn add @sentry/browser @sentry/tracing
# Using npm
npm install --save @sentry/browser @sentry/tracing


Configuration should happen as early as possible in your application’s lifecycle.

Once this is done, Sentry’s JavaScript SDK captures all unhandled exceptions and transactions.

import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

dsn: "",
release: "my-project-name@2.3.12",
integrations: [new Integrations.BrowserTracing()],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,

How to find DSN property:

DSN property has in Settings -> Projects -> Client Keys(DSN). Or you can find Client Keys in search input.

4. First error tracking

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.

Whoo-hoo! 🎉 🎉 🎉

If you click title error, you’ll see a stack trace.


Today we’ve described at one of the ways to track the JavaScript errors. I hope you will start catching every error using Sentry.

Thank You




Software developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Day 6: Javascript

“this” in JavaScript

Set Expiration Date for PDF Document Using Java

Keep on Keeping on

Make your free Heroku app awake forever

Tutorial ESP32 Door Lock 3in1 Fingerprint Keypad 4x3 and RFID PN532

Tutorial ESP32 Door Lock 3in1 Fingerprint Keypad 4x3 and RFID PN532

Handsfree Websites

big, beautiful forest

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
Amit Joshi

Amit Joshi

Software developer

More from Medium

HTML Collections vs Node Lists in JavaScript

Generic Picture of JavaScript Code

Creating web apps: the tale of a millennial JS developper

How to do API Testing using Mocha and Chai for JavaScript Applications

How to set up prettier in less than 2 minutes