Next-Level JavaScript Error Tracking with Sentry

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.

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.

Also, if users are struggling and you don't know, again, you know, most times they won't even bother telling you. Then first thing the user will do is go find alternatives unless their life depends on your application. If I go to application and I'm struggling with an error, I just go look for an alternative, you know, that does the same thing. Only if I can find an alternative and yours is my only hope or maybe I've already paid you and I need you to, you know, actually like give me my service that I paid for, then the user would reach out to you and say, hey, I'm encountering this error. So you see if you're not error tracking, you're going to lose a lot of users because many people would even bother telling you to just go look for something else. And, you know, so we're tracking areas where we need your users are happy, you're happy, everyone is happy and assist user experience provides insights into application performance. Yeah. So if you're not tracking the errors, you wouldn't know how your application is performing. I will also cover. Hopefully we should be able to with the time we have application, how you can track transactions, the performance of application and all of that. But if you're not tracking errors in your application, you would know how your application is performing and it also helps prioritize development efforts. I'm sorry, I'm rushing this because I'm looking at the time and it helps prioritize development efforts so that your team knows what to work on and what to push about to the next point.

So next. Yeah. So there's a traditional JavaScript error tracking method. So even if you've not worked with Sentry before or a platform like Sentry, many of us or all of us should have done JavaScript error tracking. There's the console.log statement. You know, that's one way to track the errors. It has its disadvantages, which means that you're the only one who knows that you have you did a console.log statement and you're the only one who's going to see it. And it's only doing your own experience using the application. But this is sometimes used in development instead of production. I mean, that's what should be recommended anyway, if you're going to use console.log, but has lots of disadvantages. And then there's the alerts, which is not so cool. You know, you just show the window that use the window, the alert to pop up an error. You know, not really cool and see and you know, you have all that stuff stopping every other thing that the user is working on. But, you know, that's one way to do error tracking in a traditional way.

Displaying the full error message on screen. So this was not like cool at all and I've used some applications or web applications where like you just did a full error message on the screen. Like it's just some gibberish that the user doesn't understand. And then there's a message that says, take this error message and go send it to the application developer. So if you're doing proper error tracking, you would even need to do that. Be sending your users an error. And when there's an error that occurs, you're going to see it and you're going to see what the user was doing. So, you know, before they, you know, go to that to get to that error, you're going to see details about the device. You're not going to be asking the user what device are you using and what browser are you using? Have you made an update? You're going to see all of that. So you have all the information. You know, you don't need to do stuff like sending the user gibberish.

And yeah. So limitations of traditional error tracking. You lack context. So you don't know anything about the device. You don't know anything about the user.

You don't know anything about their actions before the error. You know, it's manual. It's reactive. So everything has to be manual. And you always react. And, you know, if you do proper implementation with Sandro, for example, you can automate things.

And then there's in with the traditional tracking, there's inefficiency in data aggregation. So you're not really logging. You're not doing it right. You know, storing that information so that you can see everything and you can be able to is to even track your application performance or know what is happening in your application.

Now, to set up Sentry in a JavaScript project, you use the Sentry as an SDK. That makes it just really easy and you configure with the DSS. It's really simple. I'm going to show you right now, like we're going to do that together. So Sentry SDK right there you just hit npm install, type npm install and you get it into your application. Then you get your DSN data source name and that's it. You start tracking your error. So it's as simple as that.

This is Sentry, it's an open source error tracking tool that helps developers monitor and fix crashes in real time. We're going to see that's in action. I'm going to be demoing this to you through with an application.

So what is Sentry? Sentry is an open source error tracking tool that helps developers monitor and fix crashes in real time. Yeah. So what do I just call that? What are that is that by the way? Because I like try to rush before any other thing goes wrong with this recording. But this is Sentry, it's an open source error tracking tool that helps developers monitor and fix crashes in real time. We're going to see that's in action. I'm going to be demoing this to you through with an application.

To set up Sentry in a JavaScript project, you use the Sentry as an SDK. That makes it just really easy and you configure with the DSS. It's really simple. I'm going to show you right now, like we're going to do that together. So Sentry SDK right there you just hit npm install, type npm install and you get it into your application. Then you get your DSN data source name and that's it. You start tracking your error. So it's as simple as that. OK, let's stay here and then let's go over to the browser. So this is Sentry.io.

This new account comes with 14 day trial. And after the trial, you still get access to Sentry but just with limited features. But everything we are doing today is in the free accounts, the free Sentry account. And I'm also going to show you the good thing about Sentry is that it's open source. So you don't even need to use the Sentry.io platform. If you want, you can use a platform like CodeGiant, which I'm going to show you. And all you need to do, all you really need is that DSN, which I'm going to show you how to get. So that's really one sweet thing about Sentry is that it's open source. But this Sentry platform is also great.

So you click create a project and choose which type of project you want to create. Let's search for React right here and then click React with JavaScript. You set your alert frequency, alert me on every new issue or when there are more than 10 occurrences or you know, you create an alert later. So whichever way you want to do it. So that's the notification part of error tracking. And then name your project and assign it. So JavaScript reacts right here. Same CodeGiant. So I just created the account and then it asks for a company and I have CodeGiant right there. So let's create the project. And so next thing you have the so it's just straightforward from here.

You run npm installs, dash dash save our Sentry slash React. And let's configure the SDK right here. So I'm going to show you my code base. So this is my React application. This application right now is just a simple market list app. And this is the code base. So what you're seeing right here is what I have in the index of JS file of my React application. So what we really need is we installed Sentry npm install. And then you have our Sentry slash React. And we import it online three right here.

Imports that Sentry from our Sentry slash React and online seven. So this is what we actually need. Sentry dot init initialize and then eight line eight right here is the DSN. So this is what's important right now. This DSN and this is a DSN for my setup with CodeGiant. But what I'm going to do is come here and take this DSN from this new project I created in Sentry. And I'm going to replace that here on line eight. So we have the setup. This is what's important right here. The DSN and then we have the configuration from line 10 to line 22 here.

So once we have that, the next thing we have right here is this. So what I'm going to do, what we did next online 34 from Sentry, we have Sentry dot error boundary. And then we wrap our application components in the Sentry dot error boundary. So this is going to help catch like defaults error. So let me show you an example right now. If you go to the error test component I created and so these are different types of I'm going to leave a link to this repository or you go to my GitHub. I'm going to show you my give you my GitHub link at the end of this talk. And you just search for market list app.

You're going to see this repository with the code base. So these are different types of errors I created. I don't think we can cover everything because of time. We have just very little time left. But this is one error, for example, on hundred error. This is captured by Sentry dot error boundary in index or GS. This boundary automatically catches on hundred errors thrown in the React component tree. So I left comments in this code so that you can check it out and you just read and understand it. So this boundary automatically captures on hundred errors to react's component tree. Sorry about that. So let's try this. For example, I have already imported all of this different error components in the app GS file.

So right here, the app GS file. All I need to do is uncomment a sinc error components comments. Rather, I think our company does one of the errors I tested out. And then let's try this on hundred errors. What we're going to do is have this. So it's important right here on line four. And then I have it online. Seventy four. Let's save this. And where's our browser? We go back to our browser. So this is the React app and reloads. So look at that. We have this error right here. Error test error from error test components. Next, we go back to sentry and let's click take me to issues. So or you can just click issues right here. And it says we couldn't find any errors that match a few. I wonder why. Let's reload and see. It will get the same thing. Yep. So we have that. So sometimes you just need to reload. I think some things are not instance in this sentry platform. But look at that. So this is the error message. So remember, all we need that for to get this to our sentry accounts is this DSN in the index GS file. So this DSN, we saw that. So this determines where your error information is going to. So this one is the one that came with our sentry project.

We have the sentry project and look at the error message. So you click the error message right here. Click the arrow right here and then on hundred error test error from error component. And this comes with all the information for the user. So these also you can configure when you're setting up the way in your code rather you can configure what you want to get from the error from the error information or error report.

So here we have the event ID and then tag. So this tells me the IP address. You can't really use my IP address to do anything because it changes every ten minutes or so. So this is the Chrome version and this is the I'm using macOS. So this you show that I'm using the browser Chrome. I'm using macOS X. And this is the error with more information and browser type transaction. Because if you are a right, your localhost three thousand shows environmental production, browser name and all of that. So I think there's one with condescending. We're going to go through that one quickly. So you see that we can have error with user context. Also, let's go back to the codebase.

This is basically that with this, you know, like, look at the error information right here with this, you know exactly what to do and how to resolve the error. So but let's go back to the codebase. We've run out of time. Actually, I think we have just about four minutes left and error test. So I have an error example with user context so that if there's a user and you want to know you want to get context of which the particular user that's encountering the error, you can do that. So like 96 right here, I have sentry that set user and then, you know, the user ID, email user, there's a command and the username. So once you have these right here, your error, the error that comes everywhere, that's you know, that sentry sends or the application sends over to the DSN. The sentry comes with this user context right here. So like 99 here are showing this error. And all we need to do is so let's go back to the app.js file. And this is the user context component. And let's remove the unhandled error right here. So let's save this.

Go back to our browser and reload and test user context, check sentry for details. So if we go back to sentry and click issues, we should see the new error information. We should see it, actually. So I think we'll need to reload again. It's a reload button, essentially. No. So we need to reload that, but that should be here already. So don't don't fret. There's everything is all right. And still not here. Why is that? Why is that? I don't know. But we've run out of time. Still not here. That's error from error components, and I don't know why. But I'm going to try to it just works. So I do exactly know why. But we've run out of time. And I want to show you how to do this with code. So these are the different types of errors. I'm going to leave this up in the repository. Maybe by the time we come back, we're going to see it. But this right here is with if we go to CodeGiant.io and you like sign in. So just go to CodeGiant.io, sign in. And this is one way that you can use sentry with other platforms. For example, you click create a new item for workspace and they go to error and APM tracing right here. And let's have sentry. No, let's just have error tracking to.