Next.js に newrelic browser-agent (npm) 入れてみた

https://www.npmjs.com/package/@newrelic/browser-agent

これを早速試してみた。
まずは素直に... _app.tsx に README にある通り書いてみる
※ Optionsの中身はちゃんとNewrelicから吐き出したものを使ってます

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
const options = {
  init: { ... }, // NREUM.init
  info: { ... }, // NREUM.info
  loader_config: { ...} // NREUM.loader_config
}
new BrowserAgent(options)
}

ReferenceError: navigator is not defined

navigatorsが無いと言われる。。
これは _app.tsx じゃない スクリプトに書き込んでも結果は同じ...
なんじゃこりゃーっと。。。色々としらべてたら
どうやら dynamic import を利用することで解消できると
https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/dynamic-import
これ（{ssr: false}）を使うことでClientサイド(ブラウザのみ)だけで実行することができるようになる模様

とういことでやってみよう！ Moduleよ動的に読み込んでくれ！

_app.tsx

const BrowserAgent = dynamic(() => import('@newrelic/browser-agent/loaders/browser-agent'), {ssr:false})

const options = {
  init: { ... }, // NREUM.init
  info: { ... }, // NREUM.info
  loader_config: { ...} // NREUM.loader_config
}
new BrowserAgent(options)

TypeError: BrowserAgent is not a constructor

browser-agent.d.ts

export class BrowserAgent extends Agent {
    constructor(args: any);
}

Classだよな。
DynamicImportの返り値はFunctionなのでそりゃそうだ。

動的モジュールのImportはできなかったので動的に読み込めるComponentに落とし込んでみよう

./components/NewrelicBrowserAgent/index.tsx

`use client`;
import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent';
export const NewrelicBrowserAgent = () => {
  let options = {
    init: { ... }, // NREUM.init
    info: { ... }, // NREUM.info
    loader_config: { ...} // NREUM.loader_config
  };
  new BrowserAgent(options);
  return <></>;
};

_app.tsx

const NewrelicBrowserAgent = dynamic(() => import('./components/NewrelicBrowserAgent').then((mod) => mod.NewrelicBrowserAgent), {ssr:false})
return (
  <Layout>
  <NewrelicBrowserAgent /> // ここでdynamic importしたComponenctとして呼び出す
  </Layout>
)

お。できた！
Optionsを環境変数にして読み込むことでデプロイし直しとか必要なくなる気がしていて
これは使えそう