🦔

Next.js AppRouter × NewRelic JSスニペットによる導入

2024/06/23に公開

Next.js

frontend

New Relic

tech

背景

この度、ブラウザ側の信頼性測定のためにブラウザ監視ツールであるNewRelicをNextjsに導入することにしました。
※信頼性：システムが正常に稼働し、サービスを提供し続けられるかを計るための指標

方法2つ

主に方法は2つあります

headタグ内にNewRelicが生成したscriptタグを埋め込む方法
2.プロジェクトにNewRelicのパッケージをインストールする方法
今回は方法2について説明します。

方法2について知りたい方は下記の記事をご参照ください。

方法1を記事にする動機

動機は私が1の方法しか知らず、現PJでPOAとしてdevチームへのNewRelic導入依頼の際に「jsのコードコピペでできるので工数少なめです」と説明したが、プライベートでNextjsに導入してみたら躓いたので、意外と工数少なくないのかも！？と思い調べた内容を記録します。

手順

src\app\layout.tsx

import Script from "next/script";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <Script
        strategy="beforeInteractive" #headタグ内に入れるためのプロパティ
        src="http://localhost:3000/newrelic.js" # Scpritタグにはsrcが必須のためスクリプトは外だし
      />
      <body className={inter.className}>{children}</body>
    </html>
  );
}

public\newrelic.js

/* ここにnewrelicで生成したスクリプトを貼り付ける */
; window.NREUM || (NREUM = {}); NREUM.init = { distributed_tracing: { enabled: true }, privacy: { cookies_enabled: true }, ajax: { deny_list: ["bam.nr-data.net"] } };
<略>

動作確認

動作確認1-scriptタグが追加できているか

devtoolを確認したところでできていそうだ。

動作確認2-NewRelic側で確認ができるか

確認できた！

躓きポイント

next/scriptのScriptタグにはsrcが必須

失敗コード

<Script
        type="text/javascript"
        strategy="beforeInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          ;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:["bam.nr-data.net"]}};
<略...>`,
        }}
      />

成功コード

<Script
        strategy="beforeInteractive" #headタグ内に入れるためのプロパティ
        src="http://localhost:3000/newrelic.js" # Scpritタグにはsrcが必須のためスクリプトは外だし
      />