Add Observability to Jamstack Sites Using New Relic
with Aisha Blake
Observability helps teams confidently ship and monitor production apps. In this episode, Aisha Blake will teach us how New Relic can help us add o11y to our Jamstack sites!
Resources & Links
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: Hello, everyone, and welcome to another episode of Learn With Jason. This is stream number eight this week. I am tired. But here joining us, one of my favorite people in the whole world and a great person to give us energy to carry me through the rest of this week is Aisha Blake. How you doing?
AISHA: I'm doing great. I'm so excited. I get to chat with you. This is two weeks in a row now.
JASON: I know, I know. It felt like we didn't talk forever. Then all the sudden we've had a lot of opportunities. It makes me really, really happy.
AISHA: I love it.
JASON: So, you know, you are just -- you do so many things. So rather than me trying to recount them, although I am going to call out specifically that I feel like the greatest injustice that happened over the pandemic was the end of Twitch Sings.
AISHA: It still hurts.
JASON: We lost your karaoke stream.
AISHA: It still hurts.
JASON: But so outside of karaoke, what else -- like, can you give us a little bit of a ground on yourself?
AISHA: I end up not only learning from that deep dive but also from the questions that come up. So that's, like, kind of what I have been chasing through my whole career. And now I'm in my first actual developer relations job at New Relic. I'm Lead Developer Relations Engineer. So I get to do that all the time.
JASON: Yeah, I mean, you're effectively running the show over there right now, which is just -- congratulations. I can't think of anybody better to do it.
AISHA: Thank you.
JASON: And it's just a total pleasure to have you on the show because of the way that you approach teaching and learning. I think we're going to learn a lot today. So let's talk a little bit in the abstract about just New Relic in general. I feel like New Relic is one of those companies you hear about, you know they get used by a lot of the big companies in the industry, you see a lot of logos on the homepage, but it can be a little squishy to understand exactly what New Relic does. So I guess what is the elevator pitch for New Relic? What's it for?
AISHA: Yeah. So New Relic One is the observability platform. I think that's where I start to lose people in a lot of cases. It's like, oh, okay. What does that mean? So observability -- as an observability platform, it's a place where you can collect data about your applications, and then you also use New Relic to analyze that data.
AISHA: So you're getting as much visibility into the state of your systems as you can, and you're able to not only -- you're able to not only see when things are wrong, but you are able to understand, okay, what's normal for my application? You're able to predict when things will go wrong. You're able to troubleshoot when there's an incident. But yeah, at the heart of it is a place to store data about your applications and analyze it.
JASON: And the data, just to repeat this back and make sure I understand it, it can be quite literally anything, right? I can just tell New Relic, here's some data, please hold on to this, and you're like, cool.
AISHA: Absolutely. So it could be something like logs. But you can literally just write out the data that you would like to send to New Relic and send it over. New Relic then has tools for you to make sense of that.
JASON: Okay. So just again in the interest of making sure that I understand, if I have some use cases here, so one use case is I want to see how my system is just responding. So I'm going to send some data every time I call one of my serverless functions or every time somebody loads a page. I want to include, like, you know, what page was it, some basic information about where that came from. You know, is it in Europe? Is it in South America? Then some general timing. I want to know how long this thing took to load. Just basic metrics about that. Then I can see that over time. This page gets called this many times a day. It's mostly from these geographic regions. And it takes roughly this amount of time to load.
JASON: So that's a great use case, some insights into your system and performance. I have another use case. What if I wanted to, like -- I'm trying to get into the way that people use my app, like the way they move through my app. So I want to take, you know, somebody ease user journey, and I'm going to say, yeah, people hit this page, then this page, and this page. I'm going to throw all those in there and get a sense of this is how people move through my app. And get a sense of where people fall off. This is the funnel we want people to go through. 20% of people make it to step one. Or like 100% of people make it to step one, 80% to step two. Then we lose people on step three. What went wrong here?
AISHA: Exactly. Then from there, potentially, you can dig straight through to like the line of code that is causing an issue.
JASON: Interesting. Interesting. Yeah, I mean, this is -- and that's cool because we just talked about two very different types of use cases. One of these is like the business side of the company. We want to think about conversions. We want to think about customer journeys. The other side is, like, how is the platform that we run our product on functioning under normal conditions. Then I assume we can also set up alerts. Like if all the sudden our normal rate gets way slower, we can go, hey, somebody needs to get paged and check out why everything just got ten times slower.
JASON: I love that. I mean, it's little stuff like that. I think about this as a solo dev. Like when I'm working on Learn With Jason, I build out a bunch of little things. I built out an API that would let me automatically pull who the guest is on my stream. That's what we're looking at now with the title of the show and your name under your video there. That's all pulled from an API. That's set to automatically update. I broke it earlier this week. Something I did caused it to show the wrong name for the wrong time slot, and I don't know how or why. And because I don't have any observability, nothing built into my app, I don't have a way to go look at what went wrong. I just have to kind of, okay, so based on the way I built this and the way this code is written, clearly there's an error in here. But I can't trace it or get any insight.
AISHA: Exactly. And I think that that's what a lot of folks who -- even folks who have used New Relic in the past kind of get hung up on. Oh, this is a tool I use when something is wrong. Like, something is on fire. But that's not -- I mean, that is a great use case, but it's not the only use case. If you know what your system is supposed to look like, whatever that data is, whatever it is that you were interested in, if you know what that's supposed to look like and you are sending that data, then you have it. When something does happen or you want to figure out, okay, what's the connection here, the data is there and you can go back and search through it.
JASON: Yeah, I mean -- so what you just said there is actually fascinating. Having that baseline -- like, one of the things I find really interesting about programming is that we, as programmers, kind of think like just-in-time compilers. We look at our code, execute it, did it work, yes or no. So we think about it in single loops. I wrote some code, did it work? Yes, great. Ship it. The fact we get bugs is proof that code, even when we write it and it runs the same way, it doesn't always execute the same way. There's a lot of plumbing in making the web work. You've got DNS, and that has to connect through a server. This has to go through all these pieces. Third-party systems, APIs, all the components of your app have to work together. Every single one of them needs to function, or else things get weird. Sometimes when they break, having a baseline to say this is what everything in this system usually does, lets you very quickly spot the thing. Like, oh, wait, this thing spiked. Let's look at that first. And that can be indicative of something upstream, like it speaked because the thing before it was down. But it at least lets you get to the right area of the graph and start looking. Instead of just being like, I don't know, I guess we just start at the beginning and go until something breaks. This sufficiently complex system, that's weeks of work.
AISHA: Absolutely. And I've absolutely heard customers say, you know, we went from things like 20 hours on average to get to the bottom of an incident to two hours. Which totally depends on how severe and the complexity of your system. But to have that kind of a difference and be able to make that kind of difference by using this suite of tools, that's incredible.
JASON: Yeah. So another question that I think kind of comes to mind for me, when we start looking at systems like this, I have memories of being at IBM where we had like whole teams dedicated to this. We had five or six people whose job it was to make sure the wheels stayed on all of our systems. So when we're looking at New Relic, is this the sort of thing where is this somebody's full-time job? Can I use it as a solo developer? How much work is it to do observability monitoring?
AISHA: Yeah, that's a great question. And for a lot of people -- for a decent subset of people, that is their job. That's kind of the mind set that I came into New Relic with, if I'm being honest. I was like, someone else knows about this.
JASON: I swear to god, this is like 99% of my experience with the web. I sure hope somebody is looking at that. (Laughter)
AISHA: Exactly. I was like, I understand that this is important, but like, it's not my area of expertise. But having been at New Relic for now almost a year, I'm like, okay, I see the value of understanding your systems. Even when you are a single-person dev team, having that sort of knowledge base about your application or your systems, however you're architecting, is still super important. And it comes back to having sort of your finger on the pulse of your application. And having the data available when you are trying to figure something out.
JASON: Yeah. I think it is super handy. And so I guess at this point, probably the easiest thing to do is to instead of asking you how hard it is, let's just do it. Let's just set this up. So let me switch us over into the pair programming view here. Okay. Before we get started, I'm doing a quick shout out. This episode, like every episode, has live captioning. That is provided by White Coat Captioning. Thank you, Rachel, for being here today and helping us with that. That live captioning is made possible by our sponsors. We've got Netlify, Fauna, Auth0, and your company? Get in and talk to me. I need one more sponsor. Thank you very much to the sponsors for making that work. And we are talking to Aisha today. Make sure you go and give her a follow on the Tweeter. Then we're talking about New Relic. So this is what we've been talking about today, if you want to go in and poke at that. But I think you had a different plan than just kind of jumping in here, right?
AISHA: Yeah, so we have a fancy, fancy demo, which is a funny way to describe it because it's named JenkStack. So Daniel Kim and Rory Douglas are other Relics who have been working on this for a while, on a number of things related to it. But that includes this wonderful demo that anybody can install and start playing with. But the goal of it really is to make visualizing the different changes that you might see as you're developing a Gatsby application in New Relic easier. So it comes packaged with errors. You don't have to make them yourself.
JASON: Nice. And that's this one here. The jankiest site on the web. Such a good name. What a good commit message. I love it. Okay. So I'm here. I've got this. I'm going to -- now, I just need to clone or fork? I need to fork this, right?
AISHA: Yeah, we're not going to fuss around with it too much.
JASON: Oh, wait. Repo fork. This one. There we go. I would like to clone the fork. And inside of it, I'm going to go into here. We're going to open this up so we can look at it.
JASON: Okay. So we have a basic site here. Gatsby New Relic, all right. So we've got all sorts of good things going on here. But I'm going to -- I guess I can just kind of set this up and deploy it, right?
AISHA: Yeah, you can absolutely deploy it. You might as well.
JASON: I think I cloned this into the wrong place, but that's okay. We're going to make it work. We'll Netlify init. Create and configure a new site. Put it on my thing, and we'll call this New Relic Gatsby demo. I'm just going to trust it to know what it needs, hit all the enter buttons. Going to install the essential Gatsby plug-in. Yeah, we want that.
AISHA: Seems right.
JASON: Okay. All right. So that's it. So then if I go Netlify open --
AISHA: It is going to want environment variables, but I don't know if that will stop it from building.
JASON: Okay. We can make that work. So now that I've got this building, we'll get the rest of it to deploy later if we need to add the variables. What should I do next now that I have got the site?
AISHA: Now that you have got the site, we're going to take a look at the package.json file as well as the Gatsby config.
JASON: Okay. So package.json.
AISHA: And here, let me pop over here. It may be easier for you to copy and paste this than for me to tell you.
JASON: Yeah, if you want to DM it to me, I can copy/paste it.
AISHA: Absolutely. So we are going to want to install the New Relic plug-in as well. I don't think it's in there by default because it's in these instructions. But I could be wrong. It's possible.
JASON: So we're going to run npm install Gatsby build New Relic.
AISHA: Yep, so that's our New Relic Gatsby plug-in. That's what's going to let us send all this data to New Relic. Then I'm going to give you a code snippet to add to your Gatsby config as well. That's just us registering that plug-in.
JASON: All right. Let's get this copied. Then I'm going to head over here to the Gatsby config. We've got plug-ins. I'm going to go right to the bottom of the plug-in's array. We'll put this in here. So we have the -- why did it try to turn those into links? What a weird copy/paste bug.
AISHA: Oh, wow. Yeah.
JASON: Odd choices. Okay. So here we get a New Relic license key, a New Relic account ID, a site name, and a feature flag.
AISHA: Yeah, and we're going to grab that key and ID in just a moment. But I've got one more change for you to make. That's also in your DMs. But we're going to update our build command.
JASON: Update our build command, okay. So I'm going to come in here and Gatsby build. Then we have an open tracing config file, which comes out of Gatsby build New Relic. So open tracing is a spec, is that right? This is like -- because this looks like it's part of Gatsby, not part of New Relic. We're sending a flag to Gatsby. That's what's allowing us to, I guess, format things properly to send in.
AISHA: Yeah, so I think that Daniel is in the chat. He can correct me if I'm wrong. But yes. Then we're saying hey, like setting that GraphQL tracing line.
JASON: I'm going to set our build command to be npm run build instead of Gatsby build. I think the default we set was npm run build. So I'm going to save this. I'm going to save the Gatsby config. Now I need these keys.
JASON: So I can set these a number of ways. The way that I'm going to choose to set them, because it pleases me, is to use the Netlify env set. I can put the key in. I'm just going to set these and add them off screen. Otherwise, they'll be exposed. Then we're going to have another one here, which is going to be the New Relic account ID. We need this. Then we have a site name. Now, this one I imagine is a value that can be anything. So let's call it LWJ New Relic Gatsby.
JASON: That's just going to show up in the logs and stuff so we can tell what it is we're looking at.
AISHA: Yep, exactly.
JASON: Then the last one is this janky site. Is that like a boolean?
AISHA: That's just a true/false, yeah.
JASON: So we want to start it true or false?
AISHA: Let's go ahead and start it true.
JASON: Okay. So we're going to set those. Now here's what's really cool. What I just did there, I did it in the command line. If I go to my deploy settings and look at environment and refresh the page, all of these are set now. So I need to go find this New Relic account ID, but the part that I really like about this is that when I run Netlify dev now, which will let us develop locally, it actually pulls these in, which is really, really nice. It also looks like it is pulling from a .env. So I'm going to turn that off, actually because I don't want it. Get all of you out of here, and I want all of you out of here. So we'll just use these ones, in case we want to edit. But now when it does it -- because the .env will override. Now when we do it, we have the environment variable from Netlify. Then we have the .env pulling in scale products and product account. Hooray, that's what we want.
AISHA: So nice. I feel like any time I see you or anyone on your team speak, I learn some new, to me, thing that Netlify does to make your life easier. I'm like, oh, this is so nice.
JASON: We're really trying to get better at these things being, like, so well known that we're annoying about it. But we haven't done a very good job of making people aware of our CLI, for example. It just doesn't -- we just haven't given it air time. So we're trying to make sure people know how much time it can actually save.
JASON: But yeah. So, okay. Now we've got our variables set. Now is the time I need a New Relic account, right?
AISHA: Yes. So folks can use trynewrelic.com to sign up.
JASON: And this one looks like it will get you right to the specific place you need to be. So I've clicked this. I'm going to put in my name. I'm going to put in my email. And on we go. Okay. So I'm going to check my inbox on my other monitor.
JASON: And let's see. Where's it coming?
AISHA: We're all learning stuff about the CLI. I love it. And to clarify, Daniel -- no, someone else, I'm not sure who this is, but someone is backing me up to say, yes, Gatsby has built in open-tracing functionality. The config file just allows us to use a specific packager to edit and send the trace. And it's Ruairi.
JASON: What's up? What's up? So now I have my email. And I'm going to paste this in. I need to do a password. I'm going to autogenerate one off screen here.
AISHA: Makes sense.
JASON: Oh, boy. Doing it?
JASON: Come on. You can do it. It says syncing. That's never -- oh, boy. Oh, here we go. Okay. So here's -- this is going great. Okay. So New Relic. Then this is my -- and we need a password. Let's autogenerate a password. Great. Got a password. We're going to save that. Then we're going to drop it in here. Save it. Now do I have an account?
AISHA: It sounds like it. I hope so.
JASON: So now I have my account. I'm saving. And it's setting up my account.
AISHA: Exciting. So once it has set up your account and it looks like we're just about there, we are going to head over to look at your keys. You can hide that again, if you'd like.
JASON: So I'll pull this off screen again. Let's just look at where I would do this.
AISHA: There's a whole lot going on here. So you can go up to where your face is.
JASON: Where my face is.
AISHA: The top right.
JASON: I think I'm in some interstitial.
AISHA: Oh, I see. I'm totally looking at your browser window.
JASON: It's right there! (Laughter)
AISHA: But yeah, you can -- I should be able to click out of that. Or just go to one.newrelic.com.
JASON: Oh, it totally worked. And to answer the question in the chat, yes, you can do Netlify m:import then the path of the .env file and it'll import the whole thing at once, which is really, really handy. It's pretty nice stuff. So, pretty great. I would try it. So now I'm going up to my face. When I click this, it's going to show my API keys. Or are they hidden?
AISHA: It will show part of your API key.
JASON: I'm going to move off screen then and click this API keys button. It shows me -- well, let me -- do I -- okay.
AISHA: So you're look for your ingest license key.
JASON: These are like masked. So I'm looking for this key.
JASON: Then can I just copy it? I can. I can copy the key.
AISHA: And you can also -- you're also going to grab your ID from that same spot.
JASON: Okay. So I'm going to edit these to be those variables. So I've got my key. Then I need to get my site ID.
AISHA: Yeah, where it says account, the last part of that is your account ID. That's what you're going to want to copy.
AISHA: That also looks right, yes.
JASON: Okay. So I'll just grab that. And I'm going to drop that in. I'm going to save my environment variables. Then I'm going to get out of the settings so that I can bring it back in. So our environment variables are set now. Theoretically speaking, when I build the site next by adding all of these things -- actually, hold on. Before we do that, do I need to do anything else before we push this? Or were the environment variables the last thing?
AISHA: No, that was it.
JASON: Okay. So I'm going to add everything, then we're going to git commit and say add new relic. Then we're going to push. And we'll see a deploy kick off here. All right. So this should be cached. We'll see how much of that cache gets saved because we changed the config. It'll npm run build. That's what I want. And we'll just see if it explodes. It should all work because we got the pieces in place. Like the environment variables are there.
AISHA: Yeah, we should be good to go.
JASON: Old lock file. How dare you. Npm version 8. I didn't even know we were at npm version 8.
AISHA: You know, I feel like I know where we are, and then it's like, wait, actually I've missed like three major versions.
JASON: Yeah, no idea. Oh, rohit, yeah, I'm excited. To be able to import all at once is huge. The thing I love about this flow, you may notice, I didn't have to leave my CLI at all. I used GitHub CLI to get the repo forked and cloned. Then the site deployed to Netlify through the CLI. We set environment variables through the CLI. We deploy by pushing on Git. So it lets me stay where I am, you know. Which is great. I love that I don't have to go and open a bunch of different websites to click buttons to make things happen. I just get to -- I'm right here. I'm already in the CLI. Let's make this happen.
AISHA: You don't have to swap between a bunch of different contexts.
JASON: Yes. And the other nice thing is because this site -- like, anybody I give access to this site, they can run Netlify dev, and it'll also import the environment variables for them. It's a good way to sync along a team. If I need to change an environment variable, I change it and everybody's changes.
AISHA: Oh, that's super nice.
JASON: Yeah, that's really handy. And I can see it's doing its work. It's janky. Please unfix. (Laughter) Love it.
AISHA: Oh, my goodness. So yeah.
JASON: What's up, Tony? Good to see you. All right. So we're getting close here.
AISHA: Yeah, so let's maybe back up a little bit and talk about that plug-in we installed.
JASON: Yeah, let's do it.
AISHA: So the main benefit of this is that we're getting information about our build process. So every time now that this site builds, we're going to send additional data to New Relic about that specific build. The idea here is that we're getting more insight into how our builds and eventually our build time are affected by changes we made to the site. So New Relic uses Gatsby for the documentation website, the developer website, and the open-source website. Particularly the documentation site is just huge. So many pages, so many images, all that. So what might be a small change on a smaller site can be significant in terms of build time. So the team now is using this plug-in, in conjunction with New Relic to test out changes.
JASON: And I see some really fascinating stuff happening here. We ran the Webpack bundle analyzer. That takes time. Then we're building out a lot of -- we've got pages. What else is happening here? We're doing 250-ish pages. We've got 106 pages total. Then here are these New Relic logging. We can see the bundle sizes. We can see there's benchmark data. We're sending our trace data to New Relic here. This is pretty exciting. So we're not just -- I'll tell you what I thought was going to happen. I thought we were going to get like live site data.
AISHA: Which you can also do.
JASON: But this is really exciting. We're going to get that data about the site itself, like the build, which is honestly with Gatsby, this is one of the biggest complaints people have. Gatsby takes a long time to build. A lot of that is -- credit where it's due, Gatsby does a ton of work. It has all these things for ingesting data and modifying it and building pages out of it and optimizing images. All that stuff takes computer power, right? It slows things down. So if you, as a developer, get those things set up in a way that's really synchronous and blocking and not as optimized as it could be, you could make that so, so slow, so fast. But hey, we built. Everything built. It did what we wanted. Our site is live. Do we get some good jokes on this page too? Oh, I love it. This is so good. All right. I love it. Check this out. This is very, very good. We've got some pages. JankStack. That's really fun. Oh, there's some fun stuff here. Looks like we can win some stuff, which is fun.
JASON: Get a power bank.
AISHA: See, it's a good thing that Daniel built these things into the demo, or I would just pop on here and forget to say them. So there is a giveaway. You get a free power bank if you follow these steps. And I believe the last step is to tweet about it. Yep.
JASON: Okay. So this is something fun, chat. You can win some stuff. We've got some products. It looks like we broke our products. We've got -- oh, and that's a link straight to the plug-in. So we've got ourselves a site. This site has now built. We saw instrumentation going out. Does that mean if I go back to my New Relic dashboard, I just have stuff?
AISHA: There is stuff, yes. I sent you one more link. We do have data now, but as it is, we don't really have a way to visualize that data. It's there. It's chilling. But in order to get some more meaning out of that data, we can use this handy Gatsby quick start.
JASON: Oh, because -- so we have data. Before I install that, can we look at what the raw data looks like?
AISHA: Yeah, absolutely.
JASON: How would one do that?
AISHA: So you can just click on New Relic One to get back to your main page here. We should see something happening. Yeah, click on the New Relic Gatsby panel.
JASON: And we have not too much yet.
AISHA: Let's go to -- yeah. Logs.
JASON: It should definitely be there. Hm, maybe something happened.
AISHA: Something could have happened. It's entirely possible. And I'm sure one of either Daniel or Ruari will tell us.
JASON: Is 90 seconds the right amount of time for that to take?
AISHA: Okay. The entity work is still in progress. So we need to go to chart builder to see the raw data. Ah, I see. So if you hop over to the menu along the top, there are a lot of menu items. But let's go ahead and pop over to chart builder. If you go up to the primary -- the left icon at the top. Thank you.
JASON: Which one is chart builder? This one?
JASON: There we go.
AISHA: Go ahead and take a look at the logs again.
AISHA: Hey, we have data. It's in there.
JASON: And like this is the unstructured stuff. This is just whatever got send in. It's all the basic data. So this is sort of useful, but I don't really understand. Honestly, it feels a lot like looking at Gatsby's logs. I get a lot of data, and I kind of get it. I can go through and figure out, okay, if I look at this log, 106 of 106. Okay. I've inferred I have 106 pages on my site. But I don't really get what's going on here, if I'm completely honest. So that's what this is going to -- nope, not that. This one. That's what this is going to solve.
AISHA: That one, yeah. So you can do this on your own. You can create your own visualizations for however -- for whatever data you're interested in. You can even use -- like literally build something out in React and have a whole branded system that shows you your data. But if you go ahead and click that install quick start --
JASON: Wait, I'm already in. Let's see. I am logged in. So now that I'm logged in, do you recognize me? You don't recognize me. So if I click this, maybe I'll just click this button and it'll do it. Did it do the thing?
AISHA: So, we should have seen -- we don't have to do the installation step because you've already instrumented the site. So let's try clicking that --
JASON: Oh, okay. So, sorry. I saw a note from your team to click this middle one up here.
AISHA: Yep, exactly.
JASON: So prebuilt dashboards. Then I started typing Gatsby. Found it.
AISHA: We got there. Yeah! We can skip this step.
AISHA: That was the installation step I was saying we could skip. And now, there we go. Now that it is up and running, now we have got some stuff we can dig around in.
AISHA: So this is basically what we think is going to be useful to you as a Gatsby developer. And to my knowledge, Ruairi, who is grocero in the chat, is the hands behind this. So like I said, he can fill in if I'm wrong. But the idea here is we're pulling out what we think you're going to care about so that you don't have to build out these charts yourself. So when you're in your APIs and plug-ins, for example, you can see, okay, which of these APIs is taking the longest out of all of the APIs I'm hitting as I build this site? And that includes the built-in Gatsby APIs. So, okay, I see that -- and you can click on each of these to remove them from the visualization to make it easier. So if one is just overwhelmingly large, you can get a better idea of what the rest of them look like.
JASON: Got it. That's great. And you can see 85% of our build was around functions. So we can look at what caused Gatsby functions to be that much slower. Then we can see what percent.
AISHA: And all of these are customizable, too. So if you -- yep.
JASON: Oh, this is cool.
AISHA: Edit any of these charts. This is one of my favorite things, but it's called Nurkle. This is Relic's implementation of SQL. So you query your data however you like.
JASON: Every time I learn something new about New Relic, I understand why your swag is the knuckles with "nerd life" tattooed on it. Yeah, you bunch of nerds. I love it. It's fun. So basically what we're able to do -- let me see if I can understand this. So my SQL is rusty. We're presenting this sum of the duration in milliseconds from function. So we want the total amount of milliseconds spent on functions as functions. So I'm assuming the span is, like, the log entry. Like the open tracing entry.
AISHA: I think of it as a nugget of data. That's a span.
JASON: Got it, got it, got it. Then we say where the plug-in is not null, and facet would be like where we split it. What would cause the --
AISHA: Yeah, that's like grouped by.
JASON: Then we limit to 1,000. This is saying how long it took to run functions for the last 1,000 builds. As a percentage.
AISHA: As a percentage.
JASON: Got it. Okay. So this is how long the build -- so functions took 15.97% of the build time. I can track that for each one. Understand, understand. And if we wanted to check for, like, a given plug-in, like we wanted to see if the plug-in was -- let's say we installed, you know, the Gatsby plug-in Unsplash. Turns out it was trying to optimize the images for every single image on Unsplash. That would probably be very slow. So we could check to see how long does the Unsplash plug-in take? How long does the Contentful plug-in take? I would just edit that to say Gatsby plug-in Contentful.
AISHA: Yeah, you would -- I think it would be in your clause there. But yeah.
JASON: So if I can actually do it, it would be like where plug-in is Gatsby plug-in Contentful or something like that. Is that right?
AISHA: I think that where clause is getting the total, but your inner where clause is -- yeah. Where it says functions.
JASON: The other where clause?
AISHA: Yes, you have two.
JASON: Oh, I'm doing it -- I understand. Okay. I'm following now. Got it. So I would change this one. Oh, and it autocompletes when I do that. That's way easier. Okay. All right. So I can do where the plug-in is Gatsby transformer sharp. Then I can run and see. Sharp didn't take that much time. Oh, that's slick. That is super slick. Okay. So then I can make that back to what it was. And this is just a label, right. So this is kind of arbitrary, whatever I want it to be.
JASON: This is cool. Okay. I love that. I mean, SQL is its own thing. You got to think in the nested loops of SQL, but once you get your brain around it, it is really straightforward. The nice thing is once you learn SQL, every service uses it. Like New Relic and Mode. If you get into databases, it just lets you poke around and stuff nicely.
AISHA: Absolutely. This is extremely transferable skill.
JASON: Absolutely. So we got logs over here. This is -- okay, that looks like the logs. That's what we expected.
AISHA: So this is the logs, but the nice thing about that view is if you scroll down on the right, we're essentially parsing those logs.
JASON: Look at that.
AISHA: So each of those is itself a query. And so we have this nice labeled thing. You don't have to dig through yourself. You can say, oh, look, I have 242.
JASON: Look what just happened, everybody. I said I wanted to see errors, and it just filtered down to only the errors. And all I had to do was click in here and it just did that. I was like, what's in here? It was like, here's a bunch of options. All right. That's slick. Like, that's really nice.
AISHA: Yeah, once you start exploring, there's so much. And there is a lot of power in that.
AISHA: And over time, you'll be able to see -- you'll be able to compare each of your builds. So you can -- let's say we're going to try something new. We're going to swap out this plug-in for another plug-in. What are the implications of that? How do all of these metrics change when we try to build again?
JASON: Yeah, okay. So I can override, I think, this janky.
AISHA: Yes, you can change that to false.
JASON: And I think I'm just going to override it right in the .env. That way it'll -- or wait, that's not going to work. I need to go edit it in the dashboard. So everybody, please hold while I pull this off. Then I'm going to turn off the feature flag. Deploy settings, my environment variables. Then I'm going to turn janky site to false.
AISHA: And there are actually a couple other changes to make, to make the site less janky.
JASON: Yeah, let's do it. I've edited it to janky false. I'm now ready to make some -- and I'm just going to delete that, otherwise I'm going to get confused. What else should we adjust?
AISHA: So in your templates, which is in your source directory, we are looking for product single.js. That just has an unnecessary GraphQL query at the bottom. So we can get rid of that.
AISHA: The whole thing. It's just intruding.
JASON: Get out of here. Then, let's see. That doesn't even try to send anything in, does it?
AISHA: Right, yeah, exactly. We've already got it covered. We don't need that. Then we've got unnecessary Node packages in there as well. We have faker, which is funny. And Gatsby source contentful.
JASON: In here? Or in Gatsby config?
AISHA: I think it is in both.
JASON: So here's faker. I can get rid of that. Then we've got Gatsby source Contentful. Get rid of that. Then I'm going to go into my Gatsby config.
AISHA: It might not be in there. That was kind. All right. Then yeah, I think that is going to be it for us. We can build again. ¶ Unjank my heart Build the website again ¶
JASON: Oh, boy. Better you than me to try that song. (Laughter) Oh, it's so good. While we're waiting for this to build, will you talk about your conference?
AISHA: Oh, my god, yes. (Laughter) So, I dearly love musical theater. And I also dearly love my tech communities. So I thought what better way to celebrate that love than to create a conference? It was actually really inspired by Natalia Margolis doing call optimizations the musical at Bang Bang Con in 2019. It's this incredible performance where they teach you about call optimization through Disney parodies. It's fantastic. Definitely, yes. Google that.
JASON: Let's find this. So here's this. We're not going to watch it. But you absolutely should. It is incredible. It is so good. Like, I don't know Natalia, so I'm just going to assume that she's equally awesome, but Anjana I've seen speak multiple times. She's hands down one of the most entertaining speakers I've ever seen. She's so engaging, so on top of it. She knows this stuff inside and out, and she's just exactly the right kind of weird to keep you glued to the stage the whole time. The whole time. She's so creative and gets off the wall with it. It's amazing.
AISHA: Yes, she's naturally weird and funny and great.
JASON: Yes. I mean, she's the kind of person that like when you see her on stage, the whole time you get this like swelling in your heart and this huge smile on your face. You're like, boy, I hope I get to hang out with her. I want to be at her table at the afterparty.
AISHA: Literally the first time I saw her speak, she was talking about the lambda calculus. I was like, what?
JASON: Was that in Romania? Yes! We were there. We were both there. Oh, it was so good. That was so good. Okay. We got to find that.
AISHA: Oh, my goodness. I couldn't believe it. I was sitting there thrilled, thrilled. It was hilarious. I was not expecting either of those things.
JASON: Yeah, it was so good. Let's see. She's done this a few times. Where is the JS Heroes one? Hm. It's here somewhere. I think it's called the universe in a single arrow.
AISHA: Oh, yeah. That sounds right.
JASON: Is it posted, though?
AISHA: Oh, yes.
JASON: This is the one. So this is an absolutely incredible talk as well. Just so engaging. With something that you would think is maybe the most boring topic you could pick. Hey, let's talk about lambda calculus. I'm sorry, esoteric math? No, thank you. It was the only talk I watched literally all the way through. I never checked my phone a single time during that whole talk. All right. Okay. So -- wait, we didn't talk about your conference. Based on Anjana's stuff, you got inspired.
AISHA: I was like, what if we just did this? Because Anjana and I talked about it while we were in Romania. Sort of like half jokingly. What if we had a whole conference that was musical or that was like musical tech talks essentially? Then I saw them do it, and I was like, we will have this.
JASON: Have to.
AISHA: We will make this happen. And so it was meant to go up along with Self Conference, which is perhaps a more traditional conference we do here in Detroit, in 2020. But that was 2020. As you can maybe see on the screen, I thought we might perhaps only push it for a year. It looks like it'll be a few years.
JASON: We got to be safety.
AISHA: Got to be safety, exactly.
JASON: Not back yet but hopefully back soon.
AISHA: Yeah. That's my hope.
JASON: Hello, Anthony. Thank you for the raid. Welcome, everybody. We're currently learning about Title of Conf, which is a musical dev conference we're hoping we'll see soon. Do you think 2022 or 2023? What do you think?
AISHA: You know, I had hopes for 2022, but because we have not yet started planning, I'm going to say 2023.
JASON: (Laughter) You heard it here first, folks. 2023, Title of Conf is back. Prep your musical parodies and teach us something through song. So the other thing that we're doing today, maybe what we're actually focusing on, is New Relic. We have built a Gatsby site, which is living here. This is our JankStack Gatsby site. We built this and installed New Relic instrumentation. Now we have a dashboard, which is here. Yes, this is my dashboard. I'm going to go to my dashboards over here. I've got my Gatsby build dashboard. So in I go. Now we've got two builds. Our newest build, we got faster. That's an improvement. So then I can jump in and look at APIs and plug-ins. Okay, all right. Things look okay.
AISHA: These are going to be averages. So they'll take -- okay. All of the builds as of right now, all of the two builds. What is the average time here? Then when you get into your metrics, you will see more -- you'll be able to see that differentiation between the two.
JASON: Got it, got it. Okay. So we use less memory. Those are good things. We have, let's see. This is a little teeny-tiny text. We have bootstrap time, instantiation time. I mean, it's just cool. It's so helpful, especially thinking about if I'm working on a site that is sufficiently complex or I'm working on a suite of sites, you get into a more real-world scenario where you have a marketing team, you have a product team, you have your events team. All sorts of people doing different things on your web properties. Maybe those are subdomains. Maybe they're proxied under the main site. But each is going to be building and deploying. Even if you have a dedicated office team, there's no way an active dev team pushing multiple times a day and three or four properties with active dev teams pushing three or four times a day, no amount of ops person can actually monitor that manually. So seeing that here with that little bit of work we did, you know, we're like an hour in. Is that right? Just checking time to make sure I didn't totally blow it. No, we're right. So about an hour, we were able to set up all of the instrumentation, get the site tweaked, get the plug-in running, and now we have passive reporting. Every time we build the site, we update a dashboard that shows is this site getting faster or slower to build. Are we using more or less memory? How much pressure are we putting on our system every time somebody pushes to this site? If somebody makes a change that's a rough change, we should see that spike. I saw something that I'm going to ask you about now. I saw a button that said alerts.
AISHA: Yes. We can make alerts.
JASON: I would like to make an alert, please.
AISHA: Let's do it. I think there might be one, but let's try it.
AISHA: Oh, I see what you were saying. Yes, please, continue what you were about to do.
JASON: Honestly, I'm not even sure. I just saw this thing. I saw create alert condition.
JASON: I was like, what does this button do?
AISHA: Let's press it.
JASON: So my condition name is -- whenever I get freeform names, I want to swear. I'm not going to do it. I'm not going to swear. So instead, I'm going to say it's busted. All right. So when it's busted, we will define your signal. So the critical threshold can be where? Just whenever I want it to be?
AISHA: It can be wherever you want it to be, yes.
AISHA: And we can see the actuals, yeah. Over there on the right.
JASON: Over on the right, okay.
AISHA: They're very faint little spindly bars there.
JASON: How do I move this?
AISHA: I think you can, like, click into the time series.
JASON: I can click into the time series?
AISHA: Can you drive that?
JASON: I was hoping I could. It looks like it wants to let me, but I don't know. I'm doing something wrong. Wait, get out of here. Oh, okay. It's because I'm so zoomed in. I can't see all the settings down below.
AISHA: I'm with you.
JASON: So let's set it at 0.1 so it fails. I want to see what happens.
AISHA: There we go. We got it.
JASON: For at least five minutes. At least once in five minutes.
AISHA: Yeah, so this is like if you -- something out of the blue happens and, you know, there's just a blip. You're not going to get pinged for that. But if it makes sense, you know, you can say if this happens so many times in so many minutes or if this happens at all or if this is sustained for -- it just depends on the metric that you're tracking.
JASON: Yeah. And this is I think the really interesting thing. You're always going to have some outliers. So if you have, let's say, you're measuring page load time. You want to get alerted if the page takes longer than ten seconds to load. Your average page load time s let's say, 1.5 seconds, 2 seconds because you're using something super performant. You want to get notified if the page load goes above 10 seconds. Someone, somewhere in the world is going to be on 3G and it's going to take ten seconds. You don't want to necessarily get alerted for that one person. No amount of optimization is going to fix that.
AISHA: Right, exactly.
JASON: But you can say, hey, if more than 25 people in five minutes take more than 10 seconds to load the site, something is probably wrong. We should look at that. So alert me then. So I'm looking down here. We could do some fine-tune stuff. This is cool. Like if we had hundreds of thousands of requests, we could do seconds instead of minutes. It looks like there's some cool stuff here. Event flow, event timer, cadence. Stuff I'm sure a DevOps person would have opinions about. I don't, so I'll take the recommended option. Fill gaps with nothing. We don't need it because in this particular case, you know, data is data. If we don't have it, we don't want to consider it. And I think it sounds like this would also be more if you were looking for something to dip below a threshold. You would want the data to stay high so it didn't show zero. That's a guess. If I'm wrong, correct me, chat. Then we've got, yeah, policy condition, violation. These are all interesting. This is more like if we were trying to -- this would be like how we set up pager duty, how we set up the policies.
AISHA: Yeah, exactly.
JASON: Okay, I'm going to save this condition. Wait, couldn't save this condition, check for errors. Policy is invalid. Policy name.
AISHA: Oh, (laughter).
JASON: My policy. Save condition.
JASON: All right. So now we've got -- I'm going to dismiss that one. Condition was saved. And now I should be -- I should get alerts, right?
AISHA: Yeah. Probably the next time that you build.
JASON: Let's do a build. So I'm going to make a small change. We'll go into source, pages. We'll get to the index page. I'm just going to add -- I'm going to break this layout. I'll just say neat. Then down here, just add some extra jank, and I'm going to push that up. So now that this is building, we're going to get more data. So that'll come back here. We're going to get this thing going. And let's see. Oh, here's a question from the chat. How is this different from something like Sentry or Roll Bar?
AISHA: Yeah, that's a great question. New Relic is -- so the reason we describe it as an observability platform is that it combines a lot of functionality that folks get from using several different services into one place. So you're not only getting logs. You're not only getting APM. You're getting --
JASON: I'm going to stop you to ask for an acronym definition. I don't know what APM is.
AISHA: Sorry. Application performance monitoring.
JASON: Gotcha, okay.
AISHA: So you're pulling all of these sort of data things into a single platform that has -- that can see more of your systems at once.
JASON: Got it.
AISHA: And that allows you to follow traces between different parts, in addition to just being convenient.
JASON: Great. And we can see now that Gatsby cache kicked in, and this was twice as fast this time around. So, great news there. That's really what we're looking for. Then we can poke in here. This should have alerted -- I think it did, but I don't know. Where would we see alerts? Is that somewhere else?
AISHA: Yeah, so --
JASON: My policy doesn't exist, so I don't know that I made it do anything when it alerts.
AISHA: That's fair. Let's go to -- I'm terrible about these menus. I have to poke around every time. Try your -- yep.
JASON: Oh, I got to actually click on it. Alerts, analyze, overview.
AISHA: Cool. So we're not getting anything yet.
JASON: I'm also wondering, I don't know what I did with my policies. So I'm not even sure I did a thing. Alert conditions. Add a notification channel to receive alerts. We didn't do that. At least once in five minutes. That should have -- actually, you know what, it might not have triggered because we might have made it fast enough to not hit the alert.
AISHA: We actually used the cache this time too. Yeah, I don't even remember what you were -- this was duration for the plug-ins.
JASON: Let's go look. We may have beat our conditions. So I'm going to look at my -- wait. How do I see? Create alert condition. So we've got this one.
AISHA: I think you said 0.1.
JASON: Oh, yeah. No, that should have done it, though, right? No, that's not the one. Dang it, it was too fast. All right. But I can break it. Watch. I'll clear cache and deploy site. That'll make it slower again. We have to pull the whole cache.
AISHA: This is the JankStack, we have options.
JASON: Oh, we can make it worse. Oh, boy. We should probably clip that. That feels like it needs to be a sound effect. But yes. Oh, hey, Amberley is in the chat. What's up?
JASON: So while we're waiting for that to build, because I think this'll take about three minutes this time because we just cleared the whole cache. We can poke around in here a little more. So I feel like we're focusing very much on the build stats here. But just to reiterate, because I know a lot of people joined after we did the initial overview, this isn't all we can measure, right? What else could I instrument theoretically on my site?
AISHA: Oh, yeah. Absolutely. So I'll repeat what I mentioned earlier. You can send whatever data you would like, and I say that -- I feel like that's sort of a wishy-washy statement, but actually, you can write JSON and just send that to capture whatever you would like. But usefully, you can also see metrics we'd get from the browser. So you can see things like page load times. Depending on the type of site that you're building, you may have -- depending on the system you're instrumenting New Relic with, you'll have access to different products. But at a sort of baseline, you can use the New Relic browser with a Gatsby site or a Jamstack site in general. The browser agent will give you sort of a -- I think the link you had also would have worked.
AISHA: So I think -- oh, Ruairi has -- I was just going to ask. I believe this is still included in the plug-in. That gives us -- that already gives us access to the browser agent.
JASON: This is a different one.
AISHA: So we've already installed this. Those are two separate things.
AISHA: So you don't actually need to put the whole thing in there. We're going to just grab account data, essentially, from there.
JASON: Got it. So we'll need to copy that information and turn it into Gatsby config. So I'm going to go in here. Grab all of these bits. Staging production. So we can just do the one. We'll just do the one bit. While we're making that work, I'm going to npm install. Gatsby plug-in, New Relic. We're going here to the Gatsby config. I'm going to put a new plug-in down at the bottom here. I'm going to probably just -- do I just keep production if I want?
AISHA: Uh, yeah.
JASON: Simply pass a single object like that, which is what I want.
AISHA: Yeah, we don't need all this.
JASON: Keep it simple, right? So get that one out of here. Then we need some integer. That's going to be the bit we pulled out of here.
AISHA: Exactly. I think it's all at the bottom of this.
JASON: So here's the account ID. This is all public because it's going to be in the setup. So I'm going to go here and get the account ID. I'm going to get the trust key. I've got to quit tabbing. The trust key is the same. The agent ID. The license key. And finally the application ID. I'm realizing now I could have used a multicursor and gotten all of this at once. But who wants to do things the easy way? So then I save that. And that's that. If I deploy this, then we're in business?
AISHA: I'm questioning whether those stay. I think those stay strings. So we should be good.
JASON: So I don't really need these because it should just use it. If we didn't do one, I'm assuming it works. So let's just add it to the beginning. I'm going to add production. We're going to put that into our package.json. Then we're going to kick off a build. We get exactly one try at this because we're going to run out of time otherwise.
AISHA: Oh, my gosh. Yes.
JASON: That's okay because we got all sorts of good stuff going on here. We're going to git add everything. Yep, git commit. We're going to say add browser instrumentation. Need to add production to the config as well. So let's do that. We'll just expand this to be a git commit all. Speed run. Let me make sure that worked. Yes, git push. This should take us about a minute, of which we have four. So hey, we can try this a few more times. While we're waiting on that build, we can go and look at what our alert did because we should have one now. So this should all be deployed. I'm going to go back here. We're going to go to our dashboards again to alert, analyze, and overview. This should give us one. Yeah! Look at it! I love it. So we got one, right? Is that right? Did we get one?
AISHA: Oh, wait.
JASON: Aw, okay. All incidents. Still not 100% sure that I'm doing this right. Like, I just kind of clicked some buttons and definitely did not set up this policy very well. So let's go look at our Gatsby build again.
AISHA: I'm with you. And clearly I need to brush up on my alert demos.
JASON: Wow, they're getting so much faster. Did we accidently make this too efficient?
AISHA: Right, we also -- like, we went back and changed the site. I don't think we actually changed anything about the alert itself. We did need a channel. Like, we didn't tell it where to send an alert or anything.
JASON: Okay. And let's see, did this even go -- it still didn't get over the threshold. So we just made the site too efficient. There is no critical threshold here. So I'm going to say -- oh, wait. No, that's fine.
AISHA: Yeah, the notification channel is in a different place. But yeah. He's like, where's the jank?
JASON: No jank? I forgot to reset the jank equals true when we rebuilt without a thing. So we didn't make it slow. We made -- I'm sorry. We did too good a job on this website. It's just too fast. We can't trigger alerts. Sorry, everybody. (Laughter) I apologize for the perfection in my development efforts. So this should go nice and quick for us. We should be getting running. Then as soon as this builds, we should be able to load the site a few times. That should give us some browser metrics, which is very exciting. So, come on. Do the thing. Here we go. HTML, static pages. We're getting close.
AISHA: Things are moving. Collecting stuff.
JASON: Mm-hmm, mm-hmm. So while we're waiting for this to finish, where should people go if they want to learn more?
AISHA: Yeah, absolutely. So you can sign up at trynewrelic.com/gatsby. That would help me, give me some data. But that's going to be a great place to go to sign up.
JASON: And this is all free. Everything we did today is free. Am I on a free trial or anything like that?
AISHA: Yes, so at the free tier, you get a thousand gigs of data ingest.
JASON: Okay. It looks like 100 gigs.
AISHA: I definitely said a thousand. It's a hundred. It's a hundred gigs for a month of data ingest. And one full account. So
JASON: Everybody go load the site. It's deployed. But yeah, so we can all go sign up. Let's see. That one worked. So we can all sign up. We get 100 gigabytes a month of data ingest, which is quite a bit, if you're like one site, all those sorts of things. That's free forever. That's not like a --
JASON: Love it. You'll note I didn't have to put in a credit card to get this. It's just working. Now that I've got this, I have my browser data. I'm going to go and look at -- no, not here. Or wait, I want to keep that open. I want to look here and go to my dashboards and browser. And I have a site. So here's Learn With Jason Gatsby. As we start looking in, we've immediately got core web vitals and averages in 95th percentile. We have initial page load. Is everybody out here loading this site, clicking around so we can get all the data we want? Poke at these and get some data loaded in here so that we can actually get this data. First input delay, 7 milliseconds. These are all green. These are good things. Pretty decent amounts of data. We can kind of see what's going on, front end versus back end.
AISHA: And these are what we think are going to be useful to most people. You can play around. Make your own dashboards.
JASON: And is this realtime? I was refreshing. Did I have to?
AISHA: You know what, I don't know. It is realtime. I want to say that it's realtime, but I flit around so much. When I demo. I was like, I've never just sat and looked at it.
JASON: So we've got data coming in as people are loading. This is super useful information to be able to just see what's happening on our site. We could put this up, if we were in an office, on a TV. Did anything go red? Everybody panic. You don't have a TV in the office? That's fine. Set up alert thresholds. But with that, we are out of time. Is there anywhere else? So we know trynewrelic.com/gatsby. So let me reshare that. Try it out. Anywhere else people should go?
AISHA: Yeah, so we also stream on Twitch. We are new_ relic on Twitch. I'm AishaCodes on Twitch and Aisha Blake everywhere else. We'll also be at CascadiaJS and Ruby Con coming up. Swing by the booth, come and hang out.
JASON: Let me drop all of these in here for everybody so you can see those. Then CascadiaJS is coming up. So you can still get tickets to that, it looks like. And yeah, look for some definite IRL tweets of me and Aisha hanging out because she's coming to Portland.
AISHA: Yep, we're going to be three weeks in a row.
JASON: Absolutely. We're going for the high score here. All right, y'all. So this show, like every show, has been live captioned. We've had Rachel from White Coat Captioning here with us all day. Thank you so much, Rachel. That's made possible by our sponsors, Netlify, Fauna, Auth0, all kicking in to make this show more accessible to more people. Means a lot to me. I hope it means a lot to you. While you're checking out things on the site, look at the schedule because we are just packed, jam-packed with amazing content. I think we might even have one on Tuesday that I just forgot to list. So, sorry. We'll get there. We're doing distributed databases on the Jamstack. That's going to be super cool. We're going to get into progressive web apps, Chakra UI. We're going to do Svelte Site with Auth0. Some CSS wonkery. It's going to be an absolute blast. Make sure you head over, click this add on Google Calendar, follow on Twitch, all those things so you don't miss these episodes because they're going to be a blast. Aisha, you can follow Aisha on twitter.com/AishaBlake. Go and do that. Any parting words for everybody?
AISHA: No, just thank y'all so much for hanging out with us and learning a little bit more about observability. And why it's important.
JASON: Aisha, thank you so much for hanging out with us today. Chat, stay tuned. We're going to find somebody to raid. We will see you next time.