Monitor Errors and Performance With Sentry

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: All right. Hello, everyone, and welcome back. We're going to do part five of five of this Jamstack Conf adventure. Here to take us through is Ben, whose name is showing up as Nathaniel. I swear I fixed this bug.

BEN: I would trade for this name.

JASON: I was 100% sure I fixed it. Cool, cool. Everything is great. Nothing is broken.

BEN: This is a huge upgrade. When your last name is Vinegar, this is a childhood dream, frankly.

JASON: And chat, if you were watching the previous one, you know, Nathaniel, if you were going to be anybody when you grow up, be Nathaniel. All right, y'all. Here we go. Let's talk a little bit about -- well, first, let's talk about you. Especially because we got your name wrong. So Ben Vinegar. What should people know about you?

BEN: (Laughter)

JASON: (Laughter)

BEN: It's just, it's weird. Let's see. Well, you know, I had a name for some period of time, and then I changed it. Yeah, let's see. I don't know. Today I'm one of the Vice Presidents of Sentry Engineering. I've done everything from build some of the initial UI to some of the initial client library instrumentation work. Then sort of went down the management track. I work today with a team of 80 brilliant managers and software engineers building cool stuff, you know, so that Sentry can help collect errors, just be a really cool product. Before this, I was -- I've done a bunch of different things. I've done graphics driver development, full-stack development. Probably more notably, you know, a lot of JavaScript stuff. I put out a book in 2013 called "Third-Party JavaScript," which is about instrumenting, you know, putting apps and widgets and things on other people's websites. It's pretty deprecated now. Eight years it a pretty long time. We've probably gone through maybe 15 different framework cycles since then. So I don't know that I can endorse it. But you know, that's kind of where I'm coming from. Sentry, JavaScript, yeah.

JASON: I just did some math. Just realized the first book I wrote is now 12 years old, which somebody emailed me about it the other day. So they're still reading the book, which has gone through like -- people other than me have updated it. Because it's a book about PHP. I haven't written PHP in six years, seven years, something like that. But I can't believe that. So far. Felt like yesterday. And yet.

BEN: JavaScript, the old parts, is what it should be called now.

JASON: (Laughter)

BEN: I don't know. I don't actually know, has anyone attempted to revise that any time recently?

JASON: Who knows. Does anybody read physical books anymore? I feel like everyone is doing online workshops and stuff like that these days. Even the book publishers are doing it online these days. So it's interesting. How many of you have -- chat, let us know. How many of you have physical books, like physical programming books in your house? Can we get a W in the chat if you've got physical programming books? And while we're waiting on the chat to weigh in on books being real or not, old ones, yeah. Okay. All right. Some people are coming in with books. All right, y'all. So let's talk a little bit about what Sentry does. You've been on the show before. We've talked about Sentry. There's a Learn With Jason episode about Sentry. Today we're going to use it because we just built this app, and we discovered a minute ago, wow, a lot of people have books in their house. I can't believe -- you know what? I'm pleasantly surprised. I'm glad people are buying books. I love books. At some point I went all digital. Sad for that. So anyway, we were talking about Sentry. With this --

BEN: We can go deeper on the books. This is good stuff. Just let me know where you want to take this.

JASON: But yeah, so I think we have -- we've got this app. We've been building this app all week. It displays swag from Shopify. It hooks up to the API and the SendGrid API and Fauna DB and does all this stuff. We set up Algolia on the front end to make some calls to our serverless functions in the back. There's a lot going on in this app. We just discovered in the previous session that we actually broke part of it. Something that I did doesn't actually work the way that we thought it worked. And I don't know what that is or what happened or why it's wrong. So Sentry, theoretically, should help us identify and diagnose this issue. So I'm excited I accidently made a mistake. Well, accidently. I mean, we knew I was going to screw this up. (Laughter) But I'm excited we're not having to fake a bug here. We can kind of get in and see how this works under the hood. But let's talk a little bit about Sentry in the abstract. You said you've been there for six years. You're clearly, like, deep in it. What is it about Sentry that makes it exciting as a tool?

BEN: I think for a very long time, the experience of fixing bugs is you get an email from a customer or a tweet like, hey, this thing is broken. You go back and forth. You're like, hey, can you send me some screenshots? Or hey, there's a thing called the developer tools, right? Or the console. Can you open that up for me? I know you've never seen it before, but humor me, follow these instructions, copy/paste this, send it in an email, screenshot it. I think the purpose of Sentry is to sort of eliminate that kind of dialogue and just kind of bring it directly to you without having to go back and forth with users. So if you have a bug in production or something slow or a performance problem, we're presenting you a dashboard that tells you -- like, let's take the case of an error. Hey, you know, 100 users experienced a crash on this page. Turns out it was 100% Firefox users. Why? Well, maybe perhaps because you were dependent on some, you know, browser land API that maybe was on the cutting edge, and it turns out Firefox flipped a bit and it behaved differently in that browser. Because of the way you wrote it, you know, it's broken now. Those are a class of problems that are really hard when you're going one on one with users, right. The browser we're using, like at some point you got to have more than one person tell you before you think about browser incompatibility. If Sentry is doing its job, you're spending way less time debugging because you have the information about what's wrong and even pinpointing what to fix so that you can go back to building software, building projects.

JASON: Mm-hmm. And it really is a huge impact when you don't have to do that back and forth. Thinking about how much time in my freelance career I wasted because I had a client, and my client would send me an email in a panic that the page is broken. That was like the whole message. The page is broken. So then I would have to say, like, okay but which page? What are you looking at? Then you would get partial information. And they're panicked the whole time. So they're already stressed, and you're asking them like logic questions. Okay, what browser is it? Can you check the version? Click this button and find the about Chrome button so you can tell me what version you're actually using so I can try to reproduce this. I must have burned days, and it made me way slower to fix bugs and frustrated my customers and all that stuff was really stressful. So this idea that a robot can take care of all of that for us and send us an email and say, hey, this browser at this resolution, you know, broke with this error, and you can go reproduce it by doing this. Or don't even reproduce it. Just look at the log that came in, and you can see what went wrong. You don't have to reproduce it. Just check that your fix worked. I can feel the tension release just thinking about that as a solution.

BEN: Also, it could be hours going in between, right, those communications. You know, add my antisocial tendencies, I don't want to talk to people, Jason. Please relieve me of that burden. So, it's kind of like -- oh, I just think about customer service interactions, trying to fix things on the phone. I don't know. They don't even want to be talking to you is how I think about it.

JASON: Right, right.

BEN: So even that is a negative experience for customers. Like, ugh, already. I hit this bug and now I got to go back and forth with you? You know? I got things to do. I got bills to pay. I got kids to look after. Not only is it help for you as a user, it's just a better, peeps for customers and users of software to just -- in the early days of Sentry, for example, if we fixed a bug, we would message people we knew who had experienced something. Hey, maybe you experienced this, and just want to let you any we had a patch. We're open source, so we'd make link to the PR. It's taken care of. You don't have to deal with this again. That was a great experience for users who were like, wow, I didn't even have to tell you, and this was bothering me. So another way to look at it.

JASON: Yeah. Well, cool. I'm pumped to just kind of jump in and look at it. So let's switch over so that we can see the screen here. So this is the Sentry website. You can see it here. Go check it out for yourself. Also, keep in mind that we are talking to Ben Vinegar. So you can go and follow on Twitter for all sorts of insights. Let's see what the most recent insight is.

BEN: Oh, no. No.

JASON: A boot camp. All right. Good stuff here. Lots of good -- (laughter). Straight up put you on the spot.

BEN: I'm just an angry man on his porch shaking his fist at random topics. There's nothing here for anybody.

JASON: This is not a place of honor. Is that the -- let's see. We need to get the deploy preview, which is open in a different -- this one? I've got it open here. Let's get this deploy preview. I'm going to open it up here. Trying to keep my reference links separate so that I don't lose anything. So this is what we built. This is our app running. It's got all the things that we want. We've got the ability to add things to cart. So that's all working. I've got my Z index error here, which is looking great. But we can add -- you know, add different things to the cart. It does all the things we want. We get here, we can check on Shopify. That all works. This is all good. It appears to be fine. I can see I have some lag here. My computer is chugging so hard today. So this is the basics of our app. We want to configure this thing to be running on Sentry so we get some insight into what's going on. So the code we've been writing thus far is in the Jamstack Conf repo in this pull request here. Oh, fixes filter to work for slap. Look at that. Brian Robinson just watching the thing. I love it. I'm just going to go ahead and confirm that so that gets fixed. Let's do that. So what we're actually working on here is this branch. This branch is now rebuilding so that the command works. Let me drop this here. Now we've got -- if you want to see the code, it's all here. But we're going to be working against this locally. We've got the code in here where we're working, and I want to add Sentry. So if I want to do that, where should I start?

BEN: I mean, I think the easiest way is to just kind of -- well, if you don't have an account, sign up on the website and follow the instructions.

JASON: Okay. I'm pretty sure I do have an account. Let's see if it'll let me in. We're going to associate this -- yep, that's good. I'm glad that just worked. You know what I don't like? I don't like it when I go to an app and signed in with Google and sign in with GitHub and it's like, you don't have an account. Or it creates a duplicate account.

BEN: I agree with this pain. I have to remember the unique way I signed into this? I think I've been logging into Spotify with Facebook for the last seven years, and I have to remember that. But nothing else. Anyways. So, I agree.

JASON: Nice, nice. Okay. So looks like -- and I've got this running on Learn With Jason. I've got two errors I need to deal with. I'll go look at those soon. For now, we've got -- I need to create a project.

BEN: Makes sense to me.

JASON: All right. I'm going to create a project. We're going to call this project -- computer, don't you dare. Now is not the time. If it beach balls, I swear. Hey, stop it.

BEN: Oh, no. Is the animated spinner causing grief? You're not running an M1 Max Jason?

JASON: This computer -- hold on. Let me show how old this computer is. This is a 2017 15 inch, and it's still running Catalina. Like, I do not update this machine.

BEN: I so feel our animated spinner should not be beach balling, you know, a four-year-old machine.

JASON: Absolutely not the only thing that's happening on this computer right now. So I've got a JavaScript project. We're going to name it Jamstack.

BEN: Well, is it using -- is it just generically JavaScript?

JASON: It's using Astro. So there's React-ish bits.

BEN: I would choose React, I think.

JASON: All right. Let's do that instead.

BEN: You get more, sort of, focused onboarding around the React experience.

JASON: This is nicely done. We've got the Sentry stuff. We've got the tracing library, so I can install all of that. Not now. Drop this in here. Then we got all sorts of good things happening. So we've got -- oh, did we just throw this right at the root of everything?

BEN: Yeah, so I mean, kind of like the earlier in the application bootstrapping lifecycle, you can get Sentry involved, the -- you know, you want to do it early so if an error happens subsequently, it's going to get captured. The lower you put it down, the less opportunity it has to collect things in that bootstrap phase.

JASON: Gotcha, gotcha. Welcome. Thank you for the raid. And I'm making some assumptions here about how Astro is going to handle this. So it should just run arbitrary code here.

BEN: Yeah.

JASON: So as far as I know, this should just work.

BEN: I've never tried this. I don't know that we try this with Astro. This could be the maiden voyage.

JASON: We might be about to learn something here. So yeah, let's find out what happens. Theoretically, this really should just work because it just executes some arbitrary JavaScript. But I'm actually wondering if I might need to inject this as, like, plain script at the bottom. Let's run it and find out. I think this might execute at build time, not at run time, which is not what we want. So let's see. Packaging. Everything is working. So it's ESM -- oh, we got close. What happened? Cannot redefine property init. That's probably because I bet this is happening because we're not calling it in the right place. So let me -- hmm, how is this going to work? You know, I'm going to put this into -- is there a way to just do it with, like --

BEN: That's a build-time call.

JASON: So if I want to throw it in here, right, now this is probably not going to work.

BEN: Yeah, what we can do instead, we could go back and look at the JavaScript instrumentation, which will, you know, instrument the on-error event globally. Otherwise, you kind of have to figure out where dynamically is the mount point of where the React application gets inserted.

JASON: I have a theory. We're going to run into some issues here. Do you have a CDN version of these libraries? Like, I can probably unpackage these, right?

BEN: Yeah. Is that here in these instructions? We do have -- probably not for React. Maybe go back. Let's maybe drop the React specific parts of this for simplicity. That's mostly because I don't know Astro very well. If you go to JavaScript --

JASON: JavaScript.

BEN: Yeah, it's hard to not say that.

JASON: So here's the regular one. Okay. So we're going to put this down here. Then here's the performance bundle, the tracing. So we put that down here.

BEN: I think the -- let's just read that. Performance module, is it a separate one?

JASON: You only need to load, which provides both error and performance monitoring.

BEN: What a handy little note there.

JASON: So we're only doing tracing then. And then it's going to be Sentry.init. So I think nothing else changes. This should just work if I drop out these parts.

BEN: Yeah, let's check that.

JASON: New Sentry integrations instead.

BEN: Yeah, because it puts everything on a Sentry global name space, given that we're not in module world.

JASON: Right. So this should work then. We've got response with 200. That's right. Let's get in here. Oh, wait. Let's get local host up. Look here. No errors. Get to the network. Let's look for Sentry. And here it comes in. Everything is working. So theoretically speaking, this is loaded now.

BEN: Theoretically.

JASON: Theoretically speaking. So if we then go back here, we can look and just try.

BEN: Yeah, we go to issues. Let's get rid of this.

JASON: Waiting for events. Create a sample event.

BEN: So creating a sample event is like, hey, I don't want to instrument anything. Just give me an idea of what this looks like.

JASON: So we need to create an error then.

BEN: That's right.

JASON: So to start, we can just throw a new error, right?

BEN: Yes.

JASON: Will that do what we want?

JASON: If you do it in a set time-out, you can. And that's just because of what Chrome does. It kind of suppresses. It'll suppress an error thrown from the console. But if you use set time-out, it'll sort of, like --

JASON: It breaks out of that.

BEN: Yeah, breaks out into the global scope. Shhh, don't tell people this.

JASON: All right. So this is a test error. That gets thrown. Theoretically speaking then, we should be -- let's go back to issues. Full review.

BEN: Something just popped up there. Really, make it stop already. They really nail the language there.

JASON: That's good. So here we go. Here's our test error. That came in. We can look at it. We can see, you know, here's my browser version. Here's my MacOS version. All sorts of really useful -- like, these are the things we're going to ask somebody. What browser did you use? Is it the latest version of the browser? All that kind of stuff. I can also see they were on the deploy preview URL, not the real URL, so they aren't looking at production. You need to make sure they're looking at production. Really powerful stuff here. So, I mean, that's kind of the whole thing, right?

BEN: It's a huge one. Since it's basically not a real error, there's no real stack trace. We've kind of flushed it to the global window object. So I think it becomes more powerful at a point where you can trace the stack trace. Like, here was the call frame where this happened.

JASON: Yeah, let's break it. So I'm going to go into something that is -- let's do this one. This shows us a bunch of buttons. This is the React that shows our buttons. So I'm going to add a new button. On click, this button is just going to wreak havoc. So when you click this button, it's going to throw a new error. See, now it's beach balling again. Computer, just come on. We got to get through this week.

BEN: Feeling better about the spinner now. Probably even better than throwing a new error is just, like -- oh, I guess this is always the challenge, right. Trying to call a function on a property or something.

JASON: So I can just call an undefined function. That's 100% going to fail. Then I get to use this copy here. So this will break. And if I go out here and look, we can see what we've changed. We're not actually using these, so I can roll that back. That means I can roll back package JSON. So we have installed the script and initialized it and set up something that's definitely broken. So let's ship it to production. All right. Then I can click the sync changes button. Then we'll go over here to the Netlify CLI. I'm just going to run like a --

BEN: I feel like this is real software development. We're just skipping a lot of redundant steps and going straight to the breaking. I like it.

JASON: What's going on? Oh, I'm down here. All right. So let's run a Netlify open. Then we'll just wait for it to open up in this browser here. Poor little computer. Okay. So here's our site. It's building. Here's the thing we shipped that was broken. I hope it doesn't have any checks. You know how some frameworks are really helpful and will run automated checks for you? They're like, you tried to call an undefined thing. Did you really mean that?

BEN: I was wondering if that was going to happen or not.

JASON: Oh, I got to start it again. Actually, hold on. I don't have to because we're trying to use the broken one. Which is over here. So let's run this. And here it is. Open it and now we have this button to unleash chaos. So we should see an error. We do. Undefined function is not defined. So if we go back here and I go to issues, we're already getting other errors because I removed those imports and stuff. Now I have failed to dynamically fetch.

BEN: It might take five, ten seconds.

JASON: Here we go. Undefined function is not defined. Good. So that did what we want. We have all these details here. Then this is the stack trace. Link to your stack trace.

BEN: Typically, Sentry supports source. When you go through like a full -- I mean -- scroll up a little bit. Some of that looks pretty clean. That's cart.js. It's not a big file. I'm not familiar enough with -- like, that looked minified, but the source file looked unminified. Scroll up to the top and see if there's a source error. I guess this is interesting. So Sentry will sort of consume source maps automatically and convert minified source code into something readable. If it can't, it will pop up a warning that says, hey, we couldn't find a source map or whatever. In this case, it seems like a source map was actually consumed because I do see some transformation on that object on click. If that was truly minified, you wouldn't see -- you know, it would be like app.min.js. You know, the function name would be like undefine function B. So there is some sort of unminification taking place. I guess because of the way Astro rolls up the source code, it's not showing the original source code.

JASON: I'm not actually sure how Astro source maps work. I haven't tried to set them up yet. So there's a decent chance that there's just a setting I need to turn on.

BEN: Yeah, yeah, I suspect. It's still keeping, for example, not everyone wants to supply their source code to the world, right. If you don't want to do that, you can push them in a separate process using our command line tool. So you don't put them on the internet. You can Just sort of push them to us, keep them private.

JASON: Okay, okay.

BEN: Right. But it looks like they do produce at least some sort of -- like, source maps have different levels of support.

JASON: Yeah, let's poke at this and see what we get, actually. So what comes out -- not here. It goes out in -- let me just build this thing locally and find out what happens.

BEN: Yeah. You know, so what we're trying to do is to -- like, obviously it's got these sort of call frames. What we're trying to do with that source code is to put those call frames in context if we can. So we will attempt to show your original source code so you can be like, oh, it was this line of code exactly. You know, those are additional capabilities that make the experience a little nicer.

JASON: Yeah, so it looks like it minifies but it does ship as module. So it looks like we were just getting the actual name from the file. I don't see a map. How we doing on time? We can look at this.

BEN: Yeah, could just be in their config somewhere.

JASON: This is -- let's see.

BEN: Developer docs haven't overtaken Google on space topics yet.

JASON: Oh, little compooper, you can do it. Source maps, do we have any source maps? Source. Oh, I don't think we get source maps yet. Or I'm looking in the wrong place. Maybe deploy to the web, possibly. Good possibility here. Source map, source map. Looks like we don't get them. No. That's okay.

BEN: We'll look into it another time. I'm not familiar enough with it. I'm under the impression that astro -- what do you think, by the way?

JASON: I've loved it so far. I built an app in Next, and I was realizing that, like, there was only a couple things that were actually React on it. Most of it was static content. I looked at the page size, and it was over 200 kbs for what was effectively an informational page. So I gave it a shot, and it changed to, like, 15 or 20 kilobytes of JavaScript. You can use React or Preact, which one would you like? Will it work with Preact? Sure enough, it did. And it dropped. Huge, huge, huge reduction in the size of the app. And all the interactivity still worked because just those one little React components hydrated with Preact. So I've been super impressed with it. I'm a huge fan of the general -- I like this direction. It feels like this is the new generation of building for the web, kind of using JavaScript to build. It's really, really powerful for building. The developer experience is wonderful. But not actually shipping it when you don't need it very much feels like the right way forward.

BEN: Pretty good sales pitch.

JASON: (Laughter) Welcome to tiny bundle island. I'm feeling very good on tiny bundle island.

BEN: Some Astro swag being packed up and sent to Jason's house right now.

JASON: Oh, speaking of which, hold on. Huh?

BEN: Oh, yeah. Yeah.

JASON: Yep. All right. Here we go. We're going Sentry hat for the rest of the show, if I can get it on straight. There we go.

BEN: Premium swag icon. When we went to conferences in the before times, we'd keep those under the booth, okay. You know. So this is the pro tip. Always push people a little more on the swag.

JASON: Oh, yeah. Secret stuff under the table.

BEN: Yeah.

JASON: It's like, hey, I see you got a T-shirt there, but tell me about the hoodies you got stashed under the table.

BEN: Can't hurt to ask. Worst case, told no. No big deal.

JASON: Right, right. Yeah, so now you know. If you see Sentry at a conference, you ask for the hat. They got them hidden under the table. Your team is going to be so stoked you just let that out of the bag.

BEN: I bet that's broad advice for everybody. Go after Google or Firebase. I'm sure they've got something fancy.

JASON: They've got good stuff in there somewhere.

BEN: Netlify, I'm sure some good stuff there.

JASON: We got a couple good ones. Hmmm. Yeah, yeah, commit to open source. See what happens. (Laughter) But yeah, so if we don't have a source map, I clicked this seeing if that was the source map thing. It wasn't, but it looked pretty interesting. Will it just let me do the thing?

BEN: No, so once you get your source maps rolling, okay -- I mean, this might actually work. It does have the file name. So I'm unsure about that. It really is sort of like facilitates you going back and forth between GitHub and maybe in the future VS Code. You see the line of code, click it, go to GitHub, see the commit. It brings in that type of stuff. You know, it's effort.

JASON: Oh, you got to do a thing.

BEN: You got to connect to GitHub, map your repositories. I would not encourage this. This is the type of thing where you're going to need 30 minutes. But it's something you can set up, you know, for a project for the duration of that project. Not for like a single error or whatever. If you don't mind hitting the back button a little bit and going back to that issue.

JASON: Where was I? Here.

BEN: Yeah, so if you scroll down and go to the stack trace, hit that raw button on the right. Top right, yeah. So this is really just taking, you know, what you would have -- that's the raw text that you would have gotten in the browser developer console. That sort of view we showed is just trying to elevate this a little bit, by bringing in surrounding source code. This is a different experience. You're seeing a bunch of stack trace here. Already, at the very least, you can see a little bit of what it's going for. There's the unclick, undefined function.

JASON: Yeah, would it be great if this was showing me source code? 100%. You know, I'll go back and figure out how to do that. Because I want it to do that. And I think we did set that up. Actually, why don't we look at Learn With Jason because we did get it set up with Learn With Jason. So if we go into issues here and we find -- I'm sure I have one.

BEN: We're going back in time. What were we doing? I think we also invited people to basically click all over the place.

JASON: Oh, that's true. We did some really weird stuff in here. Can I find my old stuff? Or let's just see what this shows us.

BEN: I do remember we had that working.

JASON: And it goes like fetch here.

BEN: Scroll back, actually. I think -- go to the last page.

JASON: The last page?

BEN: Oh, sorry. The issue list on Learn With Jason. I felt like at the bottom -- I'm really curious. Oh, cannot read property define is a good one. Yeah.

JASON: Here we go. So it's saying it can't -- undefined is not an object.

BEN: Dude, I don't remember what we were doing.

JASON: I don't remember what we were doing either. Where was undefined is not a -- was there one of those?

BEN: Yeah, I don't know. We've also got, like -- so go back. Go to resolve. You can think of it as a list of -- go to safe searches and drop down. You can just drop these unresolved or look at -- let's just drop.

JASON: Get it out of there.

BEN: Yeah. So we'll auto-resolve errors over time. I don't know if that was a factor. Maybe not. Let's bail out of this whole thing. Let's go out of this whole --

JASON: Get it out of here. Hold on. I could have sworn I had some that were resolved. Whatever. It doesn't matter. We're going back over here.

BEN: Yeah, we're bailing out of this entirely.

JASON: So we've got some issues. We can see things happening here. Like as they're happening. When you see them happen, you can at least see, like, were we expecting this to work? The answer is yeah, 100%. Preact, that should be working. There's no reason that shouldn't be working. So we should figure out why that didn't work.

BEN: Basically just a whole universe of stuff that's happening to your app. Did you know you had a whole bunch of module failures firing off all the time? Maybe you didn't or didn't notice it. So it really just speaks to, you know, in web development world, there's a million people clicking on things, causing grief. Are you even aware it's happening? So this is a bread crumb trail, right, which is again -- like, Sentry is trying to be the suite of things to not just tell you a crash occurred but give you some blocks to try to re-create it. In some way, breadcrumbs are like going back to the user saying, so, tell me what you were doing before you encountered this. So in this case, you know, we're trying to do, without being invasive, we're trying to, like -- you know, clearly this sort of session or user experience, they fired up this transaction, which we could click into that. Then they clicked around and caused the exception. So you can look at the button it caused.

JASON: Time travel for queries. Yeah. And this is powerful stuff because the other thing this is useful for is it shows when you click a button, it doesn't just hit that button. This bubbles through the whole thing, right. So I clicked on the cart. Then that called the drawer to open. Then we clicked on the button. It did all this stuff that is really -- you know, this is important to keep track of because we can see how somebody got to where they were.

BEN: We're glossing over this because we inserted the error. We know exactly what the parameters were. But if you had no idea at all and you're putting on your detective hat and trying to figure out what even happened, you know, the stuff is pretty crucial.

JASON: Look at this. I can copy this. Here's how good the debugging on this experience is going to be. I'm going to take this, go back out to my app here, and I'm going to do document query selector. I'm going to drop in this query selector. Then I'm going to do -- is it style? And I want to make that border one pixel solid. I always get this wrong. Look at that. It just finds buttons. So that's a button we clicked to make this thing work. That is so dang powerful that that sort of thing works. So we can start to find where somebody is on the app just by, hey, that's where they were when this thing happened. Let's go make that happen. It's just really, really, really good stuff.

BEN: We should probably do more browser extension stuff where somehow we can fuel this data into that. That would be pretty cool.

JASON: Oh, that would be really cool. And so the other thing -- I put in tracing. Is this performance tab what that tracing library does?

BEN: Yeah, let's click that. I think your account -- yeah, that should work. That's interesting that other link brought you somewhere else that required a trial. This is not, like -- you should be able to use this on a free plan. Sentry team, if you're watching, this let's go explore that. But yeah, this is the performance monitoring side. This is like a new offering for Sentry. Application performance, monitoring tools, APM tools have been around for a while. This is an experience where we're trying to bring that type of solution to front-end development. To be clear, Sentry is a full-stack product. It works with Python or anything, really. But we do care a lot about the front-end experience because we look at that as the gateway point to software, right.

JASON: So chat, if you'll do me a favor, go and open this site. That'll give us some input so that we can see some of the transactions here. I think right now we've just got the one. Or three users. We're getting some averages. So this is very, very useful information. Everybody clicking that button? Load that site. Let's see. There's a very specific question here from playpubg. It's possible to get private key range hint using pubkey bace58 -- honestly, I understood about 50% of that sentence. Do you know what that means?

BEN: I'm not sure. You're going to have to elaborate.

JASON: So we can see here, we've got six more people coming in. We can see that our largest Contentful paint we have somebody who it took a second for. First, 600 milliseconds. This is a fast website. This is one of the reasons I really like Astro. It really is zippy.

BEN: I think that's average, right?

JASON: So if I jump in here, I should see.

BEN: We've got a bunch of different views. This is kind of, you know -- we kind of group things under transactions. You can think of transactions as being the request response cycle or the full page load of a page. You know, so we group by URLs. In this case, it's slash. So it is showing some -- you know, one, you can see the individual experiences. It's graphing them. So we could, for example, scroll down and look at what a full waterfall diagram looks like. Maybe one of those slower ones, like 2.71 seconds. But also it gives you an idea of what is the breakdown. Super helpful if you're trying to build fast websites, for sure. What are they blocked on? Is it something --

JASON: And is something loading in parallel, or is one of these things blocking the next thing? Just so much we can do to make the site faster. It's really powerful stuff we can do in here.

BEN: And a lot of the same sort of UI things come in here. Like breadcrumbs are still part of this. Especially because -- I mean, if you're just loading a page, it's probably not what the user did. If you clicked a URL, load another page, try to capture that as well.

JASON: This particular site doesn't have any extra pages. But yeah, god, this is so cool.

BEN: Check out that web vitals tab. We've kind of gone deep on vitals. We're pretty aligned on this. We're trying to, you know -- the industry is kind of standardizing on this terminology, which is great. It gives us something we can all talk about, right. So we create a bunch of experiences to help you visualize how you're doing on vitals.

JASON: And you know what I love about this -- and this is something I think is really important when you start talking about performance. Performance in a lab is fine. Like, you should use it as a baseline to get a picture of something like run your lighthouse score and run the speed test and stuff like that. But where you really start to see it is, like, these are reports from real people actually using this website. Right. That is way more valuable than any kind of lab testing or simulation that you can run on how performant your website is. We might think everybody who's using our website is in metropolitan areas, on fiber internet. So it doesn't matter. When we run this simulation on fiber, everybody gets it in a couple seconds, we don't care. But in actuality, most of our users are in rural areas or they're coming from, like, India or Africa where the internet is not as fast. It's taking them like 30 seconds to load the page. It's like, oh, crap, we should optimize different things in the way we're building this site to deliver a better experience to the real people. This would qualify as rum, right? Real user -- is that -- hold on. Real user measurements?

BEN: Real user monitoring. Yeah, that's like -- I don't know. That's marketing speak. I guess. It's real users, yeah. So we can go with that. You know, synthetic real user, they can work. They're complementary. You want to have a good idea ahead of time. You want to have a good idea after it goes live. I think they both have a place. But this is real results. You may not have expected, you're building this Astro site, clearly you're talking about I'm using Preact, Astro, all these cutting-edge means to build fast websites. For some people, it's still two seconds. It's, like, humbling.

JASON: Yeah, it's definitely one of those things. We don't know where this person came from. I'm assuming we can dig in and find this, right?

BEN: Yeah, yeah, we can.

JASON: So we can see, was this coming from -- you know, this is not what we want. That's 900 milliseconds to first byte. Where did this happen? Is that a thing that shows up down here?

BEN: Well, first byte, that's like first transferred byte. If I'm looking at that, I assume it's network connectivity.

JASON: Like network latency or something. Oh, yeah. Look, it took a while for everything to come through.

BEN: Exactly.

JASON: So that's a bummer. It took like a second for the first byte to come back. Is that common? I sure hope not, right. So we kind of have to look at these and get a sense of how often is it usually happening. It looks like time to first byte is not one that shows up here.

BEN: Does Netlify build previews? You know, do those previews get built to the CDN edge? Like every neighborhood in the same way a non-preview would?

JASON: Yeah, they do. So we'll always get those outliars, those one-offs where it's like, oh, that didn't work the way we wanted it to. But the thing that I'm happy about looking at this is that the vast majority of these, we're getting things in under a second. So most of these calls are hitting where we want. Even the ones -- like, we're looking for under three seconds. That's when I want everybody to have all the content. Mostly, it's happening. You know, first input delay. Wow, that's nice. Two milliseconds. Nobody is going to notice that. No cumulative layout shift, at least as far as I can tell. People aren't waiting very long for content to come in. It's like a second and you start to see content on the page. This makings me feel pretty good about the performance of this website. We're averaging about a second. When we start looking at the big ones -- oh, boy. Somebody got hit hard. So we do have some slow ones. These are definitely not ideal, and I want to look into what's causing those and everything that's happening. But again, in the grand scheme of things, four seconds is fairly fast. I'm curious how long this would take on other -- you know, like larger bundle size.

BEN: That's intentionally bubbling up. You can see it's ordered by duration. It's showing you the most miserable things, yeah.

JASON: Exactly. We were intentionally looking for our slowest transaction. So if we go for fastest, holy crap. Yeah, it just feels good when something goes that fast. But the thing we should be looking for is where is it getting slow. And this is the 95th percentile of slowness. So it's definitely, like, these are the people having the worst time on your app. We can get a sense of are we okay if 5% of people are seeing this load time? Ideally not, right. But we're never going to get it right for everybody. So can we make sure this 95th percentile is a few seconds and not 45 seconds or a minute?

BEN: Yeah, and I mean, maybe just the conclusion is it's just like things beyond our control. Devices, network, et cetera. Anyways, Dragon's got a good point. What are we working on? What are we building? Should we be shipping this?

JASON: We probably should be. We have the site shipped here. Assuming this worked, I think what'll happen here is now we should get -- yeah, it works. So we'll get console log with our code. If you go to this website here, you can -- if you registered at Jamstack Conf, you can get this slap bracelet for free. Let me make this -- let me just move this to the side. So here's the slap bracelet. You can get this thing for free. If you go here and type in your email that you registered for the conf with. I can run this. After running it, it's going to give me back my coupon code. This is the coupon code. You can use that to get a slap bracelet. So claim one for free. That's going to take you to the checkout page, and you can get one. You can also, if you would like, get one of these Jamstack Conf swag packs. These are priced at 40 bucks, but I have a special discount code for y'all so that you can get them for 25% off. So 30 bucks for a ton of gear. We have gear from Netlify, Algolia, Contentful, Sentry, Commerce Layer, and Twilio all coming in. There's bath bombs. There's T-shirts. There's stickers. There's pop sockets. All sorts of good stuff is happening. You can get that with this coupon code that I'll drop in the chat right now. So if you want to get one of these, pick your T-shirt size and go grab one. It'll be 30 bucks instead of 40 because this'll give you 25% off.

BEN: Are we going? Is this under the conference booth counter here? Is this what's under the counter?

JASON: It's kind of under the conference booth counter. This is a pack that we -- I don't know that we've really shared this with anyone outside of this stream. So you getting first dibs. Everyone get in there and get those. And really, this is shipped, right? If we look at the source code, we have -- let me just drop on down to the script here. Here's Sentry. Here's our initialization call. Like, we got it. We did it. This is a shipped app, which actually means I think we can merge this PR. I think we can actually merge this PR. Are we done? Yeah, we're all pushed here. Okay. I'm taking it live. So we can go into our app here. I mean, we did a lot. Where we started -- and we can review this a little bit to see where things were and where we got to. So when we first got back on this PR1, I can -- let's see, deploy preview one. So I guess we'll just go only deploy previews. So our first iteration of this, this was before the conference when I was trying to get everything done. I had the site built. Actually, that one is more ready than it should be. Oh, that's not the permalink. That's why. I need to open the permalink, which is here. This permalink button I was looking for. When we first started, we had all this stuff working. None of these buttons worked. I guess that one did, but this didn't do anything. This you could choose something and click, and it wouldn't do anything. So we just started with the basic markup. That was where we were. Over time, we were able to get the -- where's the rest of my -- oh, I guess it just kept doing that. Let's go to the pull request here. We can see that we started with the homepage and markup styles. Then we got the basic skeleton there. We got the functional shopping cart with Kelly. We got the swag claim function in with Rob Sutter from Fauna. We got Algolia autocomplete with Brian Robinson. We added SendGrid today with Nathaniel Okenwa. We just added the Sentry stuff so we have error tracking. So let's fix that error we created, and let's take this thing live. So I'm going to -- we'll just do it from here. I'm going to say git commit everything. Fix, remove undefined function. And I'm going to push that. We'll see that go up live here. So here's our undefined function. It's going to rebuild. And I'm going to be able to find that over here if I go back to my deploys. So here it is. It's building. As soon as this builds, we can verify that it does what we want. Should take just a few seconds because I think Astro is building on -- it's using ESM, which makes it nice and fast. It should get even faster over time. Which is very exciting. We got one minute on the clock. Here we go. There's the preview. Let's go to our deploy preview. It's all working. No more broken button. All right. We're taking it live. Here we go, everybody. We're going to merge this PR. And it's no longer a work in progress. Off we go. Delete this branch. That thing is going to ship. And you will be able to now see the site at its -- did I actually ship it here? Yeah, swag.jamstackconf.com. I'm so sad we didn't get to do this whole joke about having the swag site not ready. Then we were going to build it live during the show and all that kind of stuff. But it doesn't matter. We're going to do it anyways. We're shipping it live. Ben, while we're waiting for this to build, is there anything people should do if they want to go deeper and learn more?

BEN: Oh, with Sentry?

JASON: Yeah. I mean, with whatever. You want to read a book? Whatever. Recommend anything you want.

BEN: I like this part of the podcast reference. What are you reading? What do you want to shout out? I don't know if that applies for livestreams too.

JASON: Always does. Anything you want to teach, teach it.

BEN: Yeah, you know, I got -- you can see me live in Toronto. I'm appearing in a show. It is a modern interpretation of Hamlet but in space, using sand spice.

JASON: I'm not 100% sure if you're being serious or not. I really hope you are.

BEN: I'm not. But I do like -- maybe I just listen to a lot of podcasts with actors and stuff. They're always kind of finishing with, you know, oh, well check out this thing I'm in. So yeah, I don't know. Check out Sentry. It's got a free developer plan. I think it's great for side projects. This is kind of like in some ways the joke of the session. Hey, we're building with Sentry, but it's basically kind of a copy this snippet in your website and you'll get value out of it pretty fast.

JASON: I feel like that's the glory of this, though. You know, we just got all those insights for literally no effort. We copy/pasted a thing, and now we can see how fast it is, not in our testing, in simulations, but for real users. And we get error messages reported to us from real users, real browsers, with the metadata and the stack traces we need so we can hunt them down and fix them before someone opens a ticket. So Ben, this was incredible. Brian, I did see your PR. Thank you so much. It's all working. We're now shipped and live. It's swag.jamstackconf.com. Make sure you use the email address you registered with and add that to your cart. Also, you have to do these as two separate transactions, I think. You can get the Jamstack Conf swag pack for 20% off using the discount code JAMCONFPACK. Let me drop that in the chat one more time. So grab your gear. There's lots of good stuff here. Get it for 30 bucks. That's a lot of gear for 30 bucks. And you can get that free slap bracelet if you were registered. Ben, thank you so much for hanging out today and for giving us a tour of Sentry, helping us get it set up. Chat, thank you for a marathon. This is the fifth of five parts of building this. If you didn't catch all of them, you want to catch up on how we got here, all of these will be posted on learnwithjason.dev and the YouTube channel. Make sure you go and check that. Ben, any parting words?

BEN: Jason, always a pleasure. Really happy to be here. Hey, looks great.

JASON: All right, y'all. If you want to catch more, we're still going this week. We've got tomorrow, color contrast and accessibility with Todd Libby. That's going to be a blast. We have Aisha Blake doing Jamstack using New Relic. That's just this week. Make sure you head out and just add this show to your calendar so you can follow along. And do a follow on Twitch as well. With that, we're going to go find somebody to raid. So thank you, all, so much for hanging out this week. We'll see you again tomorrow.