Client Side Monitor Issue with Node App Router Example

[gmreburn]

NOTE: # running the nextjs-app-router example but not seeing browser metrics

Description

I am trying to run the example in the nextjs-app-router directory. I have followed the instructions in the readme. I am not seeing browser metrics reporting in NewRelic. I see errors in the browser's console. I tried with Incognito window.

Steps to Reproduce

I am running on Windows so the start command does not work because it is trying to export environment variables in linux style. To fix this, I installed cross-env npm i cross-env then updated the scripts section of package.json:

	"scripts": {
		"dev": "cross-env NODE_OPTIONS=\"'-r dotenv/config --loader newrelic/esm-loader.mjs -r @newrelic/next'\" next dev",
		"build": "cross-env NODE_OPTIONS=\"'-r dotenv/config'\" next build",
		"start": "cross-env NODE_OPTIONS=\"'-r dotenv/config --loader newrelic/esm-loader.mjs -r @newrelic/next'\" next start",
		"lint": "next lint"
	},

I'm not sure if this has any impact but the example site seems to start normally:

Expected Behavior

Relevant Logs / Console output

New Relic: A problem occurred when starting up session manager. This page will not start or extend any session. line 45 > injectedScript:2:13553
ChunkLoadError: Loading chunk 111 failed.
(error: https://js-agent.newrelic.com/nr-spa-1.260.0.min.js)
    j line 45 > injectedScript:2
    e line 45 > injectedScript:2
    e line 45 > injectedScript:2
    T line 45 > injectedScript:2
    api line 45 > injectedScript:2
    addEventListener (index):1
    s line 45 > injectedScript:2
    o line 45 > injectedScript:2
    api line 45 > injectedScript:2
    _ line 45 > injectedScript:2
    <anonymous> line 45 > injectedScript:2
    <anonymous> line 45 > injectedScript:2
    <anonymous> line 45 > injectedScript:2
    <anonymous> line 45 > injectedScript:2
    loadScriptsInSequence app-bootstrap.ts:46
    loadScriptsInSequence app-bootstrap.ts:26
    promise callback*loadScriptsInSequence/< app-bootstrap.ts:25
    loadScriptsInSequence app-bootstrap.ts:24
    appBootstrap app-bootstrap.ts:60
    <anonymous> app-next-dev.ts:6

Server side logs:

PS C:\src\newrelic-node-examples\nextjs-app-router> npm run dev

> dev
> cross-env NODE_OPTIONS="'-r dotenv/config --loader newrelic/esm-loader.mjs -r @newrelic/next'" next dev

(node:34696) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("newrelic/esm-loader.mjs", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
(node:28956) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("newrelic/esm-loader.mjs", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
 ⚠ Port 3000 is in use, trying 3001 instead.
  ▲ Next.js 14.2.3
  - Local:        http://localhost:3001
  - Environments: .env

 ✓ Starting...
 ✓ Ready in 4s
 ○ Compiling / ...
 ✓ Compiled / in 7.8s (502 modules)
{"level":30,"time":1715873169196,"pid":28956,"hostname":"EISTECH-2J057S3","msg":"rendering index page"}
 GET / 200 in 8648ms
 ○ Compiling /user/edit/[id] ...
 ✓ Compiled /user/edit/[id] in 775ms (500 modules)
(node:32716) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("newrelic/esm-loader.mjs", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
 GET /user/edit/1 200 in 3093ms
 ✓ Compiled /api/users/[id] in 367ms (289 modules)
(node:18808) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("newrelic/esm-loader.mjs", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)

Your Environment

• ex: Browser name and version: Firefox 125
• ex: Operating System and version: Windows 10

Additional context

[workato-integration]

https://new-relic.atlassian.net/browse/NR-270589

[jsumners-nr]

It looks like the newrelic module has done its job correctly by generating the necessary JavaScript to inject into the client side page. As such, this question should be directed toward our browser agent team at https://github.com/newrelic/newrelic-browser-agent.