Next-Level JavaScript Error Tracking with Sentry

Rate this content
Bookmark

Discover advanced techniques to track and resolve errors in JavaScript applications, using Sentry as a powerful ally. This session will explore the art of pinpointing issues before they hit users, streamlining your error-handling process, and enhancing application performance.

Ebenezer Don
Ebenezer Don
23 min
15 Feb, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

We're going to be talking about next level JavaScript error tracking with Sentry. Error tracking is the process of identifying, recording, and managing errors in a web application. Traditional JavaScript error tracking methods have disadvantages and lack context about the device and user. You can automate error tracking with Sentry, an open source error tracking tool that helps developers monitor and fix crashes in real time. Setting up Sentry is simple using the Sentry SDK and configuring with the DSN.

Available in Español

1. Introduction to Error Tracking

Short description:

We're going to be talking about next level JavaScript error tracking with Sentry. Error tracking is the process of identifying, recording, and managing errors in a web application. It involves discovering, diagnosing, and fixing bugs.

Hey everyone, it's so good to join you here today. We're going to be talking about next level JavaScript error tracking with Sentry. My name is Ebenezer Dunn and I'm a developer advocate at CodeGiant, a DevSecOps and an integrated development platform with built in best practices that helps your team deliver faster and more securely.

We're talking about our tracking, but what even is error tracking? And by the way, this is the third time I'm doing a recording of this particular talk for this particular conference, because I've tried the first time I tried after recording. I was like, yeah, I'm done. And I discovered my camera froze while recording. So second time the laptop and everything just went off while recording. And this is the third time and here's to hoping that everything goes smoothly this time. And I'm going to be trying to smile. So kind of frustrated.

What if it is error tracking? Now, it's a process of identifying, recording and managing errors that occur in a web application. So in our case, web application because we're using JavaScript for the web in this particular instance. But error tracking basically identify, recording and managing errors that occur in your application. So this is a process of error tracking. First of all, the discovery has to be there. So you have to discover the error and then you diagnose the error. So you don't just discover the error, like, oh, we found out that there was an error and everyone sits down. No, you have to diagnose the error. And when you diagnose the error, you know, like finding out what's actually causing the error. Why? Why is this error? What is this error? Where is this error? You know, diagnose the error and you don't clap and say, OK, now we discover the error. We know like everything about this error and let's go home. No, you have to fix the bugs. So you find the bugs. You fix the bugs. Is that important? That parts of the error tracking process. You don't just discover that nonsense. You go sit down. So you have to fix the bugs.

Now, components of error tracking. So this is like just a more broken down version of what we've already talked about.

2. Error Tracking Workflow

Short description:

Error detection, logging, notification, analysis, and resolution are essential components of the error tracking process. By tracking errors, you can reduce downtime and enhance user experience.

So the error detection process, same as error discovery, then you have to log the error. This is important. You don't just discover the error or detect the error and you're like, oh, yeah, we discover that error. No, it's important that you log this error. It's important that you store this error in a database or like in CodeGiant, for example, we use Clickhouse for logging. I'm not sure what Sentry uses, but like in the Sentry platform also, this is logged. So you don't just discover the error and then you throw it away.

So you have to log the error and you know, you have to you need a notification system so that you're not kept in the dark. Like you don't just stop at detecting that login. Sorry about that. You don't just stop at detecting and logging the error. So you have to be notified about this error to oh, there's an error. Yep. You need to be notified that there was an error. So we said that we're going to do with Sentry, you know, that comes with a notification system. So once a user encounters an error or once you encounter an error, once there's an error in your application, you get notified and that comes with all the error information. And then next after you're notified, you check out the error and then you analyze the error. You know, you find out what's causing the error, where, you know, and how and why. You know, so every all the details about the error is going to come with a Sentry configuration where we do that now. When there's an error, it comes with like browser information, user device information, IP address, everything you need to resolve. To analyze the error. And then again, you don't clap and go home. You have to resolve the error.

So in summary, you find a box, you fix a box. It's important to have error resolution as part of your error tracking process. So what are the benefits of error tracking? It reduces downtime. So if you're not tracking errors, you know when something is wrong, you know that your users are struggling, you know that your web application is struggling or your JavaScript application, you will know you're struggling. So and if you don't know it's going to keep happening and you're going to keep having downtime. So if you're tracking the errors, you can, you know, get information about this error, get to know about it, resolve the error and reduce downtime. It enhances user experience.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Mastering Error Handling Node.js
Node Congress 2022Node Congress 2022
21 min
Mastering Error Handling Node.js
Errors happen to every programmer. Devs have different choices: suppress it, notify the user, report to the team, ignore it or write code to handle the error.
In this talk, you will learn all the important aspects of the Node.js error system, the types of errors, different ways to deliver an error, and patterns to improve error handling - with examples!
How Grafana Uses React to Power the World of Observability
React Summit 2023React Summit 2023
7 min
How Grafana Uses React to Power the World of Observability
Why does Grafana use React for its frontend?
How we leverage React’s features at Grafana
What are some pain points we have ran into with using React at Grafana
What are lessons learned from adopting React for the past 5+ years?
Track Slowdowns and Crashes in your React apps
React Advanced Conference 2021React Advanced Conference 2021
8 min
Track Slowdowns and Crashes in your React apps
In this lightning talk, you will see:The lack of visibility on React applicationsHow to install the Sentry React SDKHow Sentry can help you identify errors and slowdowns within your React App so you can see faster, solve quicker and continuously learn from your applications
Monitoring Errors and Slowdowns with a JS Frontend and Node Backend
Node Congress 2022Node Congress 2022
8 min
Monitoring Errors and Slowdowns with a JS Frontend and Node Backend
We've got a JavaScript frontend hitting a Node (Express.js) backend. We'll go through how to know which party is responsible for which error, what the impact is, and all the context needed to solve it.
Identify Issues and Prevent Slowdowns in your Vue.JS Apps
Vue.js London Live 2021Vue.js London Live 2021
8 min
Identify Issues and Prevent Slowdowns in your Vue.JS Apps
In this lightning talk, you will see: 1. The lack of visibility on Vue.js applications. 2. How to install the Sentry Vue.js SDK. 3. How you can use Sentry to identify errors and slowdowns within your Vue.js App.
Monitoring Errors and Slowdowns Across JS Applications
DevOps.js Conf 2022DevOps.js Conf 2022
8 min
Monitoring Errors and Slowdowns Across JS Applications
Learn about tools to trace frontend to backend data and increase visibility on errors and performance. We'll go through how to know which teams are responsible for which error, what the impact is, and all the context needed to solve it.

Workshops on related topic

How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Monitoring 101 for React Developers
React Advanced Conference 2023React Advanced Conference 2023
112 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.
Live Coding Workshop to Setup Rollbar Error Monitoring
TypeScript Congress 2023TypeScript Congress 2023
48 min
Live Coding Workshop to Setup Rollbar Error Monitoring
WorkshopFree
Nico Krüger
Nico Krüger
During this session you will learn how to create a new Rollbar account and integrate the Rollbar SDK with your application to monitor errors in real-time and respond and fix those errors. We will also cover how to customize payload data sent to Rollbar to extend your monitoring capabilities.

Agenda:- Create a Rollbar Account (Free Account)- Integrate your application with the Rollbar SDK- Send handled and unhandled errors to Rollbar- Add Custom payload data to your configuration.
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
JSNation 2023JSNation 2023
44 min
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
WorkshopFree
Ryan Albrecht
Ryan Albrecht
You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.
Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).
Building a Sentry: 7 years of open-source React
React Advanced Conference 2021React Advanced Conference 2021
69 min
Building a Sentry: 7 years of open-source React
Workshop
Evan Purkhiser
David Wang
2 authors
Join Sentry’s Evan Purkhiser and David Wang as they walk through Sentry’s 230k LoC Typescript/React codebase. They’ll tell war stories of the good, the bad, and the ugly. Gaze in wonder at their modern usage of Typescript, react hooks, and styled components. Recoil in disgust at their legacy Reflux usage and perplexing Webpack configuration. Step away from the workshop with a working knowledge of techniques to keep a large-scale frontend codebase modern and maintainable.