前提条件

• ブラウザの RUM エージェント（splunk-otel-web.js）を v0.20.2 以降に更新します。そうしないと、Splunk RUM はブラウザアプリケーションからのスタックトレースをシンボリケートできません。

• [NO TITLE FOUND]。

オプション 1：splunk-rum CLI の使用

1. ビルド環境の設定：

   ヒント: これらの例では、一般的なビルドツールについて説明します。ツールが異なる場合でも、splunk-rum CLI を使用できます。この例を一般的なガイドとして、お使いのセットアップに合わせて調整してください。

   1. 実稼働環境ビルドツールがソースマップを生成するように設定されていることを確認します。

      バンドラツール向けにソースマップを有効にする方法については、JjavaScript バンドラまたはフレームワークのドキュメントを参照してください。例：

      • Webpack バンドラを使用している場合は、devtool: "source-map"のような設定をプロジェクトの webpack.config.js ファイルに追加します。

      • Next.jsフレームワークを使用している場合は、プロジェクトの next.config.ts ファイルに productionBrowserSourceMaps: trueを追加します。

   2. プロジェクトを実稼働モードでビルドします。

      つまり、バンドラまたはフレームワークのコマンドを実行して、プロジェクトを（開発モードではなく）実稼働モードでビルドします。

      • Webpack バナーの場合は、コマンド webpack を実行

      • Next.js フレームワークの場合は、next build コマンドを実行

      • package.json に、実稼働モードでアプリケーションをビルドするためのスクリプトがすでに定義されている場合は、そのスクリプトを実行します。たとえば、次の package.json の場合は、次のようになります。

        // package.json
        {
          ...
          "scripts": {
            "build": "webpack",
            "dev": "webpack --mode=development"
            ...
          }
          ...
        }
        

        build スクリプトを実行します（dev スクリプトではありません）。

        npm run build
        

   3. 実稼働バンドルとソースマップが同じ出力ディレクトリに書き込まれていることを確認します。

      つまり、バンドルまたはフレームワークが出力ディレクトリに使用しているディレクトリを確認し、このディレクトリの内容を検査します。例：

      • Webpack を使用している場合は、dist（デフォルトの出力ディレクトリ）を調べます。

      • Next.js を使用している場合は、.next 内のディレクトリを調べます。

      出力ディレクトリは、splunk-rum コマンドの --path オプションを使用して指定するものです。

      ビルドコマンドの出力フォルダが ./dist ディレクトリの場合は、そのディレクトリの内容を調べて、.js と .js.map ファイルの両方が作成されていることを確認します。

      # verify that both .js and .js.map files appear here
      find ./dist -type f | sort
      

      これにより、実稼働環境ビルドコマンドが、出力ディレクトリ ./dist 内に .js と .js.map ファイルの両方を生成するよう適切に設定されていることが確認できます。

2. 指定したディレクトリ内のすべてのソースマップと縮小されたファイルのペアを検索し、各ペアのソースマップ ID を計算して、そのソースマップ ID を縮小された各ファイルにコードスニペットとして挿入します。

   splunk-rum sourcemaps inject --path path-to-production-files

3. 指定したディレクトリ内のソースマップを Splunk RUM にアップロードします。このコマンドでは、アプリケーション名（applicationName）とアプリケーションバージョン（applicationVersion）に、「Splunk ブラウザ RUM インストルメンテーションを設定する」で使用したものと同じ値を使用します。

   注: SPLUNK_REALM および SPLUNK_ACCESS_TOKEN 環境変数を設定しなかった場合は、--realm value および --token your-splunk-org-access-token パラメータもこのコマンドに追加する必要があります。

   splunk-rum sourcemaps upload \
   --app-name applicationName \
   --app-version applicationVersion \
   --path path-to-production-files

構文

splunk-rum [command] [parameters]

コマンドの説明

オプション 2：Webpack ビルドプラグインを使用

プロジェクトがバンドルツールとして Webpack 5 を使用している場合は、Splunk RUM Webpack ビルドプラグインをプロジェクトに追加して、ソースマッピングのサポートを容易にすることができます。このプラグインは、splunk-otel-js-web リポジトリ内の個別の npm アーティファクトです。

プロジェクトで異なるバンドルツールまたは異なるバージョンの Webpack を使用している場合は、代わりに splunk-rum CLI を使用します。

1. 開発依存関係として、Splunk RUM Webpack プラグインを package.json に追加します。

   npm install @splunk/rum-build-plugins --save-dev

2. ソースマップを生成するよう webpack.config.js を設定します。Devtool | webpack を参照してください。

3. webpack.config.js に次の行を追加して、Splunk RUM Webpack プラグインをプラグインのリストに追加します。<applicationName> と <applicationVersion> は、「Splunk ブラウザ RUM インストルメンテーションを設定する」で使用した値と同じです。

   自分自身のローカル開発向けにローカルビルドを実行しているときにソースマップがアップロードされないようにする場合は、disableUpload を true に設定します。

   const { SplunkRumWebpackPlugin } = require('@splunk/rum-build-plugins')
   module.exports = {
     ...
       plugins: [
           ...,
           new SplunkRumWebpackPlugin({
               applicationName: 'applicationName',
               version: 'applicationVersion',
               sourceMaps: {
                   token: 'your-splunk-org-access-token',
                   realm: 'your-splunk-observability-realm',
                   // Optional: conditionally set 'disabledUpload' so that file uploads
                   // are only performed during your production builds on your CI pipeline
                   disableUpload: <boolean>
               }
             }),
         ]
     }

4. アプリケーションをビルドするたびに、縮小されたファイルに sourceMapId プロパティが自動的に挿入され、ソースマップが Splunk RUM に自動的にアップロードされることを確認します。

（オプション）ソースマップに sourcesContent プロパティを追加する

sourcesContent プロパティをソースマップファイルに追加すると、各 JavaScriptエラーの原因となったコードスニペットを Splunk RUM がプルして表示できるようになります。このプロパティを追加するには、このプロパティを含むソースマップを生成するようバンドラツールを設定します。または、Splunk RUM にソースコードを含めたくない場合は、このプロパティを省略したソースマップを生成するようにバンドルツールを設定します。

挿入された JavaScript ファイルを実稼働環境に展開する

アプリケーションのソースマップをアップロードし、挿入された縮小ファイルを実稼働環境に展開すると、Splunk RUM は、このアプリケーションのスタックトレースを人間が判読可能な形式に自動的に変換します。