Web または HTML5 アプリケーションのソースマップを自動的に解析する - Application Real-Time Monitoring Service

Application Real-Time Monitoring Service (ARMS) の Real User Monitoring (RUM) は、JavaScript エラースタックの収集とレポートに加えて、ソースマップをアップロードすることによるこれらのエラースタックの解析をサポートしています。この機能を使用すると、JavaScript コードのエラーをすばやく特定できます。ビルドツールプラグインを使用すると、汎用一意識別子 (UUID) を割り当て、JavaScript ファイルを対応するソースマップに関連付けることができます。その後、エラースタックは自動的に解析され、RUM インターフェイスのアプリケーションに表示されるため、ソースマップを手動で選択する必要がなくなります。

前提条件

Web アプリケーションまたは HTML5 アプリケーションが RUM と統合されていること。詳細については、「Web アプリケーションまたは HTML5 アプリケーションを統合する」をご参照ください。
Webpack または Vite のいずれかのビルドツールが利用可能であり、そのプラグインが V0.0.5 以降であること。

手順 1: ビルドツールを使用してソースマップを生成する

Webpack

Webpack ターミナルで、次のコードを使用して、RUM 用 Webpack プラグインの node パッケージマネージャ (NPM) パッケージをインストールします。
```
npm install @arms/rum-webpack-plugin --save
```
Webpack 構成ファイルで、次のコードを参照して設定を変更し、ファイルを保存してプラグインを適用します。
```
import { RumWebpackPlugin } from '@arms/rum-webpack-plugin'

const config = {
  plugins: [new RumWebpackPlugin()],
  devtool: 'source-map',
};

export default config
```
devtool 属性は、Webpack でソースマップを生成するために使用されます。

Vite

Vite ターミナルで、次のコードを使用して、RUM 用 Vite プラグインの NPM パッケージをインストールします。
```
npm install @arms/rum-vite-plugin --save
```
Vite 構成ファイルで、次のコードを参照して設定を変更し、ファイルを保存してプラグインを適用します。
```
import { rumVitePlugin } from '@arms/rum-vite-plugin'

export default defineConfig({
  plugins: [rumVitePlugin()],
  build: {
    sourcemap: true,
  },  
});
```
build.sourcemap 属性は、ソースマップを生成するために使用されます。

手順 2: ソースマップをアップロードする

次のいずれかの方法を使用して、ソースマップを RUM にアップロードできます。

方法 1: 自動アップロード

操作を簡素化するために、UUID が割り当てられた後、ソースマップを RUM の Object Storage Service (OSS) バケットに自動的にアップロードするように RUM ビルドツールを構成できます。

重要

自動アップロード方法では、Alibaba Cloud アカウントの AccessKey ID と AccessKey Secret が必要です。セキュリティ上の理由から、Resource Access Management (RAM) ユーザーとして次の手順を実行し、AccessKey を機密にしてください。

バッチアップロードスイッチをオンにします。
1. RAM ユーザーとして ARMS コンソールにログインします。
2. [real User Monitoring] > [アプリケーションリスト] を選択します。表示されるページで、管理する Web アプリケーションまたは HTML5 アプリケーションをクリックします。
3. アプリケーション詳細ページで、[アプリケーション設定] タブをクリックします。次に、[ファイル管理] タブをクリックします。
4. 表示されるタブページで、[OSS バッチアップロードを有効にする] スイッチをオンにします。
ログインする RAM ユーザーの AccessKey ID と AccessKey Secret を作成します。
AccessKey の作成方法については、「AccessKey ペアを作成する」をご参照ください。
説明
[ローカルコード] を選択して、ローカル開発環境で AccessKey を使用します。
ビルドツールプラグインの構成ファイルに、次の情報を入力します。
- RUM アプリケーション ID。
- RAM ユーザーの AccessKey ID と AccessKey Secret。
- 指定するバージョン番号。デフォルト値は 1.0.0 です。これは、RUM にアップロードされたソースマップをグループで管理するために使用されます。
- RUM アプリケーションが存在するリージョン。デフォルト値は cn-hangzhou です。
  Webpack
  デバッグ中の重複アップロードを回避するために、ソースマップは Webpack とバンドルされている場合、本番モードでのみ自動的にアップロードされます。
```
import { RumWebpackPlugin } from '@arms/rum-webpack-plugin'

const config = {
  plugins: [new RumWebpackPlugin({
    pid: '',  //RUM アプリケーションの ID。
    accessKeyId: '',
    accessKeySecret: '',
    version: '',
    region: ''
  })],
  devtool: 'source-map',
};

export default config
```
  Vite
```
import { rumVitePlugin } from '@arms/rum-vite-plugin'

export default defineConfig({
  plugins: [rumVitePlugin({
    pid: '',  //RUM アプリケーションの ID。
    accessKeyId: '',
    accessKeySecret: '',
    version: '',
    region: ''
  })],
  build: {
    sourcemap: true,
  },  
});
```

方法 2: 手動アップロード

RUM ビルドツールでプロジェクトをビルドし、ビルドツールによって提供されるビルドコマンドを使用してプロジェクトコードを構築します。その後、RUM ビルドツールは、JavaScript ファイルと対応するソースマップに UUID を割り当てます。
- ソースマップ: debugId フィールドが追加されたことは、UUID がソースマップファイルに挿入されたことを示します。
```
{
    "version": 3,
    "file": "index.js",
    "mappings": "AAAAA,QAAQC,IAAI",
    "sources": [
        "webpack://examples/./src/index.js"
    ],
    "sourcesContent": [
        "console.log('Hello World!');\n"
    ],
    "names": [
        "console",
        "log"
    ],
    "sourceRoot": "",
    "debugId": "e4f083d6-b8d8-4cae-a0ea-16f2e83a6be1"
}
```
- JavaScript ファイル: Web ブラウザーのグローバルオブジェクトウィンドウにある _armsRumDebugIds 属性は、UUID が JavaScript ファイルに挿入されたことを示します。
ソースマップを RUM に手動でアップロードします。
1. RAM ユーザーとして ARMS コンソールにログオンします。
2. [リアルユーザー監視] > [アプリケーション一覧] を選択します。表示されたページで、管理する Web アプリケーションまたは HTML5 アプリケーションをクリックします。
3. アプリケーション詳細ページで、[アプリケーション設定] タブをクリックします。次に、[ファイル管理] タブをクリックします。
4. 表示されたタブページで、[ファイルをアップロード] をクリックして、UUID が割り当てられているソースマップをアップロードします。
  [UUID] 列の値は、UUID が解析されていることを示します。
ソースマップの自動解析結果を表示します。
1. アプリケーション詳細ページで、[異常統計] タブをクリックします。
2. 表示されるタブページで、例外をクリックして例外詳細ページに移動します。
3. [スタック情報] ページで、RUM ビルドツールによって割り当てられた UUID、エラーが発生した可能性のあるソースコード、および自動解析結果を確認します。
  - スタック情報の各行に UUID が表示されている場合は、UUID が報告されています。表示されていない場合は、レポートは失敗しています。
  - UUID を含むソースマップがアップロードされている場合、スタック情報の最初の行にエラーが発生したソースコードが表示されます。他の行をクリックすると、自動解析結果を展開できます。