Video details

Getting Started With Error Monitoring | Neil Manvar

Angular
01.18.2021
English

Neil Manvar

In this workshop, Sentry Sales Engineering Manager Neil Manvar walks you through integrating Sentry into your Angular app, step by easy-to-understand step. He’ll show you how to integrate the SDK by importing your library, then how to configure it. By the end of this workshop, you’ll be able to surface and inspect any and all errors within your app.
ng-conf is the premier global conference for the Angular JavaScript framework, offering both in-person and online events throughout the year. Focused on delivering the highest quality training, ng-conf is where careers are made.
ng-conf: Hardwired is brought to you by: - https://thinkster.io/ The best Angular and JavaScript tutorials on the web - https://herodevs.com/ Engineering and consulting by web development experts - https://xlts.dev/
Extended support for AngularJS
Follow us on twitter https://twitter.com/ngconf Official Website: https://www.ng-conf.org/

Transcript

All right, so Engy Comp is a very special to me, this is actually where I was introduced to Centry, so it's it's an honor to be presenting here and doing this workshop and let's keep this interactive, so keep asking any questions. So I hope, as Anthony mentioned this down and got it NPM installed. So we'll begin there. But I want to start with just some general information on the problem and what we're trying to solve. And then we'll delve into the technology and see how it's going to go ahead and share my scheme. All right. So what is centry you can think of there and performance monitoring for all the different platforms today? We're here as angular developers or JavaScript developers, so I'm going to be focusing on that. But at the core of it, Centry is going to tell you, the developer, that your application is broken and or slow and in the direction the right code to commit whatever caused it, give you all the context around it so that you can fix it. So I'll be taking two approaches here. I'm going to go ahead demo an application without centry an angular app and talk about how we would debug that. And then we'll go ahead and talk about what it looks like with Centry. And then and then in the bulk of this focus, implementing this angular going through step by step, which will include introducing the SDK in getting the source maps up. And I'll explain all of this step by step in in depth and as I mentioned, ask questions. So even if you don't know what source maps or anything like that, I'll explain to the best of my ability and we'll go from there. But I'm sure other folks have quite a bit to say about this subject as well as JavaScript developers. But back to the site content here. What Centry is, is application error and performance monitoring for all of the different platforms. And what we want to do is tell developers that their application is broken or slow when it is, if it is, and give them all the details around it. So if you're not using Centry on a regular application, you might find yourself looking at the log and then trying to reproduce an issue, then try to figure out what went wrong by looking at the preceding statements in the log. Let's say hypothetically here, we're debugging that type of document, not active. The second to last entry in the screen you can actually has an obfuscated stack trace. It really doesn't mean much to us. And we end up putting in debug statements, having to reproduce, having to gather more and more detail and peel back the onion and then figuring it out at the core of it. We also don't even know how many folks this is impacting and some of the larger level data and relevant stuff around this. So let's go ahead and showcase what this would potentially look like in a regular app, and then we'll go in from there. So I have my application deployed right. Here we go. So I'm going to pull up the console and let's just say we're having some errors. So if I wasn't using Centry, I would have to debug with this and go from there. And you can see clicking into this would take me into some actual code and it's not really the typescript or whatever I'm writing in as well as I don't know exactly what's going on, what happened before this and so forth. So let's see what it would look like with Centry. So here and with a demo for a non English stuff just to make my point, because we're going to integrate this into English. But here there's an error. I'm using centry. So what's going to happen is now automatically I'm going to be notified of this in just a moment. We go, I can take some action on it. If not, get into the platform and then see all the context and want to show this real quick, because we're going to go over this in depth or an angular set. But here I can see how many times it happened, how many users it impacted. The stack getting back to the original. Actionable code. All the details around what happened, all this other rich information, even the committee that caused this, so we're going to go ahead and wire this all up over the next couple of hours. And then, as Anthony mentioned, there's going to be quite a bit of wiring up. Wouldn't do, but we'll take breaks probably around every 40 minutes. I'll try to stay true to that. All right, so let's get started here first thing, so I'm going to go ahead and keep referring back to the region so I can stay on the same page Asiel. So I think someone mentioned what version of that bemusing I put in or C file here to help with that. So if you have MBM, just do and be amused and go from there. So forget and clone it and install insult. And then I have a deploy target in the package of JSON, which is basically creating the build the minified package and then running that service all the artifacts package and running against that. They'll load up on localhost five thousand by default. But you can see as I something on five thousand or something else. So hopefully everyone is here at this point and also has the code up and an editor and then we'll go from there. So let's then go to sign up and create an account. I'm going to be doing this incognito window, so I'll be trying to emulate more or less brand new, fresh user coming into the platform, which may be most of all. All right, Tontos created you. So what I'm going to do is just actually go through this onboarding, but if you want to go through the raw documentation here, you can just go into here, search angular. And go ahead and follow these directions here or go into JavaScript, which will then prompt into angular here, and this is what you're going to be interested in here specifically. So this is what we're going to do, not going to steal away my own thunder, but I'll go ahead and post this in the chat as well. OK, yes, I believe it's also linked to the README, so here I on go ahead. So I'm ready and we're dealing with an angular application here. So let's go ahead. SELEK that create that project. And now we're going to go ahead, be presented with some onboarding instructions, and you can see it's waiting for a verification event. So let's go ahead, get this all wired up and then hopefully this turns green and we'll go ahead and evaluate the. All right, so here's what I do is go ahead and install the packages I'm using. So we're going. Sorry about that dog. There we go. So we got what we've done here is we've installed the angular SDK and are tracing SDK. So our tracing SDK is we're going to implement on top of the angular SDK, which I'll show you momentarily. And what the angular SDK is going to do is hook onto any global air handlers. We're actually going to hook onto you'll see in a moment, angler's handler as a provider and then ship up there and then provide you a way to get errors and extensions up to centry. So what the model is here, and this helps picture it a little bit, is that we have an SDK sitting inside of your angular application and any time any errors happen, any time, any stuff you want to know about in regards to performance, you'll basically shoot up events into our event. Ingestion engine centry. As part of that, you're going to be alerted as necessary. So when things are wrong or when things are slow or when things are broken and you can create these alerts however you want. So very open ended alerting system in there. And what that's supposed to do is notify your team, letting you know something is wrong and probably you should stop playing badminton or doing whatever it was you're doing, writing code and address this and investigate. So at that point, you know, something is wrong and then can go into our platform, which you kind of PCA to investigate the rich context, figure out who this is impacting, figure out what went wrong and the commit that caused this assigning to the individual who's best equipped to fight this fire, who can roll forward in the shortest amount of time. So the goal here is one, we want to surface areas, we want to surface problems, and we want to let the developers know that something is wrong and then get them in the know get them all of the relevant information and back to Batman, back to Batman or back to developing code or whatever it was that you're doing. So with that being said, let's go ahead and resume once again. We've installed the Sentry SDK and now let's go ahead and get it configured. So we're going to head over to App Module right over here. I'm just going to. And let's go ahead and instrument this code, so if I go ahead. Going to do some top management here. So let's go ahead and submit this, so most importantly, we have right here first importing the packages. So let's get that done first and then after that, I already have. Taking care of so I'm just going to go into here. Go ahead and ask. So let's go step by step. What's happening here so centry to the STK, we're initializing it. The DSN is going to be the unique key associated with your project. So here is the key. And we want Eris to be shot up to Central Daddio, and here is the project. And additionally, as I mentioned, we're going to have a tracing integration to help us surface those transactions and figure out the slowdown's. And we're going to go ahead and look. So this is the setup that we need to surface areas and transactions. And at the end here, just for Democratises, I'm sending up one hundred percent of transactions. But we can do this with whatever we want. So let's go ahead and visit this here. And then second step is that we want to hook on to Anglo's air handler and make sure that we're surfacing as a suspect in this framework. So here what we're going to do is just overwrite all of the providers here, since I have a singular app and I don't have anything else here. There we go. And if we look here, it looks like. We're creating an air handler, and Centry is helping us with that here, and so dialogue is that crash dialogue. I'm sure you can turn that to false if you don't want it, but that's to enable user feedback to be attached to your issues so that you understand potentially what the user was trying to do or any additional color, depending on if you want their input, that can be turned off. And here is. The set up for the Tracy. We want this all on initialization and specified accordingly as well. So we're done here, actually. So let's go ahead and create a build and go from there. So let's refer once again back to our instructions. After we're done all of this, we're going to go ahead and run and run to play, you know, a little bit later. If you want to just look at our changes. We've done so far is out of the packages. Put in the century instrumentation. And that's it right now. And here we go, we're building again, so we'll just go ahead and wait. Till that happens and then we'll go ahead to our application, trigger those errors and see if anything was sent up and. We should then see a change of color here, change of state and go from there. So that's building right now, probably if you guys want to take a second to check your emails from your time. Up there we go, done building. Fantastic. And here, let's go into here, trigger up some errors. There we go. That's the dialogue I was talking about. Yeah, so the question is, an app must be built and deployed to run separate so you can run in dev mode and stuff, but definitely does some funny things and there will be shot up and you'll see them. But where are you going to get a lot of value out of centry is where you don't have access to the console or have access to that data. So it's real running on the clients devices. So it might be in your production environment, your environment. And so that's where your applications can be built and deployed and that's where to the surface these areas. But basically Centry is living up in the app servicing areas and any of these environments. So let's go ahead and check in here. Looks like an event was received, so let's go ahead, take me to my event, go ahead and zoom in here. So it's going to give us a product tour. I'm just saying go ahead, click through that and I'll go ahead and explain all of this as well. So we see the error type error message. How many times that happened, how many users were impacted? We can even create some ownership rules. As you see, there's the tags and the breakdowns here. This will help us understand who this is impacting. So because it was coming from other browsers, we would be able to address that there. What end endpoints, what environment, as well as what release this is coming from, which will get wired in as well. But basically any tags introduced into our system produce a heat map. We'll see the stack trace and most importantly, and we'll address this in a moment, is that this is still minified. So while this is in a nicer state than we saw before, it's still not exactly where we want it. So we'll go ahead and get that address and wired up and hear underneath. We have breadcrumbs so we can see what was happening prior to hitting the air. So some things were clicked and then there happened. We didn't even see some preceding things in the console and any other information that might be relevant to the developer or we'll go ahead and surface and we can custom attach on to anything, any of this as well, which I'll cover in a moment. So let's just take a quick look here. It looks like it's trying to fetch some things we actually because to optimistically source map this, but I'm running locally and it wasn't able to grab on to the source maps. But better yet, we want to upload the source maps to Sentry's upon ingestion. It'll get so we'll get there in just a moment. But just to recap now, what we've done so far is. And I actually got an email just now saying, hey, I got new hair and new project, but what we've done so far is we've introduced the SDK into our angular errors are being shot up. And now we're at the point where we know about our errors and we're getting alerted and we have access to this and and we can kind of go and investigate that. The staff is not as accountable as we want, but we will get there. But errors are going to be aggregated and we'll know how to centrally calculate how many users, right? That's a good question. So if you can specify user contacts using our SDK, so I'll show you in a bit, we can do that users that email. And then by that point, you need that data. Otherwise, it's by the unique IP addresses. And so that's a default behavior unless you specify user context. Yep, no problem. Keep the questions coming. All right, so let's go into here. So next thing that we're going to do now, so let's actually go back into the steps here, is get releases wired up because the release one on the SDK level, it's going to let us know that which version of our build, which we're doing, our application is broken. Right. Because that's something we want to we don't want to know that errors are happening in the last few days. We want to know that errors are happening in the last few days across this version or these two versions. Secondly, it's going to be the object within Centry, which will use upon ingestion or we'll say, hey, Ara's, come in from this version. Are there any artifacts sourced maps upload to the release within Centry that we can apply to this to get a clean stackers? So first thing's first, let's go ahead. Specify that in the SDK we'll install the CLI tool that helps us upload this. And then I've already done this for real, but we just want to specify the setting into ANGULAR or the config into ANGULAR to produce those source maps. And then we'll get them uploaded up into Centry, and that's to make files or so we'll dive into that. But one step at a time, let's go ahead and specify the release here. So I've already done some wiring up of things here, which you'll see in a moment. So what I'm going to do here is go into at module's yes, go into the top over here and just specify release. So I've already populated environment dot release, I believe. So you guys and just piggyback off of that. There we go. Then we're going to install. The Sourcebooks. For instance, central priscila and do that, reducing debt dependency. Go ahead and highlight this in English. Jason left here at your source. Not true. Go. And if we go ahead into Makefile, I'll show you how. So when we're on NPR, I'm going to play it's actually calling out to the Makefile and I'm creating a release right here. So I've got all of this stuff just populated into variables. Just call, but creating a release on that version. And the version is basically the head. So it's going to be there right there. I'm also writing this out to Vincent. So when I run in into play, we'll go ahead and do all of that and I'll commit my changes as well so you can step through this. All right. After we create the release of that, we're going to go ahead and upload the source maps. So actually, let's go ahead and comment this out and then put this in, so set up with these concrete release and output source maps and we're specifying the path to the source maps. And saying centrist releases upload source maps, so here in desk, we're going to have the source maps. So we go ahead and look into here, you can see the dots and the map. So these are pretty big files that are one line at the bottom as a source mapping URL, which points to which source map should be applied for that minified. So that's kind of how it works in a nutshell. So for those of you that are new to source maps, that's going to be how you get minified jazz into your readable atomos as your source code. So it's basically the mapping file. So let's go ahead and proceed and get this uploaded here. First, we're going to go have to create an Australian as well so that we can get these things uploaded. So let's actually do some more venturing around in Centry. So I'm going to keep these construction side by side if we go to organisation settings here. And then go to developer settings, let's go ahead, create a new internal integration, so his organization settings, developer setting, new internal integration. And let's just in. And we're going to have to specify some permissions that yourself said, release Edvin an organization, read it right already. And let's go ahead and say that. And once you say that, we're going to be given an opportunity here, right over here, and let's go ahead and export that. Label. So let's go into. Right. You know. And now in the Makefile, we're going to go ahead and make those changes to point to this project as well. So here, if we go into. Our projects see the project we created and the name of it all. You can also jump into project settings right over here. You can see the name of the project. The name of the org is going to be my company one. And you can get that from organization settings as well. So I'm going to go in here. Yeah, know. And stuff will get in here just a couple of days. There we go. So we should be good over here and just to make sure we're following instructions. We've done this. We've done this. This was done for us. We removed the placeholder set up release and called the one that's holding up Lietzau steps. We've configured and also created and configure. So as an environment variable made changes in our makefile and let's go ahead and run the build here, so I'm going to go ahead and also just commit this. Well. So. Um. It has to just persist across the shell that we're using here, so, for example, I have another token that I'm using for other things, but I'm just going to go ahead and use it this session here. So I would export it because otherwise we're just going to have to keep specifying it into and put into play over and over again. So that's why I am the expert here. So to avoid that. And it's going to be centry dash after. Entry underscore as well. Oh, so I'm going to go ahead commit this, which I did. All right. And we'll go ahead and run that build and run the play, I believe. Yep, there we go. You can see it's populating a environment of products and that's how to bring into environment. Oh, yes, I can definitely slow down a bit. I do understand a little bit finicky. And just to get a poll, is everyone over here running NPM run deployer or are we still getting the makefile configured? Happy to kind of highlight this section again, because this is honestly probably the trickiest part with uploading the source maps and making sure that we're tying all of this together by release. And we'll take a break right after this setting is all. All right. Let's check on the build. Looks like we're here, and before we trigger out any errors, let's just verify the source. Maps are uploaded here of authentication credential errors only because the experts you can get the expert that once again, otherwise you will get some four or three authentication type of error something. All right, so what we're going to do is just hop over to Central Coast region this year and let's go over the source maps over here. Fantastic. We see the release and we see the number of artifacts. Let's keep diving into gear and we see the minified and the source of that look fantastic. And the Pats need to match exactly the statures that we see in the minified on earlier. I've already done this for you. And kind of why this up to file and some of these other. But I can't start the polls in June. Do you have the poll questions? Sure. Do. Is it possible to combine state management tools? Yep, exactly. You can answer this live. You can grab onto the state also this actually a little bit later. The only thing that you want to be aware of is like attaching the entire state or something like that or the indirect state. We do have a two hundred kbps maximum and we do do some things on that stick to do some type of intelligent trimming or some some things over there. But that's really the bottom line here, is just to make sure. Oh, yeah, exactly. So in the demo, this as well, a little bit later, actually, let me just go ahead and showcase this and you can set tags on any custom context. So we go to Angular over here and then go to getting started and then configuration. Enriching events, customizing tax, you just do some septet or some tradeoffs that context, and you can specify the object and it'll be attached onto the central scope and then be Surfest with the sentry errors as well and attached. Does that address the question, Thomas and Josh? Another one. I got this from NPRM Run deploy could not determine this name, please attach. Asked did you get clone or did you download Bertrand's? You get the ER project not found. And Kevin, just to make sure that all the things are correct, what you want to use for project name is this one right here and what you want to use for organizations like this one right here. Yeah, so I think, Kevin, what maybe failing is probably the century clips that are hitting against the project stuff. I'm going to pause for a moment here. Got it. Kevin, I'll have to stick around later to check what's up there. If you can post the error message, that might help me a little bit as well. Did you by chance as well download this or clone it, Kevin? Or clone. OK, the I don't know what's wrong at the moment, I'll have to check with you a bit later. Sorry about that. All right. Thank you can help out here. All right, so let's another we verified source maps are up. Let's just go ahead and shoot up a couple of different areas. So I'm just going to go back into here. I've actually done the user context thing as well. I believe in the code. But here, I'm going to go ahead. Just shoot up some errors. And then what we should see is sort of out there. Hopefully, there we go. So let's go back in this country, go into issues over here, and we can let these roll in real time by that plus. And now here, I'm going to go ahead and just put this up in the new tab. Fantastic. So you see, it's a source app, Apple typescript, and its mapping these files and showing us the correct call stack, and this is exactly where we would want to see and we can drill down into any of these and go forever. So this of that is basically the difference here. And now I'm going to go ahead and just shoot up a few more and I'll show you what's going to happen in. All right, if we're going to hear now, we should start seeing more rolling and now they're going to be aggregated properly as well. So we use a sack race attributes to aggregate this, not everything, but we do a bunch of detection and heuristics on what is likely going to detect similar errors. And we resemble that of that. And go ahead to. Use that and group these accordingly. So here we can see it's coming from right here as to events coming from more or less the same IP addresses in the same attributes is not an interesting data set here, but we'll throw an interesting one later. So we're hitting the 40 minute mark here. I think it's a good time to take a break. And I'm going to take a look at the questions during those breaks as well. So I'm going to go ahead and just pass my screen here on where we are in terms of actual factors. And then side by side, I'll go ahead and pull in exactly where we were here. And hopefully most of you were able to keep along here. All right, let's do a how about a five minute break? All right, see you guys looks at the the forty third mark here. All right, so hopefully we're all seeing TypeScript Stack traces. And not minified secrecies, and you'll see some other things as well, which we'll address here as well later. So next, we're going to go ahead and look at a different data type, so here we're looking at is a type of a ER. Let's go ahead and look at the performance data and see what we get out of the box here within Europe. So just to recap, what we've done here in module is we've implemented and instantiated the synchronistic here. And we've also specified decreasing integration, and that's what we're going to take a look at. So let's go ahead to performance and this is just a simple, angular wrap. We just have one type of transaction here and we have a few of them. And you can see the throughput here, the 50 metrics. Ninety five metrics. Failure rate looks like 60 every time, the misery index as well. And I'll dive into some of these metrics later as they're explained. You can go ahead and highlight these tool tips here as you display any of these graphs. Go ahead and look into that data. You can also drill down highlighting and selecting a sector as well. So Head Start, any of your transactions and let's go ahead and pull this up. Now, here we're on the transaction summary page, and this is where we're going to see a lot of useful data. So here we have a duration breakdown, we can switch any of these. Perhaps as necessary, we have a nice little thing as well that even this out, but let's go ahead and look into the person percentiles of distribution and we'll get rid of Web vitals and a bit as well. That's right. Yeah. We're surfacing the Cromvoirt vital stuff. To let you know when the content, the pain and the interaction is prepared and ready. So here we go ahead highlight of any of the scenes, we can get some of those metrics, some of those drill downs. We show some of the solar transactions. We can filter through those. We'll go into those in just a moment. We can see the related issues. So this is actually we're linking the errors into the performance problems so you can investigate from there. On the right hand side, just as we had with errors, there's going to be aggregate information. So ATEX for Web vitals, looks like we're doing an OK time. You can see those earlier metrics all wrapped up the transaction aggregate level. And any of the tax introduced into the system will produce a summary and a heat map here as well. So let's go ahead and drill down into these slowdowns. And remember, this is just out of the bosso with the pated, we can see that there was an error. All of these things happened within the browser. So browser actions, all of these resource and artifacts were brought in. This is what happened in angular browser Eggland, you can even see. The routing instrumentation that we hooked onto as well, so as a developer now I would know where the time is being spent, what requests are going out, what's happening in my application and going from there. I'll show you a more involved example of this that's actually looking into a back end where you can figure out some of the other information there. But in regard to this transaction, I see exactly what happened in the payload and even the web, vital information where the time was being spent and so forth, all just with the simple SDK import and instantiate here. Next, let's go over to where battles so there's a pretty simple app, but I can drill into the web vitalism. We have F.P. first content WARPAINT So this is provided by Google, Google and crew over there. And we'll pull whatever we can from these browsers as expected. And you can drill down on this information as well. So that's a quick overview of performance, this has been used in many cases, but what we're trying to do is really give the front end developer visibility into why their application is behaving the way it is, whether it's broken and it's slow, it's one or either. And we have the alerting engine to do this as well. So, for example, if I wanted to create an alert here. I could. Open this up and discover, which is our analytics engine and create an alert accordingly as well. So, for example, if we go into performance, go into this transaction. Because then any of this data and discover to then query it and set a letter accordingly as well. So one other thing and I mentioned this is we're going to be using discover later as we'll go ahead and enable a trial, we can just do that now while we're here. So if we go to subscription, go to activate our trial, that'll give us access to all those features so that we have discovery. And that's why we're not being able to go ahead and open and discover. And this is our analytics engine where we could then do any of the querying or alerting. I'll get into learning in just a moment and the tail part of it. But just wanted to address why we're going into these dashboards and looking into the most, because this is our first time in our onboarding into this. But. Wanted to give a shout out as well. All right, so let's go ahead address where we are once again, we headed over to perform as we drill down on this transaction of you to distribute a trace. So just to recap performance here, we can see all this data drilled down. See, the transaction summaries, the Web vitals, the aggregate data on the right hand side, any of the related issues in case we want to drill down into that. And now here we have the performance data on the right hand side. There was an error associated with this. I can go ahead directly pull that up and the performance or the air date on the left hand side. I'm. Go ahead. Collapses. Collapses. Basically, this is why I was broken, and that's likely led to the slowdown and as a developer, I have that information. All right, going into the read again, now comes time for a living. So we're going to set two different types of alerts. We're going to do an issue alert and a metric alert. The issue alert will be taking to the areas into account as they're being aggregated into issues. And then we want to know when these issues get to a certain condition and we want to be alerted accordingly. Metrick alerts are going to differ in that it's taking in the overall volume and we can define in any area that we want and then thresholds that we want. And a more or less when that threshold is passed will be escalated accordingly and we can address that error. So let's go into the platform and go ahead and set some of these errors. We'll go ahead and configure the integration as part of this as well. So here I am in Centry. First, they can actually go ahead and let's configure the CELAC integration so we have a laundry list of integrations, you can do whatever you want. I want to do Slok, if you want to follow along with me. But the point being is your duty is like Microsoft teams. You want to know about your Erisman issues. So let's massage that into this project, setting our first organization settings. Let's go to Integration's. Let's go to Jack. That's not working right now. Well, I'll just. Go to alerting and cover that for now, so the two of them. Alert's. And any time you stuff in the product, you can actually just press commensurate fear, come back. They'll probably this will be as many as well to help you get where you want. But we go to alerts and we've got to be alert rules and then create a little rule. It takes us in to right here, so here we can get this name, let's say, notify me on its dislikes, on air like. Specify when you want this to occur, though, let's just say that this is seen by. Fifty happens 50 times in an hour, and it affects. Can users within a day and if that happens, go ahead and send an email to any of the individuals, the whole team, we can go ahead and configure that as necessary as well. And then you would also see any of the integration that. So here in a configured set up, let me just go ahead and show you what that looks like. Head over to Alert's. The computer rules for this project. And for example, here's a more fleshed out world where I'm reading in some of the tag attributes. So we're talking about custo context earlier, we can go ahead and read in any of that and then escalate to tragedy, escalate in the slack and go from there as necessary. The second type of alert rule that we have. Is a metric. So if we go into here. But. So this is my other experience, which often we go into here. We do create a little. If you learn is what we were talking about earlier, it's based on an error that's getting aggregated into an issue and with a metric we can read in any of the data and whether it's errors or transactions, create any type of query for it. So I was custom tagging my things with enterprise. We can drill down into this data. And then set a threshold accordingly as well and any actions. So we want this to go to CELAC, for example. And looking ahead and see that as well. And this is what you would use for the transaction as well. So the only difference is you're going to have this being aggregated and you can read in any of the performance metrics into this as well. So the duration as well as the web, vital information as well, and then set a alert accordingly. So here you say we want this to happen when it gets up here. And it's the one point five seconds. And what this is going to look like, and we saw this earlier, is an issue alert will come in, you'll see it looks something like this, and then Metrick alerts. When they resolve, they'll look something like this. And when the trigger, something like this here. All right. So let me just take one second just to see if I can get this sorted out here. It's going to take a one minute break here. All right, there we go. So I got this thing sorted out, so I started the trial and you all should as well so that we can get some of these features. So let's go ahead, head over to organizations that go to Integration's and see if we can get this configured. So let's go add workspace. Entry demos is mine. Go ahead. Enter yours if you have that. Look at that demo. All right, I'm just going to go ahead, click through and then. We should see it in just a moment. I think it's have to link in with that user. Add that to my email as well. So if you're curious how to do that, it would be here to email. All right, so. Have to figure that out later. OK, that's it for learning. We'll go ahead and actually move on to my interesting and favorite integration, which is our GEB integration and our source code management team. And this one is particularly interesting because once an error comes in, you want to know obviously all the details around it. But eventually you start looking around in terms of what releases one out, what changes went out, what comets went out, and you try to solve it if you're the best one equipped to fight that fire. You know something about that code base. But if you don't, it's about finding the change that causes the person that knows something about it and then being able to act on it from there so that we can reach a resolution in the past. So you might have seen earlier in some examples. So here, for example, when I pulled up some of these issues. They showed that. The comment that it was caused from. I'm going to show you all how to wire that up. I've done some of this work, but what this looks like once it will be wired up is that you're linking to the comet that likely caused this error. Have any of those assignees easily available here so that you can get this issue for. So just to look in terms of the Rehame, in terms of where we are. Let's go on to the GitHub integration right here. So I'm going to go over here again to the organization settings, back to Integration's. GitHub. Add insulation. A silent. Already. Here we go. You can go ahead like those repositories or click all and then say from there, I've already done it. So then. And there we go. All set up and then you should see your configuration over there as well. Once set up. All righty. And then if we go into the readme again. Let's go ahead and follow these other instructions here, so we're going to go ahead and associate those comments and that's going to be done through the Makefile. So let's go live to South Korea and then they. So there's this associate to come in here. Let's go ahead and just add it to the chain of things. And it's using the same tool and then calling it local. We can go ahead cities to order and it will go ahead and upload those comments, so let's just make sure we're all OK on over here. So I believe this was all done. Right now, let's go ahead and roll the building in. And just to highlight what's happening here, NPM build. Which is running into play, which is just the to play just the acronym, the the Daddy and V and the environment variable, creating the minified bundle and then we're calling back. And that's what's triggering that chain of action that I was referring to earlier and then posting it up or loading it up. So here we go. Looks like we've associated commit and in our example here, if we see this here. We'll go ahead and see success right here you go from there. Looks like I have some issues. Why bring this up? So work without a integration place, which is very interesting, because we just need the local get information on. What we're doing is we're populating our coupling the information with the release information. So let's go ahead and see what all of this looks like here. So go ahead the screen. Now, when I go ahead and pull one of these up. Oncer. Going to be a statutory summer. So here we go and we can see and identify the comet that causes air and then we can easily assign to that individual. So it's easy is that to wire all that up and get going right there? And it's not going to just tell you what's wrong in terms of the details regarding your application. But it's also going to tell you what's. The committee, because they're so we can get this Christian address and figure out to roll forward, roll backwards. That's the whole point of this, is that we will play more bad when we want to write more code and know about our issues and errors and get them addressed. So just to recap where we are in terms of the reason we didn't deploy, actually didn't have to shoot up any new areas. But if you pull up an error or an issue, you should then see the suspect commit suggested assigning. And we're good. So let's actually just kind of recap all of this in terms of what we've all done. So over the last hour and some odd minutes, we introduced the SDK, right, we did an NPM install, we introduced the ANGULAR SDK, we specified the proper configuration app module. So that was a central error handler and the tracing service as a provider and then initialize the app accordingly so that any any errors, any transactions upon the application being loaded is going to be set up to Centry and you're going to have that visibility so you can have the visibility in the form of alerts so that you're proactively notified. And when there are any issues, whether that is code problems, errors, exceptions or things slowing down and then get the proper team notified. And then with that context that we're going to have from this case and inside of the application, we can then address any of those problems. We get the information on the impact. We get the code level details in terms of what was going on, the stack trace the breadcrumbs, the steps leading up to it, any of the aggregate information so that we can look at the comet that caused this error to assign to the dev that know something about it and then roll forward, roll backward accordingly so that we can get back to a stable state and play that one again. So that's pretty much it for Nutshell. Majority of this was focused on the SDK and getting that information up and I highlighted some of the other integrations. The point with the integrations is go ahead and configure those as necessary and you can hook into any of these source management tools, hook into any issue, tracking tools, looking at any notification incidentals as well, as well as any data forwarding that you need to do or enterprise SSL, et cetera. Last thing I do want to show you is when you are using Centry Cross platform, that's where you're really going to get a lot of value because we're working on a front end. But the front end is like we've talking to a set of services on the back end, which maybe it may or may not be a set of micro services. That's when you're going to get a lot more clarity. So here's an example. We're in an area where it's going between the front end and a back end and bam, here's the front end side of things. And now I can go ahead. And look at the statues and see that this is a five hundred, we didn't get a two hundred, so we threw an error. Looks like good air handling on the front end. I have all the details I need. I have all the data to commit that caused this. But that's not really that's why the committee introduced good air handling. And now what I'm going to do is search by transaction ID across all of my projects. And now I figured out that this five hundred error was actually due to this back end there and it's a result of propagation in that sense. So here is the culprit. And this caused both of the errors. This is the comet that caused it now and back on land. And I have all of the information I need. I can hop into any of these frames similarly. And the performance example. So. If I have this piece right here, hitting a back end is trying to load up a tool's is the front end, is the back end, that's slow. I want to know exactly what's going on. That's where this is really going to help as well. So one more example of using Centry on the back end and front end. So if I go into here and then click checkout, the checkout is also slow and seems like it's broken as well. So let's go ahead and debug that. There you go. So if I was to go into performance, pull up the front end experience here, pool store, go into gear, I can see that ninety nine percent of the time was spent on this back and quest. To delve into that, there was also some vital violations is where I can see that is running the query that results in the slowdown and similarly with Check-Out, do the same type of thing. See the error that was related on the front end? Go to the back end from here. All within a couple of clicks and now I can see what's going on at the front and back end on the performance and transaction level, see exactly what is going on. Looks like for loop to catch plenty of different things I can do to make this more performant. So that was just kind of a nutshell with a better data set, but to get back to the subject at hand. Hopefully all were able to keep up with this, the most important part being introducing the stick and surfacing those areas, we drill down on two different event types, performance being one of them, and then errors or transactions and errors. And then we can figure out a couple of different integrations to help us get notified whenever we want, wherever we want, and then look at the suspect. We also highlighted Metrick alerts versus issue alerts as well. Last thing that I do want to note is I did put this in a separate branch in case you got lost with the final code. So go ahead and poke into that if you need to. Otherwise, I'm always here for questions. We've got plenty of time. Hopefully this gave you a good overview of Centry, but at the core of it, application error monitoring for all the different platforms will also surface air performance problems as well. And you're front and JavaScript applications and help you trace those into the calls and whether it's in that framework or any of the micro services downstream. And you want to hook in to all of your appropriate places so that you can have a proper workflow oriented around this and have developers accountable for the code that we put out there and have the ability to address it. So lastly, this is just what I covered, our monitoring performance. What we're going to be releasing will be helpful JavaScript soon as well, which will help us get that denominator in the sense of percentages so that we'll be able to set you free users, you'll release adoption, et cetera. And some of that stuff discovers the analytics engine that helps us query this data. So quick little guide to that. If you go into Discover right over here. Any of the data that you see here will be aggregated. So let's go ahead and look at this from a URL perspective or we can build up a query. Something interesting, for example, that I like to do is like, what is my worst filename? And let's see how many users were impacted by errors in this file name. We can basically iterate on this data, however we want getting to that and pivoting on this as necessary and so forth, so shoot up your errors, shoot up your transactions and Centry will let you know when things are messed up, you'll have all the details. And you can also query any of this data. As needed as well, so I showed you some of the bells and whistles here, how about getting wired up something that you're probably going to need to do after this is after you get the data flowing in, they'll probably be a level of noise elimination. So we have filtering in the SDK and the server side to help you with that as well as grouping. So that's all steps that come in after getting this wired up, but getting the SDK installed, getting the source maps up, that's what's most important and critical and then getting your developers to know about these errors and then being able to act on it, whether they're actionable or maybe a chrome extensions. That's just messing with your app because I am one of those grammar users or hunting users. So let me know if there's anything else that you want me to cover. But at the core of it, we put our code out there, especially when it comes to browser code. We don't know how it's behaving in these environments. Centry is what gives you that visibility and provides you that context so that you can get those answers into what went wrong, how it went wrong and all the all the context that you would need and even figure out the content that causes you. So that is actually it for me, I went a little bit faster than expected here. But go ahead, follow any of these links and please feel free to write in to me by email centry. I am happy to help you get wired up in New York.