Using Sentry with Next.js for automatic bug tracking

in this video we will look at Sentry Sentry is an app monitoring platform which allows you to track bugs once your application is in production your users won't report you most of the bugs they encounter and it's your job to track down the bugs and fix them Sentry alerts you whenever there is a error in your application while it's in production for example if your app throws any kind of error it will show you in the dashboard and it will show you the exact console messages which have happened and the exact error so that you can track down the bug and fix it in time so in this video we will look at the Sentry documentation and how you can easily set it up in an xch application and use it okay so we are at the sentry.io homepage and this is how it looks it says code breaks I like this animation fix it faster don't just observe take action the only app monitoring platform built for developers that gets to the roote cost of every issue I don't know if it's the only app monitoring platform I think versus also does something like that but yeah I think it's pretty cool so yeah it shows a lot of different features um mostly it's like showing the error where did the error exactly occur and uh yeah I think you should scroll down this and uh you will get all those issues in a dashboard I I don't know where where it went yeah in a dashboard like this where you can take action and you can observe the error and you can take necessary actions against them okay so let's create an account by the way Sentry is open source and you can also sell Force Sentry but in this video we will just going to use the Sentry SAS and we're just going to set it up using this so let's go ahead and sign in you will have an option to sign in using GitHub Google and stuff but I have already signed in so it should take me to my dashboard perfect now it will say you need to have at least one project so let's create a new project I already have one but I deleted to show you how it's show how it's done from the start so in this video we are going to use next years but if you're using something like V you could use react but it re react or if you're using something like Astro uh there was an astro I don't know why it's not here but I'll show you it's in the documentation but we can click next CH and uh we can have the alert frequency so if there are any alerts would you like to if if there are any errors would you like to be alerted this is a demo application I don't want my emails to get spammed so I'm just going to say I'll create my own alerts later now we have the choice about project name I'm going to say yd send next yes and the team you need to create a team when you create an account so yeah so I'm just going to create a project perfect now it will give me a command to do this but uh we are not going to follow this one I want to go to the documentation so I'll just go to docs. sentry.io and we should be presented with all of these things so I will go to nextjs yeah now we have an Rel related guides here now here you can see Astro I don't know why it wasn't there in the initial docs but you can see Astro here and there are a lot of different things they didn't have they don't specifically have wheed but I think it falls under the react category so if you're using wheed make sure you use it if you're using Remix They have a separate category so for nextjs they already have an SDK uh which allows you to track errors from Edge which allows you to track from server and basically a no server and from client so to set it up to install all the packages you just need to use this specific command and it will set everything up so let's try to do that first of all we need to create an xjs application so I'm just going to use bun because it's faster I'm just going to use bun X create next app create next app I'm just going to call it uh Sentry YT let's just leave everything to default we are using App router not that it matters you can still use Pages router I believe perfect perfect now we can just go to Sentry YT and now we can just copy the command we can just go here we can copy this command let's go back to a terminal and paste it I'm not using BX because it was giving me errors so we are using npx in this case now it's using if you are using a self hosted Sentry or you are using a Sentry SAS we using the main Sentry SAS so we are going to select that do you already have a Sentry account yes now it's going to pop up for login I already have logged in so it won't ask me to again and if you already have logged in it won't ask you either it says return to your terminal to complete your setup so I'll just close this now it's select it's asking me to select the project so the project we just created was YT centry nextjs so I'm just going to click enter sorry press enter now it's going to install the packages using bun it it should not take a lot of time so let's wait for it to finish do you want to create an example page no because we have you're going to do this from scratch and uh are you using a cic tool to build and deploy it really depends if you're using just click yes if you're typically deploying through verel you could be doing yes and it it gives you environment variable which you need to add to your versel so that everything runs smooth but uh we are just going to PR locally so we just going to hit no perfect now we can simply open the visual studio code using Code dot our vs code is here let's get it to full screen for some reason it my vs code just gets low when I use OBS side by side I need to figure out way maybe I will move to Z who knows I'll make a video on Z which is a rust based code editor okay now we are in our project now we can see see that there are three different files created Sentry client configuration Sentry Edge configuration and Sentry server configuration you do not need to change it change anything here because it's uh already taking up dat data from your project which is this URL thing and uh you can simply start working on your project so I'm just going to go into the page. DSX file I'm going to remove every single thing from here and I'm going to create a button which we are going to play extensively in this tutorial so button and I'm going to say throw an error now what we are going to do is we are just going to give a class name I'm just going to have because we using Tailwind it's going to be pretty easy so I'm just going to have P3 border two I guess it works I I think bord is white border white perfect and uh yeah now we can have a new function here uh fake API call I'm just going to call fake API call which is always going to throw an error so this is going to be an asynchronous function because typically in API calls you have an async function perfect and typically you also have a TR catch block so you have your API call here but we are not not going to make an API call we just going to simulate an API call failure so what we going to do we just going to do a throw a new error and we just going to say yeah we can just throw it like this but if you have an actual error Sentry can catch it and it can directly uh you can U send it to Sentry so you have you have caught a new error using the catch block the error is handled but how do we let let know Sentry that this error has been handled but we still want to have the logs so how do we do that so we first need to import Sentry so import Star as Sentry from Sentry nextjs perfect now we can simply do Sentry dot um I think it was capture exception and we can simply pass in the error perfect now even though you have captured the error Cent will still send that exception to Sentry dashboard now we will map the function to this button so I'm just going to say on click I hope you can see this here on click I'm just going to say what was that fake API call and since we are using a function in an on click we are going to have to use a client component so use client at the Top This is a next year specific thing if you're using beat you might not have to do this I want to go to the browser I'm just going to drag it here and and now let's let's start the server first so I'm just going to do Bev perfect now we can go to local 3,000 hello Arc would you work yeah local 3000 oops not 300 now now let's open our console to keep an eye on things I'm pretty sure nothing is going to be popping up because we haven't done any console log and we have caught there and we just sent it to Sentry but yeah let's just keep it open throughout the video so so let's click on throw an error don't worry that error already here is some grammarly error uh I don't want to remove the extension but yeah it's not related to the application I just clicked throw an error it has nothing but let's go to Sentry dashboard sentry.io not/ welcome I just wanted to go to the dashboard so this will bring us to the dashboard yeah now we have that issue perfect now the cool things about this is you can see all of the different things you can see the OS it's saying unknown R time and uh you can see where exactly the error was uh thrown so we have SRC /a/ page. TSX and fake API call function at line 10 so you know exactly where the error is being thrown so you can quickly go and try to figure out what's happening so you can also check all the tags like what browser is been using and stuff like you can even check the consoles here so it also has my grammarly console log so it's pretty handy if you have like some handy console logs it's it will also get logged here you will have all the headers as well a lot of different things about your client so now I can just click on open replay this is a very cool feature which shows you the exact clicks of a person before the error so I can just click on play and it will show that uh I try to click this and uh after clicking this I opened my uh tools command line tools but it's not going to be visible here of course but uh it just showed that I tried to click a like two times so yeah it's pretty useful if you have like different fields if you have a huge form and there's some error you know exactly what what type of behavior caused that error it's pretty useful now the thing is that I wanted to show you is very important that you don't necessarily need this the reason I have added this error because you need to catch this error because if you don't catch this error uh you cannot show an error state to your user that hey there is some error occurring it will just be nothing like there there will be an error occur and yeah so you need this catch block and since she ising catch block then you need this but in case I just wanted to show you that in case if you're not using a catch block you could simply Let It Be Right this so you could simply have a function with just a throw new error and Sentry will still catch it so error thrown from V call U without cash block without catching it I guess yeah now let's go back to a appap and let's try to click it again yeah now we have error Throne from fake API call without catching it now let's go back to our issues we need to reload it uh after we reload I'm just going to start the real time monitoring thing I I guess it's already on I just had to wait a little more but yeah it says error throne for from fake API call without catching it and it says unhandled so that means that there was no catch block to catch that exception and it was an unhandled error and we can see I hope we can see everything here yeah we can nope we can just see the H yeah we can see the consoles here perfect yeah so this is how you can do it and uh there are a lot of different things like uh if you just want to have a message here I will just comment this hold on yep now if you didn't uh if you didn't have this here with a cash block there would be no error logged and uh the error would have been just caught and it would have been called a day so yeah and now there are a few more things like uh there not just like this if you can also have have different things like Sentry dot capture you have different things like capture check-in which is a like create a crown monitor checkin and send it to Sentry which is capture event capture some manually created event and sends it to Sentry then capture exemption we of course saw you can also have a capture message capture a message event and sends it to Sentry which like you can simply have something like U um if you have some kind of special thing which you need to tell Sentry about whenever some place is being visited you can have this thing and whenever this line of code is triggered this will message will be captured and stored in your Sentry dashboard I think it's pretty cool then you also have uh user feedback so you can also have user use this function to get the user feedback from your app and it will directly appear in your Sentry dashboard I think it's pretty cool I think it has everything related to errors bugs and fixing them and uh that's why sent is good for one last thing I want to let you know that since we have the nexj application uh sorry nexj package for entry any errors occuring on either your endpoints or even your server rendered components will still be logged using Sentry so don't worry about not errors not being logging on API routes it will be get logged uh we are just using a client component because we chose the easy path of calling this function but if we are using an react server component it will still work so yeah uh that's so yeah in this video we saw how you could use Sentry to track down errors that your users are facing and how you could use it to your advantage to fix those errors in time if you found value in this video make sure you click the like button hit the Subscribe button and make sure you share this video with your friends so that they enjoy the same level of knowledge that you're enjoying right now if you have any suggestions make sure you leave them in the comments below and I'll try to implement them on this channel so yeah that's it for this video I'll see you guys in the next one bye

Channel: Atharva Deosthale

Views: 478

Keywords: programming, programmer, monitoring, bug tracking, nextjs, reactjs, react, next, automatic bug tracking react, sentry react, sentry nextjs, how to use sentry with react, how to use sentry with nextjs

Id: 0QV39qFJsc8

Length: 15min 6sec (906 seconds)

Published: Wed Jan 31 2024