コンテンツにスキップ
App Routerガイドインストルメンテーション

インストルメンテーションのセットアップ方法

インストルメンテーションとは、アプリケーションに監視およびロギングツールを統合するためにコードを使用するプロセスです。これにより、アプリケーションのパフォーマンスと動作を追跡し、本番環境での問題をデバッグすることができます。

規約

インストルメンテーションをセットアップするには、プロジェクトのルートディレクトリ(またはsrcフォルダを使用している場合はその中)にinstrumentation.ts|jsファイルを作成します。

次に、そのファイルにregister関数をエクスポートします。この関数は、新しいNext.jsサーバーインスタンスが初期化されるときに1回呼び出されます。

たとえば、Next.jsをOpenTelemetry@vercel/otelで使用するには

instrumentation.ts
import { registerOTel } from '@vercel/otel'
 
export function register() {
  registerOTel('next-app')
}

完全な実装については、Next.js with OpenTelemetry exampleを参照してください。

知っておくと良いこと:

  • instrumentationファイルは、プロジェクトのルートに配置する必要があり、appまたはpagesディレクトリ内には配置できません。srcフォルダを使用している場合は、pagesおよびappと同じレベルのsrc内にファイルを配置してください。
  • pageExtensions設定オプションを使用してサフィックスを追加する場合、instrumentationファイル名も一致するように更新する必要があります。

副作用を伴うファイルのインポート

場合によっては、コード内でファイルが引き起こす副作用のためにファイルをインポートすることが役立つことがあります。たとえば、グローバル変数のセットを定義するファイルをインポートするが、インポートしたファイルをコード内で明示的に使用しない場合があります。それでも、パッケージが宣言したグローバル変数にアクセスできます。

register関数内でJavaScriptのimport構文を使用してファイルをインポートすることをお勧めします。次の例は、register関数でのimportの基本的な使用法を示しています。

instrumentation.ts
export async function register() {
  await import('package-with-side-effect')
}

知っておくと良いこと

ファイルをグローバルにトップでインポートすることによる意図しない結果を避けるために、ファイルをファイルのトップではなく、register関数内でインポートすることをお勧めします。これにより、コード内の副作用をすべて1か所にまとめることができます。

実行時固有のコードのインポート

Next.jsはすべての環境でregisterを呼び出すため、特定のランタイム(例: EdgeまたはNode.js)をサポートしていないコードは条件付きでインポートすることが重要です。NEXT_RUNTIME環境変数を使用して現在の環境を取得できます。

instrumentation.ts
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./instrumentation-node')
  }
 
  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('./instrumentation-edge')
  }
}

インストルメンテーションの詳細を学ぶ