00:00:02 Just before we go ahead and set up our users table, what do you say that we make our app enterprise ready?

00:00:09 Or maybe should I say enterprise secure using Sentry?

00:00:12 See, Sentry is the application monitoring software that's considered not bad by 4 million developers.

00:00:19 And it'll allow us to track all sorts of different errors when you actually bring your app to production.

00:00:25 Since I've partnered with Sentry, they decided to give you 50,000 errors to test out.

00:00:30 And trust me, that's more than you'll need.

00:00:32 So I'll leave this special link down below.

00:00:34 So feel free to create your account.

00:00:36 And then you'll need to create a new React project, like what we've done at the start.

00:00:41 Once you're there, don't follow this setup right here, where it asks you to install Sentry React.

00:00:47 In the docs, I found a special guide for the React router framework v7 for building full stack web apps with React.

00:00:55 I'll leave the link to it within the video kit.

00:00:58 So, let's go ahead and follow it together.

00:01:00 You need a Sentry account, check, a Sentry project, check, and an application up and running, check as well.

00:01:07 Let's choose what we want to use Sentry for.

00:01:10 I'll turn everything on from air monitoring to tracing, session replays and profiling, and I'll copy the command given to me.

00:01:18 Then, head over within your terminal and paste the installation command.

00:01:22 This will take a couple of seconds, and it'll get installed.

00:01:26 Next, we can run React router reveal, which will reveal some files that allow us to set up Sentry.

00:01:32 So, I'll just run that command.

00:01:35 And now we can see two new files created for you right here within the app.

00:01:39 Entry Client and Entry Server.

00:01:41 Next, let's do the client-side setup.

00:01:43 The only thing you have to do is just copy this file from the docs.

00:01:48 I believe Sentry has already taken the DSN, the IDs, and the pro...

00:01:54 and everything regarding your projects directly from your application.

00:01:58 If not, make sure that it did that by making sure that you have some IDs or links right here at the top.

00:02:03 Then, copy it and override the client.dsx with this new one that you just copied.

00:02:09 Here we enable the replay integration as well as the browser tracing integration.

00:02:14 Now we'll need to update our root.tsx to report any unhandled errors from our error boundary.

00:02:22 So copy the import statement and paste it right at the top of your root.

00:02:27 And then also add this century capture exception within the lsif of our error boundary.

00:02:34 That'll be right here at the bottom, error boundary.

00:02:38 And here we have the else if.

00:02:40 So alongside just reporting it, we want to allow Sentry to capture it.

00:02:44 Now let's scroll down and let's do the server-side setup by copying this instrument server.mjs file.

00:02:52 So let's go ahead and create it within the root of our application.

00:02:56 I'll call it instrument.server.mjs.

00:03:02 And simply paste the one that you just copied.

00:03:04 Scroll down.

00:03:05 And then we'll have to update our entry.server.tsx.

00:03:09 So head over into it.

00:03:11 That's going to be entry server.tsx.

00:03:14 For this file, we'll have to copy the import.

00:03:18 I'll paste it at the top.

00:03:20 Then you'll have to take this handle request, but you can notice that it already exists within our code base.

00:03:25 So what we can do is just, we can wrap the current handle request.

00:03:30 That'll look something like this at the bottom of the screen.

00:03:33 We can just say export default handle request, and then we can wrap it within century dot century handle request.

00:03:44 like this.

00:03:45 And now you can find where we're exporting the handle request in the first place and just remove it.

00:03:51 Rather just make it a regular function that we're then wrapping with sentry handle request and exporting at the end.

00:03:59 And then also copy this handle error part right here and paste it right above it.

00:04:06 You can import the handle error function coming right at the top from react router.

00:04:11 And the only thing that bothers me right here is that it says that sentry handle request has been deprecated.

00:04:17 But thankfully, if you scroll just a bit down, you'll see that if you need to customize your handle request, you can just get this wrap sentry handle request,

00:04:27 provide this pipe within it, and then finally export it like this.

00:04:32 So let's just enable this distributed tracing between the client and the server by adding it below this resolve.

00:04:39 So I'll head right here, find the resolve and add it right below.

00:04:43 So you can see we have the same thing here, but now we're wrapping it with this GetMetatack transformer coming from Sentry.

00:04:51 And then also at the bottom, we're not going to use sentry handle request.

00:04:55 We're going to use the wrap sentry handle request.

00:04:59 Perfect.

00:05:00 Docs are on point so far.

00:05:02 So let's continue with the updated scripts because React Router is running in ESM mode and we need to use the import command line options to load our server-side

00:05:13 instrumentation before the application starts.

00:05:15 So we'll have to update the starting dev scripts to include that instrumentation file.

00:05:20 I'll copy these dev and start commands and head over to package.json and update the dev and start.

00:05:29 Perfect.

00:05:30 And then we can set up the source maps upload by updating our Veed config.

00:05:34 So you can notice that Sentry automatically pre-populated the organization in the project for me.

00:05:39 In case you have multiple, you can select one right here and then make sure to generate the auth token as well.

00:05:46 I mean, the fact that you can do this from the docs directly is super cool.

00:05:49 Now, copy this Sentry config, head over to vit.config.ts and add it right at the top.

00:05:57 Make sure to import this type from Sentry options.

00:06:01 And now we can define this config.

00:06:03 So let me just copy this entire config part and paste it below our current one.

00:06:08 You'll notice that we have two now.

00:06:10 We're going to keep the one from Sentry, but make sure to add Tailwind CSS to it as the first plugin and add tsconfig paths right here as the second plugin

00:06:22 as well.

00:06:23 Then we have the React router and the Sentry React router and then make sure to add the SSR right below the plugins or in this case below the Sentry config.

00:06:35 If you do this, you can delete the current config and notice what's happening.

00:06:40 Here, we're actually exposing the default config and then passing it over into the Sentry React router config alongside the Sentry config.

00:06:49 Make sure to import all of these from Sentry and make sure that you have your auth token right here alongside your project and organization information.

00:06:59 If you did that correctly, you'll want to include the Sentry onBuildEnd hook in react-router-config.

00:07:05 Head over to the react-router-config, copy this entire build-end part as we don't have it and paste it after the SSR and import Sentry onBuildEnd.

00:07:16 Perfect.

00:07:16 And that's it.

00:07:17 Everything has been set up.

00:07:19 I gotta give props to Sentry for creating such a well-structured documentation page.

00:07:26 I mean, I was just able to go through it and everything worked just seamlessly.

00:07:32 Even though React Router v7 is a super new framework, they knew exactly what they were doing.

00:07:38 Sentry showed me how we can expose the entry, server, and client files so we can change the configurations.

00:07:45 and they only added the minor changes to all of these files, the minimum for what's required for Sentry to work.

00:07:52 So with that in mind, the only thing left for us to do is to verify.

00:07:56 This snippet of code will include an intentional error so that we can test that everything is working as soon as we set it up.

00:08:04 So, throw an error in Loader to verify that Sentry is working.

00:08:08 After opening this route in your browser, you should see two errors, one captured from the server and one captured from the client.

00:08:16 So, instead of copying this entire file, we can copy this error right here, throw a new error, throw them from a Loader,

00:08:23 close all the currently opened files.

00:08:25 and head over into our dashboard.

00:08:28 That'll be right here within App, Routes, Admin, Dashboard, and we'll have to add a loader.

00:08:36 So, you know what?

00:08:37 I'll just copy the entire loader, paste it right here, and save it.

00:08:41 Now, if you go back to the browser and reload the page, you'll be able to see, oops, some error thrown in loader.

00:08:48 Believe it or not, this is exactly what we wanted to see.

00:08:51 So if you head back over to your Sentry dashboard and reload the page, you'll be able to see your error dashboard.

00:08:59 And you can see that this index increased and that has been one error right here.

00:09:03 So at the top right, click view all issues.

00:09:07 And there we have it.

00:09:08 A minute ago, a new error was thrown in a loader.

00:09:12 And I mean, just take a look at the amount of information that we're getting back right here.

00:09:18 We can see when the error has happened.

00:09:21 We can see how many users has it happened to on how many occasions.

00:09:25 We can mark it as resolved or archived.

00:09:28 And we even have a replay attached to it.

00:09:31 So you can see exactly what the user was seeing before the error happened.

00:09:36 In this case, it happened as soon as the dashboard loaded.

00:09:40 But how do we know that it was actually on the dashboard?

00:09:42 Well, believe it or not, here you have the breadcrumbs of everything that led to that event.

00:09:49 You can see that the user was trying to load the dashboard data and then there was an error in the loader.

00:09:54 This actually tells us a bit more about how React Router v7 works.

00:09:58 Why?

00:09:59 Because we didn't manually make a request to the dashboard.data URL.

00:10:04 But it looks like when you try to access the dashboard page and you have a loader attached to it, it actually tries to fetch the data for that page first,

00:10:13 and then we weren't even able to get to the dashboard page.

00:10:17 So having all of this information is super useful.

00:10:21 Not really right now while we're in development, but in production.

00:10:25 Why?

00:10:26 Well, because your users will not be able to tell you this, right?

00:10:31 You're going to ask them, hey, where are you experiencing this error?

00:10:34 Why did it happen?

00:10:35 Which device you're using?

00:10:37 they will have no clue, right?

00:10:39 But here, you can just check it out.

00:10:41 The user was trying to access the dashboard page.

00:10:44 And then immediately after, we got an error in the loader.

00:10:48 You can see when the error happened.

00:10:49 Oh, and as I was explaining this to you, looks like I got this little tool tip that's going to explain it to me too, so we can go through it together.

00:10:56 So you can see this error in aggregate across all the different users as well.

00:11:01 So you know whether it's one that you should fix very soon or the one that can wait.

00:11:06 You can also narrow your focus on when this error has happened.

00:11:09 You can explore details of the error, like the context around which it happened, which is the IP address, the browser, the operating system,

00:11:18 everything that Sentry has access to, they'll share it right here.

00:11:22 Then you can compare different examples of errors, take action on it by marking it as a priority or not a priority one, or maybe assigning it to the team

00:11:32 member that you don't really like, as you don't want to fix that error.

00:11:35 And finally, you can share the updates or maybe even track it on GitHub or Jira.

00:11:41 But with that said, let's remove this error from the loader.

00:11:44 And let's also try to throw one, not from the loader, but from the client component itself.

00:11:50 So this will disallow us to see the dashboard in the first place.

00:11:53 And I'll say some error thrown in a dashboard.

00:11:57 You'll see the second there appear.

00:11:59 This is a client side error now.

00:12:01 So if you head back to the issues, you'll see that we have another error thrown within a dashboard.

00:12:07 And for this one, of course, you'll get different kinds of information because it's coming from a different context.

00:12:12 Overall, Sentry is just the go-to tool for tracking and monitoring errors in production.

00:12:18 And you can also check out Traces, which allows you to see exactly how that specific error has happened by checking out the descriptions of what was happening

00:12:28 before it.

00:12:28 There's profiles that you can implement to find slow code.

00:12:32 There's replays that allow you to see exactly what was happening on the screen before the error happened.

00:12:37 And you'll also just get a lot of quality insights.

00:12:39 like the first Contentful Paint, your Web Vitals, and more.

00:12:44 You can check it all out in the onboarding.

00:12:46 So with that in mind, let's remove this error from here, as we don't want to break our application.

00:12:52 And if you head back over here, it's like nothing ever happened.

00:12:56 But now we have an enterprise-ready error tracking monitoring system put in place.

00:13:01 So once we actually deploy this application, if something happens to it in production, we'll know exactly what happened and to how many users it happened

00:13:09 so we can act on it quickly.