Monitor Application Bugs and Errors with Sentry

00:00:00 When you have live collaborative features and many users working on the platform at one time, you have to make sure that everything just works.

00:00:07 Or if it breaks for whatever reason, that you can fix it very quickly.

00:00:12 So in the next step, I'll teach you how to monitor your application for bugs and errors through Sentry.

00:00:18 To get started with adding Sentry to our application, click the special link down in the description so you can follow along and see exactly what I'm seeing.

00:00:27 And then click get started or sign in if you have used it before.

00:00:31 And you'll be redirected to either the onboarding or your issues dashboard.

00:00:36 I mean, take a look at how convenient this is to see all of the errors that are happening within your application.

00:00:43 There's a lot of events in the apps that I am testing right now.

00:00:47 And that's such a good thing to be able to see which is the most common error that users are experiencing, how often is it happening,

00:00:55 and just be able to fix it very quickly, right?

00:00:58 This is amazing.

00:00:59 On the other hand, if you haven't used Sentry before, What we can do is go to the URL bar and just append the onboarding right after your Sentry dashboard ID.

00:01:12 So we can say onboarding right here and press enter.

00:01:15 And that'll allow us to connect Sentry to yet another project.

00:01:19 In this case, our live collaborative application.

00:01:23 So let's go ahead and click install Sentry.

00:01:28 Next, we'll choose Next.js as our platform of choice and click Configure as DK.

00:01:35 And it's going to give us a command to install Sentry.

00:01:39 So let's copy it.

00:01:40 And going back to our application, we can just paste that command in the terminal on the right.

00:01:46 Let's press Y to install the Sentry wizard.

00:01:49 And it's going to ask us a couple of questions.

00:01:52 We're going to say, yes, the wizard can create and update the files.

00:01:55 And we'll be using the Sentry SaaS version of Sentry, but you can also self-host it if you want to.

00:02:02 We already have a Sentry account, so I'll press Yes, and this will very conveniently log us in.

00:02:09 Now you can choose the Sentry project on which you want to add this application to.

00:02:14 In my case, I'll go with JavaScript Next.js.

00:02:17 And now it's going to install all the necessary dependencies for Sentry to run.

00:02:22 Now it's going to ask us a couple of questions.

00:02:25 The first one is, do you want to route sentry requests in the browser through Next.js server to avoid ad blockers?

00:02:32 This is a great thing to add and very convenient, but in this case, I'll say no, just because we're testing things out.

00:02:38 It's asking us whether we want to create an example sentry page to test our setup.

00:02:43 This is recommended, so we'll say yes.

00:02:46 Next, it's asking us whether we're using a CI-CD tool.

00:02:50 We're going to say yes, because we're using Versel.

00:02:52 And then it's going to give you an ENV key.

00:02:55 So let's copy it.

00:02:58 And even though it'll make it work by itself, we'll have to copy this and add it later on to our deployed version of the application.

00:03:05 So let's quickly navigate to .env.local and let's paste this new key right here, just so we have it.

00:03:14 and we'll say, yes, I configured it.

00:03:16 That's it.

00:03:17 Sentry Next.js SDK has been successfully installed.

00:03:20 Now we just have to validate our setup by restarting our dev environment and then visiting the Sentry example page.

00:03:28 We can quickly check the files and folders that have been generated by Sentry.

00:03:32 In this case, the most important one is under Sentry example page and then page.tsx.

00:03:39 Weirdly enough, to onboard using this tool, we have to trigger an error.

00:03:45 So you'll notice that you have to click a button that will purposefully throw an error so that we can catch it within Sentry's dashboard.

00:03:54 Other than that, Sentry also added a couple of other things like the Sentry Client Config, the Edge Config, and the Server Config as well.

00:04:03 We can look into those later on.

00:04:05 For now, let's throw that error.

00:04:08 We can do that by going to the homepage and then manually appending this to the URL, sentry-example-page.

00:04:17 If you go there, you can see this nice sentry throw error.

00:04:20 So let's do just that.

00:04:21 I'll throw the error and you can see it right here, Century Example Frontend Error.

00:04:27 Now, back in Century's dashboard, at the bottom of the page, you can see Error Received and we can be taken to our error.

00:04:35 For you, this should be the only error that's on there and you can see it right here happening just now.

00:04:42 So you can click it and here you can see all the different information about the error.

00:04:48 This error was triggered through one event by one user and it is of a high priority.

00:04:55 So what is some of the information that we can see about this error?

00:04:59 Well, let's scroll down and let me show you.

00:05:01 we can see exactly where the error originated, and we can see an entire session replay of a user triggering that error.

00:05:10 So if I start playing it, you can see exactly when the error happened.

00:05:15 That's great.

00:05:15 And as you can see, the characters currently are blurred.

00:05:19 That's to protect the user's privacy, but you can still get an idea of what they were doing on your site to be able to break it.

00:05:27 No more long conversations with users and trying to decipher what they did.

00:05:32 You can see exactly what they did right here.

00:05:35 And Sentry even implemented some AI solutions to fix these errors, but I like how they say that you might get lucky, but again,

00:05:43 maybe not.

00:05:44 Still, it's worth a shot.

00:05:45 So if you click view suggestion.

00:05:48 You can see a complete problem description and even a proposed solution to fix it.

00:05:54 In this case, the fix of the error is to just remove this throw new error from the code.

00:06:00 Moving down, we have even more information about why this error might have happened.

00:06:05 such as the browser's name, the device, the environment, and even the URL on which it happened, and more information about a specific user,

00:06:13 such as devices, versions of React, operating system.

00:06:17 The amount of information you're getting here is pretty crazy.

00:06:21 The next amazing thing I want to show you is the Traces feature.

00:06:24 It is still new, but it gives you some amazing insights into your application.

00:06:29 You can see here that I'm getting a lot of information as I also have other apps attached to this project.

00:06:36 But if we go under the last hour, you should be able to see what I am seeing here.

00:06:41 And that is this one, get century example page, the error that we have just thrown.

00:06:46 And you can see more information about how that error happened.

00:06:50 But what we can do to trace the steps even more is trigger a new event directly in our application.

00:06:57 So if I go back to localhost 3000, and if I create a new blank document, you can see that it got created.

00:07:05 We can even change the title to something like testing century.

00:07:11 Oh, let's fix that.

00:07:12 It's nice how we have this save thing.

00:07:15 Very soon after making that request, you should be able to see a trace root pointing to documents and then the ID of this newly created document.

00:07:24 If you expand it, you'll be able to see that this is not just a get request to get that specific document.

00:07:31 you can see that we have a post request here too, that was used to create it.

00:07:36 So what we can do is we can open up this entire trace, which will lead us to the performance tab.

00:07:42 And here we can see exactly what was happening on the user's browser.

00:07:46 And you can trace it request by request.

00:07:49 We can see that some middleware events were called as well, as well as some HTTP server.

00:07:53 And then finally the navigation happened.

00:07:56 What we can do is scroll up and down and you can see the entire replay once again.

00:08:02 So if I go here under Replay and click Play, you can see exactly what happened.

00:08:09 So I click it, and then we were redirected right here.

00:08:12 All the events are being tracked right here at the bottom, so we have a user click, and then what exactly that user click achieved.

00:08:19 Okay, that's great.

00:08:21 And we can track many more things, such as the breadcrumbs to see the full user journey right here, how the navigation happened,

00:08:29 more user clicks, and then once again, a re-navigation.

00:08:32 At any time, you can see the console that the user was seeing at that time, which is super helpful.

00:08:37 You don't have to ask them for any screenshots.

00:08:40 You can also see the network tab right here.

00:08:42 You can see the errors and then the entire trace, which we have seen not that long ago.

00:08:48 This is great.

00:08:49 There's also the accessibility, which is a new thing currently in alpha.

00:08:54 This helps you with button names and image attributes, but I think you get the idea.

00:08:58 Like you can literally see everything that is happening in your application and not just see it in real time by browsing this dashboard.

00:09:06 The thing is that you'll be getting emails and notifications whenever you like and whenever real issues happen so that you or your team can quickly fix them.

00:09:15 We can also check out some of the other features, such as performance.

00:09:19 And here you can see the performance score of your entire application.

00:09:22 For you, this should be significantly better, or maybe it's still loading.

00:09:25 For me, this is a collection of many different applications.

00:09:29 If I switch it to last 24 hours, you'll be able to see much more information right here.

00:09:34 There's also a thing for user feedback where you can add a little chat window at the bottom right where you can collect that feedback.

00:09:40 And there's also things such as dashboards where you can see more information about what's happening on your application.

00:09:47 The LCP and FCP page load times and top issues over time.

00:09:53 But hey, how do we track some of the live features that we have added to our application?

00:09:58 Well, let's first trigger some.

00:10:01 I will enter some text right here and I will try to add one floating comment right here saying floating comment.

00:10:10 I will also try to mess with that comment a bit more by adding some kind of emojis and replying to this thread.

00:10:17 And I will also add one regular comment on the right side.

00:10:21 So regular comment right here.

00:10:25 And I will mark it as resolved.

00:10:28 So now, let's see what's happening on Sentry's side.

00:10:31 Now, if you go back to the traces part of Sentry's dashboard, you'll see a trace root that says forward slash documents,

00:10:39 forward slash, and then an asterisk here.

00:10:41 I think this is the one that tracks all the happenings on our editor page.

00:10:46 So if you go here, you'll see a lot of things happening.

00:10:50 The starting ones right here are from when we first created this document, but the ones below that you see here on the right side are the new events that

00:10:59 we're making.

00:10:59 For example, if you click on this first HTTP server one, and I can enlarge this just a bit, and if you scroll down, you should be able to see a replay

00:11:10 of what this trace is all about.

00:11:12 And this one specifically was about us typing text in the form.

00:11:17 So that was an event.

00:11:18 Then after that, we can go a bit down to some middleware event right here.

00:11:23 And if you scroll down, you'll see that this one was regarding adding a LiveBlocks floating comment.

00:11:29 So you can see here that we expand it, we type something in, and we submit it.

00:11:34 If I go to this HTTP server post with Documents ID right below the original middleware Next.js, we can see the actual replay.

00:11:43 But even more than that, we can see the breadcrumbs that led to this trace.

00:11:47 And you can see exactly what is happening.

00:11:49 LiveBlocks is calling the API LiveBlocks room to get it.

00:11:54 And this gives us access to the comment that we just posted.

00:11:57 You can get pretty deep into this stuff.

00:11:59 But that's something that you can explore on your own.

00:12:02 This truly is a dev tool that will help you make your apps enterprise ready, secure, testable, and without any errors.

00:12:09 I just wanted to show it to you.

00:12:11 So if you want to, you can then test it further on your own.

00:12:14 With that said, we can resolve these comments and we can go back to our application to focus on the thing that I know you've been looking forward to.

00:12:22 And that is the share model alongside all the functionality that we need to implement to make the sharing work.

00:12:30 This will have a lot to do with permissions, with the editing access, viewing access, and so much more.

00:12:36 So let's make it happen.