00:00:02 Now, just before we start implementing that global state that allow us to improve the performance of our application and finally start testing some of

00:00:10 these server actions and backend calls that we implemented, I want to take five minutes to implement a tool that'll save us hours of time later down the line.

00:00:20 And the tool is called Sentry.

00:00:22 They recently implemented Seer, a debugging agent that knows why your code sucks.

00:00:27 But in other words, Sentry is an application monitoring software considered not too bad by 4 million developers.

00:00:35 And the best of all is, it doesn't just work for web applications, but also mobile.

00:00:40 In the description down below, I left a special link that'll allow you to sign up and see exactly what I'm seeing so you can follow the setup properly.

00:00:48 And alongside the way, you'll also get 50,000 free errors with the JS Mastery code.

00:00:54 So just head over here and create your account.

00:00:57 Once you sign up, you'll be redirected to your dashboard.

00:01:00 There's a lot of stuff to explore here, but first we gotta hook up Sentry to our project.

00:01:05 So, what better way to do it than to check out the docs?

00:01:09 Thankfully, Sentry has dedicated docs for React Native applications, and there's a special expo setup, and I'm super excited as,

00:01:18 as of recently, session replay is now generally available for mobile devices too, not only web.

00:01:25 So let's go over this setup and let me teach you how we can set up Sentry with your React Native application.

00:01:32 In this case, we'll go with the automatic install using the Sentry Wizard to automatically set everything up.

00:01:40 So let me just copy this command, open up my terminal right here and paste it.

00:01:45 mpx add sentry forward slash wizard add latest dash i react native.

00:01:50 Press Y to install the package.

00:01:53 Now it's going to say that you already have some files right here.

00:01:56 That's totally okay with me.

00:01:57 So we can just continue anyway.

00:01:59 It's now installing the sentry package and it's asking you whether you want to use sentry SAS or self-hosted.

00:02:07 In this case, I'll go with Century SAS, century.io, and it'll ask you whether you already have an account.

00:02:14 I'll say yes, of course, because we just created one and we want to authenticate with it.

00:02:20 So in the browser, it'll open up a new selection of your project once you authenticate.

00:02:26 And you can then choose whether you want to take some of the existing projects or you want to create a new one.

00:02:32 For this one, I'll create a new project and call it jsm underscore react native food ordering and click continue.

00:02:42 Once you do that, you'll be able to return to your terminal to complete the setup.

00:02:45 And it's going to ask you whether you want to enable session replay.

00:02:49 So that's going to be a strong yes.

00:02:51 I was waiting for a long time to have this enabled on mobile devices.

00:02:55 It's going to ask us, do we also want to enable the feedback widget?

00:02:59 I'll say yes to that as well.

00:03:00 And it just auto applied the changes and even added a button that will trigger our immediate error.

00:03:07 So it says the snippet will create a button.

00:03:09 When tapped, it'll send a test event to Sentry.

00:03:13 After that, you can check out your project issues here.

00:03:16 So let me actually click on it immediately to open it in the browser.

00:03:19 There we are.

00:03:20 It looks like there are no issues yet.

00:03:23 So now once everything is set up, let's go ahead and copy this snippet so we can add it to our application and head over into app,

00:03:32 tabs, and then layout.

00:03:34 And set is authenticated to true.

00:03:37 Refresh by pressing R in the other terminal and you'll be redirected to the home screen.

00:03:44 Then head over to tabs, index.tsx and add that button that throws an error that will be captured by Sentry.

00:03:52 This way we'll know whether Sentry is working or not.

00:03:55 So right here below the list header component, we can also make use of a list footer component that accepts a callback function.

00:04:06 And the only thing we want to return within here will be that button with a title of try.

00:04:12 On press it'll execute an error and then we can close it.

00:04:17 Make sure to import the button component from react native and also make sure to import everything as sentry coming from.

00:04:28 add sentry forward slash react dash native.

00:04:32 Perfect.

00:04:33 Let me also organize these imports by internal and external so it makes a bit more sense.

00:04:39 There we go.

00:04:40 And now at the bottom, you should be able to see a button that says try if you scroll down.

00:04:46 Here it is.

00:04:47 As soon as you click it, It seems that nothing happened, but if you head back over to your Sentries dashboard, you'll see that an event was received.

00:04:56 So you can either reload or say, take me to my error.

00:05:00 And here you can see all of the information about this error.

00:05:04 You can even see the device that I'm using, iPhone 13 Pro Max.

00:05:09 You can see my operating system, iOS 18.6. You can see that it was done in development and with JavaScript.

00:05:17 You can see that the event happened two minutes ago.

00:05:20 You can maybe rate it as a high priority event assigned to a specific developer.

00:05:25 What matters even more is that we get an entire stack trace of this error saying splash module internal maybe hide async is not a function.

00:05:34 Okay.

00:05:36 And then you can see how it happened through a trace preview.

00:05:40 and more information about this error.

00:05:43 Now, the reason why I and so many other developers love using Sentry is because, let's be honest, if a user comes upon an error on your site,

00:05:52 they're not going to give you any context or details.

00:05:55 But here, you can get so much data about the error and you and your other developers can easily go ahead and just fix it.

00:06:02 And, of course, how could I not talk about Sentry's new feature, which is called Seer, which allows you to explore potential root causes and solutions.

00:06:11 So just click this button right here, find root cause, and enable Seer, which is Sentry's AI agent that'll help you troubleshoot and fix those problems

00:06:20 even faster.

00:06:22 So I'll go ahead and enable it, and then you'll have to configure the repos that Seer can have access to.

00:06:27 So I'll click configure repos, and you'll need to add a new repo by clicking manage repositories.

00:06:34 by adding a new repository to start tracking commits, head over to GitHub configuration, click add installation, and then here you'll be able to add your organization.

00:06:46 Or if it doesn't exist yet, just go ahead and connect it, click install, and it'll be right here.

00:06:52 So you can start adding your first repository.

00:06:55 In this case, it'll be food ordering.

00:06:57 So try to find it and add it right here.

00:07:00 But of course, you have to give Sentry access to it through a couple of screens that I was just showing you about a minute ago.

00:07:07 So now Seer has access to the food ordering application and we can head back to using it.

00:07:14 So just click working repos, add repo and select food ordering.

00:07:18 This is also a perfect opportunity to turn it on for our entire course platform.

00:07:23 I've been waiting for Seer for such a long time, so glad it's finally here.

00:07:27 And now Seer will be able to create an analysis of all the incoming issues and it can also provide automated scans and fixes.

00:07:36 So if we head back to where we were on the error that we triggered, oh, it looks like I was in another error that got triggered.

00:07:43 So it wasn't just the default one.

00:07:45 Interesting.

00:07:47 For this one, we have even more information.

00:07:49 So now if you click find root cause, since we have enabled the repository access, we can now unleash the automation.

00:07:56 So let's just enable it by saying automate issue fixes, and you can choose how aggressive you want it to be.

00:08:03 You can make it work only on the most actionable issues, or maybe all issues.

00:08:08 It's totally up to you.

00:08:09 For now, I'll automatically run it for moderately actionable issues.

00:08:13 And now Seer will scan all of our issues and highlight the ones that are likely to quick fix.

00:08:18 So I'll say star the recommended view, and here's what Seer says.

00:08:23 It says, what happened?

00:08:25 Button on press triggered an error in React's natives pressability JS.

00:08:32 The core issue is missing function in a splash module.

00:08:35 In the trace, other session issues also point to splash module functions being undefined, specifically internal prevent auto hide async and internal maybe

00:08:45 hide async.

00:08:45 Initial guess is that the splash module may not be properly initialized or linked in the React native environment.

00:08:52 leading to its methods being unavailable.

00:08:54 This is super useful and just allows me to go ahead and fix it immediately.

00:08:59 We'll explore it later on on a couple of other issues.

00:09:01 But now back to the app, let's remove this button that triggers a fake error, and instead, we'll head over to our sign-in page.

00:09:11 Here, we'll manually capture an event using Sentry.

00:09:14 For example, if the sign-in fails.

00:09:17 So right here under Catch, alongside just alerting an error, We can also capture it by Sentry.

00:09:24 So I'll say Sentry and make sure to import everything as Sentry coming from Sentry React Native.

00:09:32 And I'll say sentry.captureEvent and I'll capture the error event in this case.

00:09:39 Now, if we head back over to our tabs layout and turn the isAuthenticated to false so we can see the sign in.

00:09:47 Now, before I go ahead and test it out.

00:09:49 I can finish this installation process by saying, yes, I have successfully sent a test event, which means that everything is set up.

00:09:56 So now I'll try to log in once again with my credentials, but keep in mind the session is currently active.

00:10:03 So we should get an error saying that we should not be able to log in two times.

00:10:08 So I'll click sign in.

00:10:10 We get an app rate exception.

00:10:11 Creation of a session is not allowed when a session is active.

00:10:16 Okay, we knew that, but now imagine if it wasn't us that got that error, but some of our users.

00:10:22 And if it weren't for Sentry, we would never be able to know that it ever happened.

00:10:26 But right now, if you head over to Issues, check this out.

00:10:31 We have an unlabeled event.

00:10:33 So what do we know about this error?

00:10:36 Well, as before, we're getting back all of the information about this error, and we can see that the error happened when trying to make a request to account

00:10:45 session's email, where we got a 401 error.

00:10:48 If we open up Seer to find the root cause, it says that app triggers 401 unauthorized error on AppRite API calls indicating authentication failure.

00:10:58 The authentication token used for AppRite requests may be expired, invalid, or missing.

00:11:04 Perfect.

00:11:05 This makes a lot of sense.

00:11:06 And then we can just archive it or mark it as resolved.

00:11:10 You can now go ahead and add sentry event capturing throughout the entirety of the application that we have so far and in the future.

00:11:17 maybe for the signup, for adding items to the cart, for the layouts, whatever it is, you can track it using Sentry.

00:11:23 And this is just the tip of the iceberg of how Sentry can help.

00:11:27 Right now we have limited data on Sentry because we haven't yet finished our application.

00:11:32 So to get to that, first let's build more features and then we'll revisit Sentry from time to time.

00:11:37 In the next lesson, let's focus on implementing that global store that allow us to track the states across the entire application to improve performance.