Tracking errors and slowdowns in Node + JavaScript using Sentry

Rate this content
Bookmark

We’ll go through setting up Sentry step--step to get visibility into our frontend and backend. Once integrated, we will track and triage errors + transactions surfaced Sentry from our services to understand why/where/how errors and slowdowns occurred within our application code.

This workshop has been presented at Node Congress 2022, check out the latest edition of this JavaScript Conference.

FAQ

Sentry is a tool that helps developers track issues in their applications such as crashes, errors, and performance issues. It provides visibility and context needed to identify why issues occur, where in the code they happen, and who is affected, allowing developers to fix issues and improve the application.

To integrate Sentry into a JavaScript application, you install the Sentry SDK using npm or yarn, initialize it in your application's entry file (like index.js), and configure it with a DSN (a unique key) provided by Sentry. This setup allows Sentry to capture errors and performance issues in your application.

Source maps are files that map minified code back to the original source code. They are important for Sentry because they enable the tool to translate errors from the minified production code back to the readable source code, helping developers understand and fix issues more efficiently.

Yes, Sentry can be integrated with both front-end and back-end components of an application. For instance, it can monitor JavaScript applications on the front end and Node.js servers on the back end, capturing errors and performance issues across the full stack.

In a production environment, Sentry captures errors as they occur, processes and aggregates them, and then alerts developers in real-time. This allows developers to quickly address issues that could affect user experience or system stability.

Sentry provides insights into the adoption and impact of new releases. It tracks error rates, performance issues, and user sessions to determine if a release is healthier or if new issues have been introduced, helping teams make informed decisions about their deployments.

Yes, Sentry supports integrations with many other tools such as Slack, GitHub, and JIRA. These integrations help streamline workflows by allowing developers to receive alerts, assign issues, and track deployments directly within the tools they are already using.

Sentry's performance monitoring features allow developers to track slow transactions and other performance issues in real time. This helps in identifying bottlenecks in the application, understanding the impact of code changes on performance, and optimizing the user experience.

Neil Manvar
Neil Manvar
53 min
15 Feb, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Workshop focused on application monitoring using Sentry. The importance of tracking errors, slowdowns, and releases was highlighted, along with the integration process for React, Express, and Node.js applications. The debugging capabilities of Sentry were demonstrated, including identifying errors, slowdowns, and debugging backend issues. Monitoring releases, querying data, and visualizing information were also covered, along with the integration of Sentry with workflow tools. The Q&A session addressed various topics, including the use of Sentry in different environments and its integration with other tools.

1. Introduction to Application Monitoring

Short description:

Today we'll discuss tracking user experience in Node and JavaScript apps, including crashes, errors, exceptions, and slow page loads. We'll integrate Sentry, solve errors and slowdowns, and understand how releases are affected. Feel free to ask questions.

All right, let's get started. First of all, thank you, everyone, for taking the time to attend this workshop. I just want to confirm if everyone can hear me. If someone can just give me a yes in the chat, that would be fantastic. Awesome, thank you. Appreciate that, everyone.

All right, so today what we're going to be talking about is how we can track our user experience in our Node and JavaScript apps, specifically when it comes to crashes, errors, exceptions, slow page loads, renders, and all things like that that you would be considered about if you were the developer that wrote this code, put it out into production.

Additionally, we're going to get some visibility and context that we need from the application side so that we can actually know why these issues are happening, where in the code they're happening, who they're happening to, and actually fix it and roll forward.

By way of introduction, my name is Neil Manbar. I come from a front end development background, and now I head up solutions engineering at Sentry, where I help other front end developers and backend developers use Sentry and know about their issues so that they can fix them, which is the exercise that we're going to go through today and I'm really excited about.

So real quick, let's just go through the agenda. First, I want to demonstrate the problem. I want to show where the gaps are when you're developing a browser app that's talking to, let's say, an Express backend, and when issues happen, where the specific gaps in visibility and context are and why you need a true application monitoring tool within your applications.

Then we'll go ahead and integrate Sentry, specifically introduce the SDK into our application for front end. We'll also get the source maps up so that we can get a readable stat trade. And then we will go through all of the various use cases. So we'll use Sentry to solve for errors. We'll tell it what's happening, we'll get all the context that we need, the who, what, when, where, and why so that we can do something about it. And we'll do the same for slowdowns as well. And then, as a developer, you're putting out releases, you're putting out new builds. We're trying to do this at an ever increasing pace. Sentry is also going to tell you how all of this comes together in terms of releases, if your release is adopted, if it's having new errors, if it's having slowdowns, etc. And then any of the data that we send in to the platform, we're going to be able to slice and dice and query and dashboard, and I'll go over that at the end.

If you have any questions, feel free to throw them into the chat. I'll also address questions at the end as well.

2. Essentials of Application Monitoring

Short description:

In this part, we'll discuss the need for application monitoring and the challenges developers face without it. We'll explore the unreadable stack traces, slowdowns, and errors that often go unnoticed. We'll also highlight the importance of context and how Sentry can provide the necessary tools to identify and resolve issues. Throughout the workshop, we'll focus on solving errors, slowdowns, and tracking the adoption of releases. To follow along, create your own Express and React apps, sign up for Sentry, and create two projects. Let's dive into the documentation and explore the integration into the PlantStore app.

So why application monitoring, and why do I actually need it in my applications? Rather than just providing you guys a bunch of text, I'm going to go ahead and showcase the problem. So here I have my application, and it's basically a React front-end that's talking to an Express packet. And what I'm going to do is leave the console open. I'm going to refresh, and it looks like once in a while, it's going to crash, and there you go. And when it does crash, we basically have this unreadable stack trace. We don't really know what's going on. We don't know even if it happened, unless the user reports it to us, or we eventually figure out this is happening and then get to reproducing it, and then we get this information here.

Additionally, let's say when this does work, there's slowdowns as well. So here it's slow. Is it because of the back-end? Is it because of the front-end? Is it because of my rendering code? Is it because of some slowdown at the database layer? I don't know. So let's go ahead and add some items to cart, and then we'll go ahead and check out. And when we do that, there was also some slowness, and it looks like there was an error as well. So what I'm going to do now is kind of recap what happened here. So if we take a look, first thing, we were left with an unreadable stack trace. It was minified. We don't know what was going on, and we didn't even actually know of the error in the first place. Same with the slowdown. We didn't even know about the slowdown unless a user reports it to us, and then we reproduce it, and then we have to look through all the profiling tools and all of that type of stuff. And then additionally, there was an error with the slowdown as well. So on the front end we don't have the visibility we need. And we're stuck to reproducing. And then on the back end, if we're not using an application monitor tool, we end up having to dig through logs, assemble queries, and then piece this together from the outside rather than the inside of the application.

So let's go ahead and showcase what a developer would actually want and need when it comes to this type of stuff. You would need the context. So you need an SDK that lives in the code that's sending stuff up. And then you're alerted when there is an issue. Your team knows about it. And then we can get the application layer context of who, what, when, where, and why that I'm going to show you that Sentry surfaces. And it would be great that we could even identify which commit or code change caused this. So we could get it assigned to the right developer, and then push forward with this and roll forward and get back to a successful state. So this is the workflow that Sentry is going to be able to provide you. We're going to ship up errors, transactions, and sessions. You're going to be alerted when these things go wrong, know about it, get the context you need, and then be able to roll forward. We're going to go through all of this, but we're going to solve for errors. We're going to solve for slowdowns. We're going to see if our latest release was successfully adopted. We'll create some dashboards, some slice and dices data. And as a developer, I use Slack. I use GitHub. I use JIRA. I use my own tools, and I use about a hundred of these things played together as well. For those of you that are looking to follow along, I would suggest you create your own Express app using Express Generator such tool and same with React, you can create React app and go ahead and sign up for Sentry. I've inserted a link here, sentry.io/signup, and we'll go ahead and create two projects. I'm going to be using my own application. It's a little more involved. That's why I suggest that you guys just use Express Generator or create React app and go ahead and just start from a plain brand new application. Signing up is free on Sentry. You can just go ahead and do Sentry.io signup, create an organization, and then go ahead and create projects, one for your React, one for your Express then. Before we get into all this, I'm going to highlight all of the documentation, and then I'll actually go through this exercise with you all. I'll show how this is integrated into that PlantStore app that I was showcasing.

QnA