Analytics, Logging & Observability

[00:00:00]
>> Brian Holt: OK, let's do two things. I think it's going to get mad at me for trying to enable analytics on two different things. That's going to say you have this on another project. Yeah, I don't want to pay for you. Oh, OK, this one's free. OK, so we're going to enable web analytics. And normally what you would have to do is you'd have to go into your source and into your app and into your layout, and I think I did this for you.

[00:00:35]
I did, right there, this line number 2. So I installed from Vercel analytics Next, this analytics component, and then I just wrapped your app in it right there. So analytics, this is going out on every single page. You can think of this like putting the Google Analytics snippet on the page, does the exact same kind of idea. But now you can see we're starting to just get web traffic on here. So let's go click around a little bit, we can see a little bit more stuff happening.

[00:01:11]
Where's my visit button? There we go. We'll go to analytics, refresh, click on this, read article, we'll click new article, we'll click account settings, we'll click home again. All right, so now in theory, if we go back and look at our dashboard here, it's, you know, lagging a little bit here, but you can see that we have some traffic coming in, right? Oh, you know what, I bet you I know exactly.

[00:01:51]
I have this on here, so let's refresh this, read analytics, blah blah blah. I'm always impressed and horrified, impressed by from my own personal usage of how well these pop-up blockers work, and also horrified because now I get no data about any of you because I do have analytics on this, right? But you can see I even pop-up block myself here. Yeah, if you look at my course here, network tab, and we look at, you can see this is getting blocked, a.holt.courses, which is analytics.holt.

[00:02:23]
I thought I was being clever by redirecting through my domains like they'll never find me out. They found me out immediately. It never worked. Anyway, all that to say, maybe this will show a bit more traffic now. Yeah, so you're going to start to see a bit more because I stopped pop-up blocking myself, or ad blocking rather. It looks like we had someone from the UK that's jumping in as well. Very cool.

[00:02:56]
So pretty easy. I'm not going to say Vercel analytics is the most robust, but this is plenty for most people, right? You see what hosts are coming in, what routes they're hitting. You can track UTM parameters, which is marketing. You can say this person came in from Google, this person came in from Yandex, right? That'll track all that stuff for you, where you're getting referred from, what browsers people are using, Chrome, Firefox, all that kind of stuff.

[00:03:27]
You can do custom events. I can fire off events for how many summaries worked or failed. I can fire off events for emails that we've sent, right? That all could be tracked here where you'd have to upgrade to pro. And flags is kind of cool too, that's up here at the top. They don't have on the website themselves feature flagging, but they have a bunch of integrations with companies that do, and Vercel works pretty well with it where you can say show this user this treatment, show this user this treatment and compare how well they do against each other.

[00:04:01]
That's more like AB testing kind of stuff. The other thing you can do is I want to show this feature and roll it out slowly, so this user opted into it so you can test things before they go out. These are the three vendors that they have. I've not Static, I've heard good things about, I don't know too much about Hypertune or Growth Book. I've also used Launch Darkly to manage these things before, another great product that does that.

[00:04:29]
So that's a very basic amount for web analytics. Any questions here? Is that just generic to the sake of you can't see who the logged in user is or anything? It won't actually connect to Neon or anything. Yeah, no, you won't be able to see. They might. I don't see anything that shows you IP or anything like that. I think Google will be a bit more invasive about this. This isn't really meant to be the most complete thing.

[00:04:53]
It's really meant to be for something like this where it's really basic and you just want to get it out there to track stuff, or maybe stated differently, I wouldn't really worry about compliance here, right? I think this would be GDPR compliant out of the box. Don't quote me on that, but I believe that would be the case. I don't see anything in here that would be PII, personal identifiable information.

[00:05:23]
I could work on my bounce rate, I'll tell you that though. So that is web analytics. Let's go look at Speed Insights. Yeah, this is going to get mad at me because I do have it enabled on another project. Yeah, on a single project at a time, so let's go disable it on my other project, so you can see what I'm talking about. Full Stack Wiki, Speed Insights, and disable. To say a word there. All right, now come back to FEM Wiki Masters.

[00:05:58]
Same thing here, Speed Insights, click enable. This should enable now. OK. Let's go look at what we did here. It's the exact same thing. Speed Insights from Vercel, Speed Insights slash Next, and I just put this on the layout page. This runs on every single page. What happens here? Well, let's again click around a couple more times here. Wiki Masters, read article, a new article, and let's see if that populated it with enough stuff for us to look at.

[00:06:41]
Yeah, OK. So this is like, have you ever used Lighthouse before, Google Lighthouse? If you haven't, you should. It's a Chrome extension. You just open a page with it and it'll give you a bunch of metrics about here's what its accessibility metrics are, here's what its speed things are. There's a bunch of stuff that'll tell you about your website, and it'll give you specific instructions on if you do this, your website will load faster.

[00:07:06]
This is kind of like this kind of commoditized on Vercel. You can see here we built a banging fast app, which is, on one hand, we didn't build that complicated of an app. We didn't really have to do much to optimize it. But on the other hand, I like that Next is kind of structured in a way that encourages you to write fast apps and to, yeah, we structured the app in such a way that we kept everything out of the critical path so that would render first and everything else would happen after the fact.

[00:07:50]
So we are getting pretty good. We got 100 on our real experience score, which is great. But we're also getting only stuff from the UK and from the US, so you know, could be, it needs more data. Logs. This is literally just the logs from our server being printed out. So if you look, yeah, look right there, get cached, and it just does a log, a line at a time. So the console logging that we made for ourselves was great, it was very readable at a glance, but I would say once this went out to production, I would try and find something that's a bit more optimized for being searchable and grokkable and consumable on a macro basis.

[00:08:43]
The classic example for Node is Pino, something of this nature. I don't even know if this works with Next, does it? It might not. I've just used it with Fastify so much, but I just hold that up as an example of something that you would use that is really good for using for logging in such a way that it makes it consumable at large levels, or maybe stated differently, I would grow up our logs quite a bit if I was going to start depending on this.

[00:09:15]
But it is nice for you just to be able to see at a glance here's all the page views that we're getting, all that kind of stuff. You can see the Speed Insights that it's calling, that's kind of cool. But you could pull this up and you start seeing right now we're seeing lots of cache hits in here. But if you saw everything was this, the bow and arrow, the cache miss, and that was continuing to happen, you would know, oh, something is wrong with my cache, right?

[00:09:44]
So you could do that. This is searchable. I have no errors or warnings or anything like that, but you can see that here. You can narrow it down by what path is happening, right? So you can see that this wiki ID one is happening the most, all the Stack Auth ones is creating quite a bit. Yeah, it's kind of interesting to see all this stuff at a glance. You can filter by status code, 307 temporary redirect.

[00:10:30]
OK, so that happened to one of them. Couple of unauthorized people trying to hit the summary ones, right? Yeah, cool stuff. Request methods, some posts, or some posts where they just really just gets. Yeah. That's logs. Let's talk about observability. The nice thing about Vercel's observability is you really don't need to do anything to get them. It just kind of comes with it. So we can see aggregated requests, how much data we're transferring, how much CPU time we've utilized.

[00:11:01]
We haven't done anything with functions. You can query against it. I like this one, external APIs. You can see what external APIs your app is calling. So right now most of it's going to go into our Upstash because every single request goes through Upstash, and you can see, so we've done 48 requests to Upstash but only 20 to Neon. It's kind of interesting, right? What else is interesting here? Yeah, I don't know, feel free to go through this.

[00:11:34]
This is the advantage of hooking up your blob storage via the way that we did where you set up the integration. You'll get these analytics on which thing is going to which blob store, right? Because it'll set up that integration for you automatically. One of the ones that we're not going to look at today because I'm not going to upgrade to the $200 tier is you can get paged, right? So you can actually have this do some light pager duty kind of stuff for you of like, hey, your app is down, I'm going to page you, right?

[00:12:13]
So yeah, cool. Any questions here? Just some build stuff here as well. Yeah. Last one I'm going to call your attention to here is firewall. Has anyone ever used Cloudflare to mitigate DDOS or to disallow LLMs from crawling your sites or stuff like that? Cloudflare is well known for that. Vercel firewall does a lot of that stuff as well. You can do bot management and you can say please turn me off so that no bots can get in or log them in a specific way.

[00:12:47]
And there's also protect my app or I'm under attack mode, and enable attack mode, right? This is I'm getting DDoSed, I don't want to pay a huge bill, I don't want all my services to go down. So you enable attack mode and this will make every user that goes to your site use a CAPTCHA, right? I don't want to enable it right now because we won't see the end of it, but that's what this would do, right?