
No Comments Yet
Be the first to share your thoughts and start the conversation.
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
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.