00:00:00 Typically, healthcare applications have to be incredibly secure because they're holding patient data, very confidential data.

00:00:08 And they also have to have a very high uptime, meaning they always have to work because if they don't work, the hospital is a mess and doctors don't know

00:00:17 what they're doing, right?

00:00:19 So for that reason, I'll teach you how to add Sentry to our application so we can monitor the bugs as they happen and fix them immediately.

00:00:28 And of course, after that, we'll also add support for SMS notifications.

00:00:33 With that said, Let's go ahead and make our app more robust and enterprise ready.

00:00:39 To get started with Sentry and to be able to follow along and see exactly what I'm seeing, click the link down in the description and you'll be redirected

00:00:47 to this landing page.

00:00:49 Next, get started.

00:00:51 Here, you'll be able to enter some information or just sign up with Google or GitHub.

00:00:56 As the organization name, you can enter JS Mastery and you can choose any kind of data storage location, depending on your location.

00:01:04 And let's continue.

00:01:06 We'll be greeted with a very nice looking onboarding setup.

00:01:10 From here on, you can just click start.

00:01:12 And if this is not the page that you're seeing, it's possible that you've used Sentry before.

00:01:17 So in that case, just update your URL to include forward slash onboarding.

00:01:22 And then you should be able to see this page as well.

00:01:24 That's going to look something like this, a URL forward slash onboarding.

00:01:30 Great.

00:01:31 Let's click start.

00:01:32 And now we want to choose between different frameworks.

00:01:35 In this case, we'll use Next.js and configure SDK.

00:01:39 Now we want to install the Next.js SDK.

00:01:43 So let's copy this command and go back to our code.

00:01:46 In my second terminal, I will just paste the command that just copied.

00:01:51 And this will open up the installation process.

00:01:53 So just click why to proceed.

00:01:56 It's going to ask us a couple of questions.

00:01:58 The wizard will create a couple of files.

00:02:00 Do you want to do it?

00:02:01 Yes, we want to do it.

00:02:02 And we'll be using Sentry SaaS in this case, so you can just press enter.

00:02:06 And we do have a Sentry account, so you can press yes one more time.

00:02:10 This will ask you to authenticate.

00:02:13 Once you do that, you can close it and you can select your Sentry project.

00:02:18 In this case, I'll press enter to select this one.

00:02:21 And now it's going to install all the necessary dependencies.

00:02:25 Sentry is now asking us, do you want to route Sentry requests in the browser through their Next.js server to avoid ad blockers?

00:02:32 And this is a very cool feature, but in this case, we're going to skip it as it's not needed for our specific application.

00:02:38 Do you want to create an example page?

00:02:40 Let's say yes.

00:02:41 Are you using a CICD tool?

00:02:43 And we can say yes, as we're using Vercell.

00:02:45 And above, they give us an auth key.

00:02:48 So we can go ahead and copy this auth key as we might need to use it later.

00:02:52 But for now, we can say, did you configure it?

00:02:54 We can say.

00:02:55 Yes.

00:02:56 And this is it, successfully set up your Sentry project.

00:02:59 Just very quickly, I'm going to head over to our .envs.local and I will just paste this key right here for now, just so we don't lose it in case we need

00:03:09 it later on.

00:03:11 Great.

00:03:12 So now we can validate our setup by restarting our dev environment and visiting the Sentry example page.

00:03:18 So let's do just that.

00:03:20 I will press control C to stop it from running and then run MP and run dev one more time.

00:03:25 And notice that in our code base, Sentry has created a new page for us, Sentry example page.

00:03:34 So now given the Next.js is file-based routing, we can visit that page in the browser.

00:03:40 And the only thing that it's doing is it's saying, hey, break me, please.

00:03:44 You'll notice that once we click this button, it will send out an error, which then we'll be able to track on the Sentry's dashboard.

00:03:53 So let's go back, open up localhost 3000 and go over to sentry forward slash example forward slash page.

00:04:02 And there we go.

00:04:03 Sentry gets started by sending us a sample error.

00:04:06 Let's throw it.

00:04:09 There we go.

00:04:09 The only time when you purposefully want to break your application.

00:04:12 And you can see sentry example frontend error.

00:04:15 The only reason why we're doing this is so now we can see if the sentry has been connected and at the bottom, you can see the error has been received and

00:04:24 the connection has been successfully made.

00:04:27 So you can take us to our error.

00:04:30 How did you hear about us?

00:04:31 Well, if you get this window, you know what to type in.

00:04:34 JSMastery.

00:04:37 Okay, great.

00:04:38 So now we can see a lot of details about this specific error and we can see this nice pop-up telling us a bit more about how it works.

00:04:46 I know there's a lot of stuff here, but I'll show you how it all works.

00:04:50 First of all, we can see that an error has been triggered on the century example page and we can see that it is an unhandled century example front-end.

00:05:00 error.

00:05:00 All the information about the error is right here, such as the browser that made it, the IP address of the user, the environment,

00:05:08 the URL, everything you might need to solve this error in the future is right here.

00:05:14 I mean, just imagine reaching out to your user and asking them for all of these details.

00:05:19 Most of them are not even technical, so they cannot provide you with the answers.

00:05:22 Just a pain in the ass.

00:05:24 But with this, you also get a video.

00:05:27 I mean, check this out.

00:05:29 You can see the video of me making that error and exactly what I was doing on the screen when the error happened.

00:05:35 Now, a pretty cool thing here is that all the characters and numbers are blurred out to protect the user's privacy, but we still get the general idea of

00:05:45 what the user was doing.

00:05:46 Another thing that is pretty cool here is that we get all of the details from the console, so we can properly debug it.

00:05:53 And even some crazy stuff like the operating system the user was using, the device, the browser, and even more.

00:06:00 A lot of stuff is here.

00:06:01 So now...

00:06:02 That's basically it.

00:06:03 That's all that you had to do to successfully connect Sentry.

00:06:07 You can even delete this Sentry example page as we don't need it anymore.

00:06:11 Sentry created some config files for you.

00:06:13 And as you saw before, it all works perfectly.

00:06:17 You can call it a day here.

00:06:18 You don't necessarily need to do anything else besides visiting Sentry's page from time to time and checking if you have any errors.

00:06:26 And not even that, they're going to send you an email as soon as the error happens.

00:06:30 So when somebody breaks your application, you can attend to it as soon as possible.

00:06:35 But if you'd like to learn a bit more, there's a couple of other things we can explore on the Sentries dashboard.

00:06:41 Like just recently, they introduced the traces and the metrics.

00:06:45 So let's check it out.

00:06:47 Traces provides you with a very useful view.

00:06:50 It lets you search for individual spans that make up a trace linked by a trace ID.

00:06:56 And of course, there's the docs page if you want to learn more.

00:06:59 So in simple words, it traces the request from its beginning since it's born till it dies or achieves its purpose.

00:07:08 So we trace it from the frontend to the backend and maybe even then back on from the backend to the frontend in case some additional action is created

00:07:17 based on that request.

00:07:18 You'll be able to see exactly in the path where something went wrong and then you'll be able to fix it.

00:07:24 Like in this case, we have this century example page error.

00:07:28 It lasted for 2.36 seconds.

00:07:31 And you can see everything that happened on that request, which is super helpful when figuring out how to debug this specific error.

00:07:39 We can also explore this further by making an additional request from within our application.

00:07:44 So if we go back to our application, I think it might be good to go back to the patient side of things.

00:07:50 to make a new appointment.

00:07:52 Back on Localhost 3000, I'll create a new account, and I'll also go ahead and proceed with filling out all of these details one more time.

00:08:00 I'll speed that up for you, but you can test it out on your end as well.

00:08:03 There we go.

00:08:04 Most of the details have been filled out, so I think we're good.

00:08:07 Let me just add the insurance policy number, and I think these are not necessary.

00:08:13 Let's click get started.

00:08:15 Oh yeah, and we need the address to be more than five characters.

00:08:19 Let's try it one more time.

00:08:21 Get started.

00:08:22 This added us to our database and now we can also create a new appointment.

00:08:26 So let's say my leg hurts and let's try to create it.

00:08:31 There we go.

00:08:32 We already know how this flow works.

00:08:34 And after some time, you should see new traces of requests being made right here.

00:08:40 So if we scroll a bit down, we can see the timestamp.

00:08:43 And if I reload, you can see that some of these are very recent, such as this one right here.

00:08:50 Patience, new appointments, success.

00:08:53 If we expand it, you can see exactly what was happening.

00:08:57 We navigated over to Patients, New Appointments, Success, and we can see that everything succeeded to make it happen.

00:09:03 If something broke, we would be able to see exactly where did it break.

00:09:09 I hope you can see how useful this is already.

00:09:11 Now let's also check out the metrics.

00:09:14 Metrics allow you to track and solve what matters.

00:09:17 You can visualize different data points and track things like processing time, checkout conversion rate, or user signups.

00:09:24 So this is very important when it comes to tracking conversions and funnels.

00:09:29 So let's give it a shot.

00:09:30 I'll click set up custom metrics and it'll give us the installation steps.

00:09:35 We have already installed Sentry within our application and the SDK has been configured as I have showed you before.

00:09:42 It looks something like this.

00:09:44 So the only thing we have to do is put the metrics functionality to use.

00:09:49 They allow us to add different types of metrics, such as counters, sets, distributions, and gauges.

00:09:55 They're all available under century.metrics namespace.

00:09:59 They provide a couple of examples, such as counter, where you can count up different clicks.

00:10:05 Distribution, which is useful for tracking some kind of times, like the time it takes to load a component.

00:10:11 different sets to add Jane to a set of users that viewed that page, and gauges where you can gauge tracking CPU usage or similar.

00:10:20 In this case, I'd like to put the set to use that would allow us to track the number of users that viewed a specific page.

00:10:27 And then out of that, we can create a funnel to see how many users have created a profile, then how many have proceeded to fill in their account information.

00:10:37 Out of those, how many have actually created an appointment, and finally, how many have seen the success page.

00:10:44 And as they say here, it takes about three minutes for the data to appear in the Sentry UI.

00:10:49 So let's copy this example of sentry.metrics.set.

00:10:54 And we can go back to our code.

00:10:56 The first page on which we'll implement this feature is going to be the page where we register a user profile.

00:11:02 So that's going to be a register user ID page.

00:11:07 This one right here.

00:11:08 And here we can paste this sentry metrics.

00:11:11 Of course, we need to import sentry.

00:11:13 And the way you do that is by saying import everything as sentry from at sentry forward slash next.js.

00:11:22 And just by doing this, it should properly add this to the set.

00:11:27 So the way that a set works is if you hover over it, first you add a value to a set metric, which must be a string or an integer.

00:11:36 First is the name of that set and then is the value of the set and then you can pass additional data as well.

00:11:44 In this case, they provided us a very simple example where we're adding Jane to the user view.

00:11:50 That's the only thing we're doing.

00:11:52 Oh, and how convenient this is.

00:11:54 We have our user right here.

00:11:56 And if I'm not mistaken, that user has a name.

00:11:59 So we can say user.name right here and replace Jane, taking the real name from our application.

00:12:06 This way, we'll be able to add our user to a set of user view, which will allow us to track how many users have viewed the registration page.

00:12:17 So it might make sense to say user view register.

00:12:23 Great.

00:12:24 So now we can keep up with the rest of the flow and track different metrics across other pages as well.

00:12:30 So I will copy these two lines of code and we can navigate over to the second page, which is the appointment page.

00:12:39 So it is the user ID, new appointment.

00:12:43 And we can basically just paste what we copied from here.

00:12:47 That's going to be import century.

00:12:49 Then finally, at this point, we're also getting a patient, not a user this time.

00:12:55 And I do believe that a patient should also have a name.

00:12:58 So I'll just say patient.name.

00:13:01 And this is going to be a user view on the new appointment.

00:13:05 So we can say user view, new appointment.

00:13:11 And we'll duplicate this one last time to track the user through the funnel when we reach the success page.

00:13:18 So if we scroll up to the success page and paste what we have, we can import Sentry one more time, and then we get the appointment ID.

00:13:28 So in this case, we're not grabbing the user, but I do see that we do have a user ID here.

00:13:34 So it might not be bad to just quickly grab it because we already have a function done, getUser by the user ID.

00:13:41 So if I just paste this and we import the getUser function, we can now say user.name here as well and modify the set we're adding our user to.

00:13:53 That's going to be user view, appointment, Success.

00:13:58 Great.

00:13:58 So now we can try it all out and hopefully in a couple of minutes, we'll be able to track these metrics.

00:14:04 Going back to our application, I am on our localhost 3000. So let's go ahead and fill out these values one more time.

00:14:11 This time we'll have Jim at JS Mastery.

00:14:14 So we can also give Jim his own email.

00:14:18 And we can also give him his own phone number.

00:14:21 For now I'll put a fake one, but later on we'll test out the SMS functionalities as well.

00:14:26 And let's click get started.

00:14:29 First step, tracked.

00:14:31 Next, we'll continue with entering Jim's information.

00:14:34 So I will speed this process up for you.

00:14:37 And you can also test this out on your end as well.

00:14:40 There we go.

00:14:41 I went ahead and filled out all the information.

00:14:45 So now that is looking good.

00:14:46 We also have a thumbnail here for the Dev Career Accelerator course, which I recently released on jsmastery.pro.

00:14:53 If you don't know what it is about yet, I would highly recommend going to jsmastery.pro to check it out.

00:14:59 With that said, let's click Get Started, which should bring us to the next page.

00:15:04 Oh, after I entered the correct phone number.

00:15:06 There we go.

00:15:07 Good to know that the validation is working.

00:15:10 Now, we can create a new appointment.

00:15:12 I'll choose Evan.

00:15:13 And this is a pretty cool thing as well.

00:15:15 You could use metrics to actually track the number of people that each doctor has been selected.

00:15:22 So you can maybe track it and then give them a raise.

00:15:25 Who knows?

00:15:26 But there's so many ways where you can use centuries metrics.

00:15:30 Maybe you can also use it to track the most popular times in a day that have been selected for appointments.

00:15:35 Next, let's enter a reason for appointment.

00:15:38 Let's say something like, I'm sick.

00:15:42 And let's create the appointment.

00:15:44 Immediately after, we are redirected to the success page.

00:15:48 Great.

00:15:49 Now I am back on Sentry's UI and I will reload the page to see if any metrics came in already.

00:15:55 And it looks like they have.

00:15:57 This is great.

00:15:58 So they give us some quick tooltips to let us know how we can work with these metrics.

00:16:02 But already, this is great.

00:16:04 We can track the user view, which is exactly what I wanted to do.

00:16:08 And we can see how a user is moving through different locations.

00:16:13 I think what we want to track is the users that have been added to a set.

00:16:18 And I don't see that data yet, at least not with our own sets.

00:16:22 So we might need to wait a minute or two more to be able to see it.

00:16:25 I paused the recording for a couple of seconds and check this out.

00:16:29 Alongside the basic user view, we also get three custom sets right now.

00:16:35 We get the user view register, the user view new appointment, and user view appointment success.

00:16:41 So let's put them to use.

00:16:42 I'll click user view register, and I'll add a second metric, which is going to be user view new appointment, and then finally the user view appointment success.

00:16:54 And here you can do an aggregate, which is going to be the count in this case, and you can group by different things, filter by tags,

00:17:01 and do so much more.

00:17:02 And then you can see everything right here.

00:17:05 So we can see that all three of these are bringing the same number, one, because one user has completed all of these things.

00:17:12 What we can do next is I can go to add equation, and I can do some math with those.

00:17:18 You can see those letters right here, A, B, and C.

00:17:22 Now, I can say, for example, A divided by B.

00:17:27 So, to calculate the conversion rate, you can think of it like this.

00:17:30 Let's say the two people come to the register page and then one person proceeds to the new appointment page.

00:17:37 That is basically 50%, right?

00:17:40 So what we have to do is say B, so one person visited, divided by two that were on the first page.

00:17:46 So that's B divided by A.

00:17:48 And you would get 50% in this case, or in our case, you're getting one because all of the users have proceeded to go through the entire flow.

00:17:57 You can play with this a bit more, but I think you get the idea.

00:18:00 You can track different things in your application.

00:18:03 And you can also add this to your dashboard.

00:18:06 So you can add it to a general dashboard and open it there.

00:18:10 There we go.

00:18:10 And maybe we needed to give it a better name, but here you can see the count of the users who proceeded to the next page.

00:18:17 Right now it is one, which means 100%. Great.

00:18:22 So now you know how to use the two newest features from Sentry, Traces and Metrics.

00:18:28 Let me also show you some other cool stuff.

00:18:30 We already talked about Replace.

00:18:32 Super cool.

00:18:33 You can enter a specific user screen and see what they were doing on your application.

00:18:39 You cannot see the numbers and letters, which makes sure that you cannot see their personal information, such as the patient history or the credit card

00:18:48 numbers or stuff like that.

00:18:50 But you can see everything related to what they're doing, such as the navigations, consoles, network, and even the errors that they experienced.

00:18:59 The discover tab is pretty cool as well, as it allows you to see what your users are doing on your app and which kind of transactions they're triggering.

00:19:08 Insights is new and pretty cool as well.

00:19:11 You can look into the requests, queries, and so much more, but I actually want to take you over to performance.

00:19:19 Under performance, you can see how your app behaves.

00:19:22 For example, on the front end side, we can see which images were very hard to load and we can see which requests take the most time.

00:19:30 On the dashboard side, you can see an entire dashboard of different metrics to know what's happening in your application at all times,

00:19:38 such as the number of errors, issues, and this new metric that we added.

00:19:43 And also, I like this one, overall user misery.

00:19:47 which basically stands out for how many errors are your users experiencing.

00:19:52 Overall, Sentry provides you with a suite of tools to make sure that your app runs properly and is enterprise ready.