nextJS RUM agent

[Sami_Ullah_Jan1 (Sami Ullah Jan)]

Kibana version: v 8.10.4

Elasticsearch version:v 8.10.4

APM Server version: using agent only

APM Agent language and version: elastic-agent-8.10.4-linux-x86_64.tar.gz (standalone agent)

Browser version: Chrome Version 117.0.5938 on Ubuntu 22

Original install method (e.g. download page, yum, deb, from source, etc.) and version: Running Elastic/Kibana 8.10.4 containers on local machine

Steps to reproduce:

1. I have a very simple nextJS application which has a button, which calls an API if you click it
2. I added APM integration using the steps described here
3. I run the application using npm run dev
4. In Kibana can see traces correctly - Get started with Next.js | APM Node.js Agent Reference [4.x] | Elastic
5. But when I go to the dashboard, I cannot see any RUM data

How can I enable RUM in the front-end in my NextJS application?

When I click "APM server status", it says I have set it correctly

I also tried out the example here but I don't see RUM for this either -https://github.com/elastic/apm-agent-nodejs/tree/main/examples/nextjs

I can see routes in the service detail

but nothing in the Dashboard RUM view (screenshot below)

Thanks

[Sami_Ullah_Jan1 (Sami Ullah Jan)]

(partly) answering my own question - so adding the following at the beginning on the pages/_app.js file does generate RUM data

import { init as initApm } from '@elastic/apm-rum'
var apm = initApm({
  serviceName: 'my-service-name',
  serverUrl: 'http://localhost:8200',
  serviceVersion: '',
  environment: 'my-environment'
})

but is this ideal?

[Alberto_Delgado]

Hi @Sami_Ullah_Jan1,

Welcome to the community and thanks for taking the time to ask this question!

4. In Kibana can see traces correctly - Get started with Next.js | APM Node.js Agent Reference [4.x] | Elastic

5. But when I go to the dashboard, I cannot see any RUM data

Just in case, I want to highlight the following:

Point 4 and point 5 are not related. What I mean here is that the Node.js agent is not the RUM agent.

The Node.js agent is needed for instrumenting the "server part" of Nextjs.

The RUM agent is needed for instrumenting the "client part" of Nextjs, in a nutshell, the activity that happens within a web browser

They are different agents as you can see. RUM data is only related to the activity that happens in the browser. I wanted to clarify this point in case it helps you.

Please, take a look at this document: Get started with Next.js | APM Node.js Agent Reference [4.x] | Elastic

(partly) answering my own question - so adding the following at the beginning on the pages/_app.js file does generate RUM data

I don't see any issue with that snippet (fair to say that I'm not aware of Nextjs "best practices" when it comes to where to add third-party code)

If you are seeing RUM data after doing that is because the client part of Nextjs is loading the RUM agent. So again, (being redundant, sorry for that, but I want to emphasize this), the most important thing here is to make sure that the client side is loading RUM, if that happens, then you will see data related to the page and user activity within the browser.

So, a good exercise would be:

• Identify in your next app where the main entry for the server part is and load the Node.js agent there.
• Identify in your next app where the main entry for the client part is and load the RUM agent there.

Hope this helps!

Cheers,
Alberto

[Sami_Ullah_Jan1 (Sami Ullah Jan)]

apologies fro the late reply

Thank you for the detailed explanation - yes you are right, I quoted the wrong document, it was rather RUM/APM than NodeJS/APM for the frontend

I did manage to figure it out - I guess you it changes for different versions of the framework and Node - I was using Node 16 and 18 an and I had to configure it via the initApm call in the _app.js file