Monitoring Errors and Slowdowns Across JS Applications

Rate this content
Bookmark

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.

8 min
24 Mar, 2022

Comments

Sign in or register to post your comment.

AI Generated Video Summary

Sentry is an error monitoring platform that helps developers optimize the customer experience by alerting them of errors and slowdowns. It supports all major languages and frameworks, with a focus on error monitoring, performance monitoring, and release health. The Talk explores how Sentry organizes and represents error data, analyzes error details and tags, and investigates backend issues, performance problems, and release health. Collaboration with backend teams is emphasized to resolve issues and optimize transaction time. The Talk also highlights the importance of analyzing graphs, issues, and regressions to identify areas for improvement in release health.

1. Introduction to Sentry and Error Monitoring

Short description:

Hi, I'm Simon, a solutions engineer at Sentry. We monitor errors and slowdowns in JS applications, connecting developers to the end user experience. With the Sentry SDK, we alert team members and developers of errors and slowdowns, optimizing the developer and customer experience. The Sentry platform focuses on error monitoring, performance monitoring, and release health. We support all major languages and frameworks, with Node.js as a starting point. We'll generate transaction and error data to demonstrate how Sentry organizes and represents them. Let's take a look at how errors are represented in Sentry, including frequency, contextual data, and tag information.

Hi there, my name is Simon. I'm a solutions engineer at Sentry, and we'll be talking about monitoring errors and slowdowns across JS applications. Sentry is designed squarely for developers. We'll tell you when your code is slow, when it's broken, and clues on why. We're connecting the end user experience as closely as possible to the developers that make those experiences happen.

With the Sentry SDK on your apps, we'll alert the necessary team members and developers when those errors and slowdowns happen. Let them make those commits and the changes to optimize that developer and customer experience. The Sentry platform is divided into these five pillars here. We'll be focusing on the first three on the left, so that's the error monitoring, performance monitoring, and release health side of Sentry.

Now, to get started, we would be on the Sentry documentation page. We support all major languages and frameworks button here to get into all of that. But probably the place we have Node.js in the front page to get started with that, the install on the packages that are necessary with a Yarn ad or NPM install and configure with Sentry init, including that DSN. So that's a data source name. It'll tell your application where to send error and transaction events to, and that's your project in Sentry.

Now, I've got an app here for us to take a look at together. We'll generate some transaction and some error data, and we'll take a look at how that's represented in Sentry, how it's organized by releases as well. Now, to get started, we'll click into browse products to take a look at the available plant things to buy. And it's taking a few seconds here. We'll take a look at that slowdown momentarily, but I'm going to finish up with this user flow, added a couple items to our cart, checking out to purchase them, right? We've encountered an error, surprise, surprise, but let's take a look at how that's represented in Sentry.

Now, I've got a Slack alert set up. So in a few seconds here, we'll be notified of the error that we just triggered from that checkout process. Click into this notification with, you know, some context behind the scenes as well of what just happened, but let's take a deeper look. So from that link, I'm taken to the who, what, when, and where of the error that we just experienced together, right? So this error, this 500 error has happened 160 times to 60 users. Some context about its frequency over the past day, 30 days, first and last seen across releases. So that's really helpful. And also some aggregated tag information on the right over here. So we've taken all 160 times this error has happened, gotten some contextual data and heat mapped, organized it. As you see here, customer type is small plan, large, medium enterprise. It's affecting all our users. So we want to take a deeper look into that.

2. Error Details and Analysis

Short description:

Let's focus on the details of one of the 160 times this error has happened. We'll look at the tags, the stack trace, and the timeline of activities that led up to the error.

Now let's focus on the middle pane here. So these are the details of one of the 160 times this error has happened. We can page through to other ones. In any case, let's take a look at these tags. So the key value pairs for this specific occasion, MacOS Chrome, it was a large customer, some other details. But what we care most about at this point is probably the stack trace. Without Sentry, we'd be dealing more with this minified, not human readable stack trace. But since we've uploaded our source maps at build time, we see this very beautiful human readable stack trace and we can take a look at the exact line of code where it happened. It looks like the response from the back end was not okay, so we can dive a little deeper into that. We've also got a timeline of activities that led up to our error, which we can filter by as well.

3. Backend, Performance, and Release Health

Short description:

Now let's dive into the backend and see the stack trace and error details. We can work with our backend team to resolve the inventory issue. Moving on to performance, we analyze the web vitals and transaction details. We identify a problem with the largest contentful paint web vital and investigate further. By examining the transaction breakdown, we find a slow HTTP client operation due to sequential database queries. We can collaborate with the backend team to optimize and improve the transaction time. Lastly, we explore release health, including crash rates and specific details. We can analyze graphs, issues, and regressions to identify areas for improvement.

Now, just going back to the top of this issues page, I see there's a connector to a child event. So that's our node backend. Now clicking into that we can see everything that we just reviewed, but now from the backend. The who, what, when and where. With the stack trace as well, we've got our node stack trace and we got an error because there was not enough inventory for our product because the inventory item count and quantities just weren't happy together. Okay, so we can work with our backend team, figure that out.

Great, so that's the first item here, error monitoring. Let's jump into performance. So going back to our frontend and our performance tab, we got our web vitals right away. So that connects that end user experience to what we as developers care about and what is actionable for us. Our products transaction, which took a few seconds to load as we noticed earlier that list of products, it's failing on our largest contentful paint web vital. So let's dive a little deeper into that.

We've got our transactions table, look into a transaction summary of how it's been performing over the past day. We can adjust the timeframe or this is a really fun graph to work with and highlight over a specific period. But in any way, in any case, what we care about is getting into the details of a specific transaction. So clicking into that, we have the operation breakdown of what just happened or how it's performing against our web vitals. So it's failing on that LCP, 10.6 odd seconds over that 11.18 total transaction time. Super problematic, but a lot of the operations looking down is not taking too much time. We see this one HTTP client operation that's taking 10 and a half-ish seconds. So let's dive into that and look at what operations are happening, right? Here we can see that there are some database queries, some select statements that are sequential, and we can work with our back-end team to figure out how to optimize that, reduce that LCP problem, and improve that transaction time. Great. So that's two checks off the box here. Now let's take a look at release health. So we organize our details about our projects in releases. We can sort by specific properties as well. And we support semantic versioning. Here we've organized it by 22.x releases, and we can adjust to see details about our production environment over the past 14 days in the terms of sessions, or users are available as well. In any case, once you filter according to that, we get all the details about these releases.

So our crash free rate in the latest version is 84%. Adopted 7% of the time, that's okay. Crashes aren't too bad, but jumping into a specific one, we get the specific details about these releases. So we can organize by different series of graphs, take a look at the issues as well, and the regressed issues, unhandled ones, figure out which ones to delve into, and go back to where we started with the issues page, and also take a look at how it fits into the transactions behind the scenes as well. So in this case, two transactions, two errors, everything kind of just fits together with Sentry in the ways of going into a release, taking a look at the errors behind the scenes, and also the performance details all connected together. Great.

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

JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.

Workshops on related topic

Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- 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
React Advanced Conference 2023React Advanced Conference 2023
112 min
Monitoring 101 for React Developers
WorkshopFree
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.
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.