Tracking errors and slowdowns across JS applications 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 DevOps.js Conf 2022, check out the latest edition of this JavaScript Conference.

FAQ

Sentry is designed for tracking errors and slowdowns across JavaScript applications. It helps developers monitor the health of an application from the front end to the back end, enabling them to track errors, monitor performance, and notify necessary team members.

Sentry can be integrated with various types of applications, including React front-end applications and Node Express back-end applications. It supports multiple frameworks and languages, as detailed in Sentry's documentation.

Sentry provides performance monitoring by capturing transactions and spans during application activity. It allows developers to analyze web vitals, user misery scores, and detailed transaction data to identify performance bottlenecks and optimize the user experience.

Source maps are used to map minified production-level code back to its original source code, making stack traces human-readable. Uploading source maps to Sentry allows developers to understand and debug errors more effectively by providing meaningful stack traces.

Sentry allows users to set up targeted alerts that notify team members through various channels, such as Slack, email, PagerDuty, and Microsoft Teams. These alerts can be customized based on specific criteria, such as the number of events or the severity of the issue.

A distributed trace in Sentry is a way to trace activity across multiple applications during a single request. It provides a unified view of transactions and spans, allowing developers to understand the flow of requests and identify performance issues across different services.

Developers can add custom data to transactions and spans in Sentry using the Sentry SDK. This includes setting custom tags, spans, and breadcrumbs to provide additional context and improve the debugging process.

Key features of Sentry's error tracking include capturing detailed error information, providing un-minified stack traces through source maps, offering context through tags and breadcrumbs, and enabling developers to trace errors from the front end to the back end.

Sentry offers Discover queries and dashboards for organizing and visualizing data. Discover queries allow users to slice and dice data based on specific criteria, while dashboards aggregate these queries and present them in various visual formats to help teams monitor and analyze application health.

Yes, Sentry is GDPR compliant. It offers data scrubbing tools to ensure that sensitive information, such as personally identifiable information, is not sent to or persisted in Sentry.

Simon Zhong
Simon Zhong
59 min
29 Mar, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This Workshop on Sentry and Application Monitoring covers topics such as tracking errors and slowdowns in JS applications, integrating Sentry into React and Express, setting up alerts and notifications, analyzing error details and performance, and using dashboards and the sandbox. It also highlights the importance of code observability, the use of source maps for deciphering minified code, and the ability to trace errors from front end to back end. Additionally, it mentions the features of performance monitoring, such as analyzing transactions and using web vitals. Data scrubbing tools and GDPR compliance are also emphasized.

1. Introduction to Sentry and Application Monitoring

Short description:

Hello, everybody. My name is Simon. I'm a solutions engineer at Sentry. Today, I'll be discussing tracking errors and slowdowns across JS applications using Sentry. We'll cover application monitoring, Sentry integration steps, error and performance monitoring, alerts, and data organization through Discover and Dashboards. Let's get started!

♪♪ All right. I'll go ahead and get started. Hello, everybody. My name is Simon. I'm a solutions engineer at Sentry. I'll just start sharing my screen here. Let's make sure... Share. My desktop. All right. So everybody should see my desktop. Got a slide deck prepared for us and we can go through kind of this topic that we're all joined here for is tracking errors and slowdowns across JS applications using Sentry.

So by way of introduction, my name is Simon Zhang. I'm a solutions engineer at Sentry. And I've got a few slides for us to go through kind of end-to-end process of getting us situated with Sentry, the SDK on our application and also how we can go into Sentry to, you know, track the errors, track the slowdowns, notify necessary people, work through the workflow that we supply through Sentry, optimize the user and developer experience all with our platform here. Just to continue on through this agenda to keep us organized today, I'll start off with describing application monitoring, what Sentry is designed for and how and why it's important. Then go into the weeds a bit with the Sentry integration steps. So that includes getting the SDK on our apps. I've got a couple apps for us to do this with, so a React front-end and a Node Express back-end. So, both JavaScript apps and we'll get a project created in Sentry and also integrate these applications with those Sentry projects. So, Sentry project and application, those are like mapped one-to-one. We'll go into the details there but, number three, errors and performance. So, we'll talk about error monitoring and performance monitoring. Step four, or chapter four for us, will be going through alerts. So, notifying the right people off of the errors and performance, you know, data that we capture. We organize the data by releases. So, we'll talk about that as well and go over Discover and Dashboard, how we organize and slice and dice data that we care about in our team and our organization or just to look at our data for fun. Whatever we wanna do with the data we capture, we can do it through Discover and Dashboards.

Now, with the meeting that we have together, this is on Zoom, right? And we have, it looks like our Q&A feature might be a little wonky today. So, we'll try to sort that out.

2. Introduction to Application Monitoring and Sentry

Short description:

Let's start with a problematic application that crashes periodically, takes a long time to load products, and encounters errors during checkout. Without Sentry, it's challenging to identify and fix these issues efficiently. That's why we need application monitoring. Sentry focuses on code observability, monitoring the health of an application from front end to back end. With the Sentry SDK, we can set up targeted alerts and capture all the necessary details to understand the context and user experience. By incorporating Sentry into our application, we can identify and fix problems effectively.

Feel free to unmute when, you know, I pause for questions and I'll also pause midway and by the end of the session, I'll do a quick break for questions as well or feel free to just type it in chat and I can get to that when, throughout the meeting as well.

So, with that, let's start with the first bit here. So, what is application monitoring and why? So, let's start off first with reviewing a problematic application. This will kind of give a more hands-on example of what we're looking for. So, I've got this application that crashes periodically. So, I'm just going to refresh it a bit and it crashed. Okay, what the heck happened? So, this is one thing we need to worry about for this problematic application. Sometimes it crashes, sometimes it doesn't on a refresh, on load. Another problem with this application is when I go into looking at these products, it's an eCommerce site, I'm looking and trying to buy stuff as an end-user, right? I've got my end-user hat on, took a long time for me to see the products that I want to buy, and lastly, when I try to check out and buy the products that I've added to my cart, we encounter an error. So, we've got three problems with this application and as an end-user, I'm frustrated, confused, I don't know what's going on. Maybe I'll click this to reach out to the developers or whoever's in charge to, you know, notify them of these problems, but it's just not a cohesive way to do it. And as an end-user, I might just, you know, try again later or just give up on buying these things in my cart. So that's without Sentry and something that we need to figure out. So that's the problem situation, what we're trying to fix together.

Now without Sentry, maybe we'll get notified of this problem that we're experiencing, try to reproduce it as we, you know, enter the problem through that page load. Oh, I can't reproduce it, what's going on? Or I eventually do reproduce it and I look at my console to investigate what's the problem, maybe check out the network tab as we reproduce the problem as well. There are opportunities here to figure out that problem we experienced by the end user, but it's not as streamlined and efficient as we'd like, not as trackable either. So that is why we care about application monitoring. We want, as the developers, we want to know the problems in our code and the user experience with the code we write. So that's why we've got Sentry, right? So Sentry is focused on code observability. We monitor the health of an application from the front end to the back end. And with the Sentry SDK on your application, the concept is to set up alerts. And these are like targeted alerts that aren't noisy and not spamming our team members. So we'll set up very specific and granular alerts with our alert platform, those necessary or the important team members and developers would be notified and they can work through the issue. All the details that are captured by Sentry are all available for them to understand the context, what the user experience as well, any clues on which problems might be related and also what parts of the code are important, things like that, contextual information through a timeline of activity and tags will talk about as well. At the end of the day, we'll figure out what's going on, make the necessary commits and then fix the problem, right? That's the way we would incorporate Sentry in our application.

Now to follow along, what we have is a demo app. So that's what this URL is for, but if you want it to, and that's what we'll be reviewing together. So I've got one running locally and I've also got one that's hosted. So we'll go through both and tinker a bit with the one that I've got running locally.

Watch more workshops on topic

Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
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.
MERN Stack Application Deployment in Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Joel Lord
Joel Lord
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.
Azure Static Web Apps (SWA) with Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
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.
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
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.

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

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
Automating All the Code & Testing Things with GitHub Actions
React Advanced 2021React Advanced 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.
Fine-tuning DevOps for People over Perfection
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Top Content
DevOps is a journey that varies for each company, and remote work makes transformation challenging. Pull requests can be frustrating and slow, but success stories like Mateo Colia's company show the benefits of deploying every day. Challenges with tools and vulnerabilities require careful consideration and prioritization. Investing in documentation and people is important for efficient workflows and team growth. Trust is more important than excessive control when deploying to production.
Why is CI so Damn Slow?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
Slow CI has a negative impact on productivity and finances. Debugging CI workflows and tool slowness is even worse. Dependencies impact CI and waiting for NPM or YARN is frustrating. The ideal CI job involves native programs for static jobs and lightweight environments for dynamic jobs. Improving formatter performance and linting is a priority. Performance optimization and fast tools are essential for CI and developers using slower hardware.
The Zen of Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
Let's talk about React and TypeScript, Yarn's philosophy and long-term relevance, stability and error handling in Yarn, Yarn's behavior and open source sustainability, investing in maintenance and future contributors, contributing to the JavaScript ecosystem, open-source contribution experience, maintaining naming consistency in large projects, version consistency and strictness in Yarn, and Yarn 4 experiments for performance improvement.
Atomic Deployment for JS Hipsters
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
This Talk discusses atomic deployment for JavaScript and TypeScript, focusing on automated deployment processes, Git hooks, and using hard links to copy changes. The speaker demonstrates setting up a bare repository, configuring deployment variables, and using the post-receive hook to push changes to production. They also cover environment setup, branch configuration, and the build process. The Talk concludes with tips on real use cases, webhooks, and wrapping the deployment process.