New Relic Browser を Next.js export で試したメモ

結論

@newrelic/browser-agentを使うと割と楽。
ただしNext.jsのバージョンが11だと動かない。

はじめに

New Relic Browserを導入しようとしていろいろ躓いたのでメモ。
基本は発行されるSnippetコードを入れれば良いだけですが、Next.jsのexport機能と組み合わせたときにいろいろかみ合わなかった。

失敗したケース

• Google Tag Manager から配信
  • SnippetコードがGTMの解析でエラーになってしまう
    • babelやbrowserifyでの変換を試したがだめだった
• Snippetコードを書き込み
  • next build でエラーになる
    • 後述しますがこのときnext11で試していて、next12なら大丈夫だったかも、、、？
• @newrelic/browser-agent を next11 で使う
  • next build でエラーになる
• next12で使う
  • _app.tsx で import {BrowserAgent} from '@newrelic/browser-agent/loaders/browser-agent' とするとnext buildエラーに

成功ケース

build時に@newrelic/browser-agent/loaders/browser-agentがimportされないように。

if (typeof window !== 'undefined') {
  const {
    BrowserAgent,
  } = require('@newrelic/browser-agent/loaders/browser-agent')
  const options = {
    init: {}, // NREUM.init
    info: {}, // NREUM.info
    loader_config: {}, // NREUM.loader_config
  }
  new BrowserAgent(options)
}

試したい

_appに直接書くのではなく、コンポーネントにして next/dynamic 使うのがよさそう。
ほんとはGTMで管理したい、、、