Monitoring 101 for React Developers

Rate this content

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. 

Workshop level: Intermediate

Lazar Nikolov
Lazar Nikolov
Sarah Guthals
Sarah Guthals
107 min
07 Nov, 2023


Sign in or register to post your comment.
  • Leonardo Faife
    Leonardo Faife
    How long will the workshop be? Im in class until 1:15pm
  • Vinita Ramnani
    Vinita Ramnani
    Hewlett Packard Enterprise
    Will this be recorded and shared with the people who signed up for the workshop?

Video Summary and Transcription

Welcome to Workshop Monitoring 101 for React Developers. Learn how to create a Sentry project, handle errors, use collaboration tools, set up alerts, and explore distributed tracing. Set up source maps and wizards to get additional information about errors. Add event context and custom tags to identify users triggering events. Configure custom tags in Sentry to aggregate and filter errors. Explore alerts, issue assignments, and integrations with GitHub. Implement distributed tracing to follow the execution of requests and identify performance bottlenecks. Connect the client-side and back-end using Sentry's trace ID and transaction. Use session replay to debug applications and improve user experience.

1. Introduction to Workshop

Short description:

Welcome to Workshop Monitoring 101 for React Developers. We'll guide you through building a simple app for flashcards using React. Learn how to create a Sentry project, handle errors, use collaboration tools, set up alerts, and explore distributed tracing. Join the Discord for Q&A and enjoy the workshop!

Welcome, everyone. Hey, how's it going? If you haven't already, join the Discord. That's where we will have Q&A. so we've got myself sarah and lazar here who are going we're going to split off so i'll do the first half of the workshop and he'll be in discord and then we'll swap yeah and we will take a short break at the one hour mark and there's a that's to join the um the discord but we have a specific thread for this workshop.

Let's go. Alright. Welcome everyone. Again, this is the Workshop Monitoring 101 for React Developers. I'm Sarah. And I'm Lazar. And we are advocates here at Sentry. I'm normally based out of Washington State, but I'm visiting Toronto today so that we can give this workshop together. We're also going to ViewConf on Friday if anyone else is going. So we'll see you there.

Today what we're going to do is actually give you from start to finish we have a very simple app that we built for flashcards, right? So answering the question, testing your knowledge on things. Shuffling the cards is a really important aspect of learning. And it's built with an XJS. And so we have a very basic app that's built. It's open source. We'll give you the links to all of this, including the links to this deck, which has all the links to everything else. So if you're missing anything, don't worry. And we'll also share them in the Discord during and or after. We're going to walk you through actually creating a Sentry project, seeing those errors get sent, how to use collaboration tools, how to set up proper alerts and then how to do some interesting stuff with things like distributed tracing as i mentioned we'll take a short break at the hour mark but also please feel free to get up and take a break if you need to and then again um when one of us is presenting the other one will be monitoring the chats and discord so if you have any questions feel free to to pop them in there

2. Monitoring Overview and Project Setup

Short description:

Welcome to Workshop Monitoring 101 for React Developers. We'll guide you through building a simple app for flashcards using React. Learn how to create a Sentry project, handle errors, use collaboration tools, set up alerts, and explore distributed tracing. Join the Discord for Q&A and enjoy the workshop!

So here's our agenda. Part one will be me. We're just going to kind of get up and running. I'm going to give you a quick overview of monitoring. I don't want this to be just a lecture. I want this to be more engaging and kind of actually opening up VS code and Century app and everything like that. So just a quick overview. We're going to actually set up a project with Sentry, configure source maps, event context, custom tags. All of these words will make sense eventually, alerts and issue assignments. And then, like I said, Lazar gets kind of the more interesting bit, in my opinion. It's a little bit more fun because he gets to dive into distributed tracing and session replay, which are two of our, I guess, newer features, but also just kind of more in-depth features for applications that might be larger than the splashcard app that we have. Yep. So let's go ahead and get started. I'm going to switch over. Not to this one. Oh, that was this one. I meant to leave this one open and then do this. Perfect. Okay. So, as I mentioned, we've got this flashcard app. If you want to share the link, maybe, in the chats or in the Discord. Very simple, and I've got here my VSCode open. We have it open in here. If you need me to zoom in for anything, let me know. But I'm trying to monitor to make sure that it's all set up properly. Actually, I just realized I totally skipped over the, what is monitoring? I don't think it's like I told you, I don't want to do a long lecture on what is monitoring. OK, but let's do a very quick overview of what is monitoring, because I didn't mean to just totally skip over that. OK, so essentially, as you all probably have experienced, you build an app or you're part of a team that builds an app where there might be a poor user experience. Sometimes this is due to actual like errors within your application. Sometimes this is due to an API call that you made, and maybe the service that you're using on the other side of that API call is having issues. Regardless of why, a user experiences something not great. That user becomes frustrated, and oftentimes developers are too late to resolve the issue when it would maybe make that big of a difference. For example, maybe all of a sudden you just get a bunch of notifications on Twitter that your app's busted. And that's all you get. And there's not a lot of information, but a bunch of people are just saying that it's not working and they're basically leaving, not using it anymore. Monitoring tries to essentially, and this is specifically for sentry monitoring, stop that from happening. so there might be a poor user experience some users may still get to twitter before you log into your sentry alert but sentry detects the issue there's also ways that you can set up some thresholds to make sure that if it just happens once maybe like you just lost one package it's not that like the end of the world but if it happens you know 10 times or 100 times then we want to alert the team. So Sentry detects an issue, and the developers actually get a pointer into the actual problem. So it's not just user feedback apps busted, but instead it is a breadcrumbs. It's a full trace of what was happening. Like I said, Lazar is going to go into distributed tracing, so you can go from front end to back end and to other services. and if you set up things like source maps which we'll go into you can actually get the exact line of code that is likely the trigger of the issue and if you have code owners set up which I'll also go into you can automatically tag the appropriate developer to resolve the issue instead of just having it go through this long triage process where I get this issue and I'm Like, this is not my code. I have no clue how to resolve this. Or maybe it was my code. I originally wrote it, but I'm not the owner of its health long-term. That's someone else. And so the ideal scenario here is that most users never know that there was an issue in the first place. So this is kind of like our tagline. Tagline specifically Century focuses on the developers who are building or monitoring the apps and how we can best support developers in taking action on those broken lines of code crashes and busted API calls. We really do focus on that developer first monitoring solution to give you, like I said, an actionable answer to what the problem is, not just a clue for where the problem could potentially be. Now we will go into the demo. So you can follow this short link for the GitHub repo. We're going to. I already have this cloned on my machine. Exactly. Well, actually, the main branch has Sentry set up, but there is a branch called No Sentry. I'm not necessarily expecting that you all run this on your local machines now. But if you want to do this later at some point, we do have a PlanetScale account and a database with it. You can use a different one if you want. There might be some additional configuration you need to do. We already have a Sentry account. It is just a regular account. It's not like a Sentry employee account. We do that on purpose to give you a more accurate representation of what you would see. And then we did add instructions to the Readme, so you can follow along there at a different time. So I'm going to show you how to set up that React project with Sentry. We're going to configure our source maps, add event context and custom. tags, and then jump into alerts and issue assignments. Now we can actually get started. So like I said, this is the repository and I've already cloned it here.