How to implement Cloudwatch RUM on a nextjs app

Tracking my blog with Cloudwatch RUM


![A nice Rum cocktail!](/img/blog/cloudwatch-rum/ash-edmonds-fsI-_MRsic0-unsplash.jpg)

Hey folks, so at last months/years re:Invent, Cloudwatch RUM was announced... no it's not a rum dispensing service but rather a real-user monitoring service for websites.

I thought it was finally a good time to get some user metrics on who is using my website and its performance as well as giving this new service a go!

# Getting started

So to dive right it, I headed over to AWS and into Cloudwatch and clicked on RUM on the left hand side panel:

![Cloudwatch RUM](/img/blog/cloudwatch-rum/cloudwatch-rum.png)

I click on add an app monitor and add in the following details:

1. App monitor name

2. Application domain

3. And then leave all of the default options.

I'm then given a javascript snippet that I need to add to the heads in each page of my nextjs website:

```javascript
(function(n,i,v,r,s,c,x,z){x=window.AwsRumClient={q:[],n:n,i:i,v:v,r:r,c:c};window[n]=function(c,p){x.q.push({c:c,p:p});};z=document.createElement('script');z.async=true;z.src=s;document.head.insertBefore(z,document.getElementsByTagName('script')[0]);})('cwr','xxx','1.0.0','ap-southeast-2','https://client.rum.us-east-1.amazonaws.com/1.0.2/cwr.js',{sessionSampleRate:1,guestRoleArn:"arn:aws:iam::xxx:role/RUM-Monitor-ap-southeast-2-xxx-xxx-Unauth",identityPoolId:"ap-southeast-2:xxx",endpoint:"https://dataplane.rum.ap-southeast-2.amazonaws.com",telemetries:["performance","errors","http"],allowCookies:true,enableXRay:true});
```

I add this to my /public folder of my nextjs app:

```bash
/public/rum-tracking.js
```

After that, I go ahead and add the following snippet to my SEO component inside the header tag:

```javascript
<script type="text/javascript" src="/rum-tracking.js"></script>
```

After that, I make a commit, cut a branch and push and then raise a PR which kicks off a deployment.

## Looking at the results

Stepping through the results on the first pane, 1.1k ms which is 1.1 seconds - reasonable but I'm no web dev so most certainly could be better.

![Performance](/img/blog/cloudwatch-rum/performance.png)

Mostly good on the web vitals although the cummulative layout shift needs attention.

![Web vitals](/img/blog/cloudwatch-rum/web-vitals.png)

Mostly good on the page load steps although it would be good to address the DOM processing time!

![Page loads](/img/blog/cloudwatch-rum/page-loads.png)


I hope you found this useful - and thanks for playing along!



As I mentioned earlier in the series, I’ve got a bunch of hedges which look amazing but require regular maintenance.

![Picture of the entrance hedges](/img/blog/garden-tools/entrance-hedges.jpeg)

I’ve also got patchy grass throughout the property so owning a lawn mower is a bit of an overkill and probably the wrong tool for the job.

![picture of the front grass  before the hedge](/img/blog/garden-tools/rocky-nature-strip.jpeg)

Speaking to one of my brothers who is a timer floorer by trade and generally quite handy around the place, he mentioned a Makita multi function power head with attachments - I went for the hedge and line trimmer attachments and it came with a free blower which was perfect for my requirements:

![Makita Multi Function Power Head](/img/blog/garden-tools/makita-multi-function-power-head.jpeg)

[Sydney Tools Product Page](https://sydneytools.com.au/product/makita-dux60phpt2b-36v-18v-x-2-50ah-liion-cordless-brushless-multi-function-power-head-combo-kit-with-attachments)

I’ve been super impressed by the balance of the tool given it’s got two 18V batteries on it’s head and how easy it was to get up and running so naturally, this will not be the last tool I buy from Makita!

<Strong>Note:</Strong>

It’s worthwhile noting that Makita have released a 40V range which you can obviously go for but I felt given this is not my day job, the 18V range was sufficient for household tasks


Answers the question, what garden tools should I purchase

January 20, 2022Tracking my blog with Cloudwatch RUM