How is my JavaScript Doing?

Rate this content
Bookmark

In this session, I’ll surface relevant context regarding crashes and performance issues in my JS-web-app. I’ll cover how to investigate errors and pinpoint where slowness is introduced.

8 min
01 Jul, 2021

AI Generated Video Summary

Neil Manvar from Sentry discusses monitoring JS applications in deployed environments, focusing on error tracking and performance analysis. He explains how Sentry works, including its SDK integration and automatic error notification. The talk also covers analyzing errors and performance issues, and the benefits of integrating Sentry into applications. The summary concludes with a mention of a promotional offer for three free months of Sentry.

1. Introduction to Monitoring JS Applications

Short description:

Neil Manvar, Solutions Engineering Manager at Sentry, discusses monitoring JS applications in deployed environments. JavaScript is complex, especially on the client side. Sentry provides insights into broken or slow JS apps, with relevant data and information. Two journeys, errors and performance, will be explored and debugged.

Hi, my name is Neil Manvar, and I am a Solutions Engineering Manager at Sentry. Today, I'm going to be talking about how we can monitor our JS applications to figure out how they're behaving in the deployed environments and act on that information and go from there.

First, JavaScript is complicated, right? Since it runs in the browser, it's obfuscated, and when something goes wrong, whether it's an error or a slowdown, we don't always have the information that we need. At the same time, we're putting more and more and more of these applications out there, and we're trying to iterate on them faster and faster because that's how business is done, through the application layer now, and that's where more and more of the logic is going to live. And we are going to be iterating on this logic continuously.

Applications are growing more complex as well. It's not just back-ends and microservices, but there's more happening in the front end, there's more heavy lifting happening, and we're even doing things like micro front-ends to break these things out. And when things go wrong, it's a problem for everyone. Developers are being taken away from the things that they need to do, work on new features, and then fighting this fire. Customers are potentially going to customer, and metrics are being affected as well, right? For off-steam, it's the mean times for detection and remediation. Developers want to focus on the quality of the code, and the efficiency at which they can put it out. And the product team is looking at all of this in a big picture. Where revenue is affected, they want to get out all the new features at the appropriate time, and when velocity is compromised. So that's an issue.

So what can we do about it in the context of JavaScript applications? We have all the other monitoring regarding our infrastructure, but application stuff, especially when it's running on the client side, is very lacking. That's where Sentry's going to come in. It's going to tell you when your JS app is broken, when it's slow, and exactly why that is happening, and all of the relevant data and information regarding that. I'm going to take you through two journeys, errors and performance, and we'll go ahead and debug these things.

2. How Sentry Works

Short description:

Integrating Sentry's SDK is straightforward. Enable browser tracing, release health, and auto session tracking. With Sentry, errors are automatically notified and de-obfuscated. The Sentry issue provides detailed information, including the stack trace. De-obfuscated code shows exactly what went wrong. Sentry also shows the commit that caused the error.

But first, how does Sentry work? You integrate our SDK. It's super straightforward. So for JavaScript, you can do CDN include, or Yarn add, or NPM install, and then Sentry.init. And then for tracing or performance, we want to enable the browser tracing piece and the appropriate sample rate. And the last piece is that we also want to enable release health, which is going to be enabled by default. But you would do auto session tracking truth to explicitly enable it.

So I already have this set up in my app, which I'll show you shortly, but the configuration here is such, and I'm also uploading source maps to Sentry. So now let me just go cause an error. So here, let's check out. Looks like something went wrong. And if I wasn't using Sentry, I may or may not even have this information. And you can see it's obfuscated out to have to reproduce and debug and go from there. But since I am using Sentry, what's going to happen? And you can see this just came in. I'm automatically notified something is broken. And here is all of the appropriate information.

So what I'm looking at here is the Sentry issue and this will tell me the who, what, when, where, why of the error. Sentry will automatically de-obfuscate these errors and aggregate accordingly. So let's take a look. Looks like we got a 500 that happened 70,000 times affecting 33K users. It's been flaring up over the last 30 days. Looks like it's happening on these two browsers. Affecting these customers and production on this release. So I can understand the aggregate impact of this error and the data from there and I can see the event specific data right within here. All the attributes, most notably the stack trace.

So what you would have seen in the browser looked a little bit something like this. Sentry de-obfuscated it and then showed you the relevant frames and the context lines so we can see exactly what went wrong in the code. Looks like we didn't get a 200 from the back end, so an error was thrown. Then it looks like the customer was adding a bunch of things to the cart, clicked the checkout button, our back end returned with a 500 which bubbled up to window.onerror, and all the other information the SDK deems useful, they'll attach and you can custom attach as well. The point being is now I know the who, what, when, where and why right when it happened, I didn't have to go querying around or asking around and we don't just stop there. We'll even show you the commit that caused the error.

3. Analyzing Errors and Performance

Short description:

The commit written by Will caused the error. We want to get it to the right people and fix it quickly. Now let's move on to performance. There's a slowdown in the application, and we need to figure out if it's a front-end or back-end problem. We'll analyze the HTTP request and trace the slowdown. We can also view all the transactions and identify errors and slow areas.

So here, what this says is this commit right over here written by Will caused this error. So therefore, Will should be signed this issue and he can fight this fire within five minutes rather than me having to understand this code, iterate on it, and then, you know, fix it and then put it out, which would take hours or days.

So that's it for errors. We want to get it to the right people get all the details and get it so that you can fix it. And you're in and out of here.

The next thing that I want to go over is performance. So if I go ahead and take a look right over here, same type of application, what's going to be different here is that there's a slowdown as you saw. Let me just do a little bit of tab cleanup. One more time. So when I click loading, when I go to the page, it takes a while to load the result. Is it a problem on the front end? Is it a problem on the back end? I don't know, but let's go ahead and figure it out.

The other thing is when I click checkout, it looks like it's broken as well. And there's a problem. So let me just go straight into sentry. Go into performance. We'll go ahead and look at our front end project. We're also pulling in the web vital information. We can see the largest. Contemporary paint is pretty bad over here, but let me pull up the tool store here. Look at one of these and see exactly what's happening.

So it looks like 81% of the time is spent on the HTTP request. We can see when the first content full paint is loaded and all the other information we would attach to an event. And I can also then trace this to the back end if I want to view that data set if I'm using sentry there as well. But now I know exactly where the slowdown is. Is it in react land? Is it in browser land? Is it in the HTTP request? And one more use case here is I want to view all the transactions. So let's look at checkout and I can see the related issues right here. This is the aggregate view. But in the interest of time, I'm just going to dive in and I can see that there was an error associated with this transaction. So on the right-hand side, we see what's broken. On the left-hand side, we see what's slow.

4. Sentry Integration and Conclusion

Short description:

As a developer, integrating Sentry into your application provides valuable insights. View release perspectives, including crash recessions and adoption rates. Query the data set using Discover and dashboard queries. Sentry informs developers about broken or slow applications, allowing them to focus on building new features. Get three free months of Sentry with the code sentry.io.

And as a developer, I have all the information I would need to act on this and might not even have to reproduce, so I can fix it. So go ahead integrate your sentry into your application. You're going to get this insight.

And we'll even view this stuff from a release perspective. So for example, this release went out in the wild. I can see the crash recessions, all the appropriate adoption rates and such, and then drill down on this accordingly to find any of the issues and transactions that might have to do with any of the experiences that might have been poor.

You can also query this data set. We have Discover, and you can dashboard any of those queries as well. Long story short, Sentry is what's going to tell developers that their application is broken, it's slow, give them all the details regarding it so that they can act on it and focus on building out new features.

The last thing that I want to show you all is that we're offering three free months of Sentry. Go ahead, use this code sentry.io. Thank you all for your time. I know that this was fast, but wanted to get through all the technical material. I appreciate you.

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

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.
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!

Workshops on related topic

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.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.