Application Real-Time Monitoring Service:Web および H5 向けソースマップの自動解析

前提条件

Web アプリケーションがリアルユーザーモニタリング (RUM) と統合されていることを確認してください。詳細については、「Web または H5 アプリケーションの統合」をご参照ください。

サポートするビルドツール

RUM の自動ソースマップ解析機能は、現在、以下のビルドツールに対応しています。

• Webpack

• Vite

RUM ビルドツールプラグインの使用

ソースマップファイルの自動アップロード

ワークフローを簡素化するために、UUID の注入後に RUM ビルドツールプラグインがソースマップファイルを RUM の OSS ストレージへ自動的にアップロードするように設定できます。

ステップ 1: 一括アップロードスイッチの有効化

RUM OSS への書き込み権限を取得するには、RAM ユーザーとしてARMS コンソールにログオンします。RUM アプリケーションの **[Application Settings]** ページへ移動し、[OSS batch upload] スイッチを有効にします。

このスイッチは、**[File Management]** タブにあります。

ステップ 2: AccessKey ID と Secret の取得

RUM ビルドツールプラグインに RAM ユーザーの AccessKey ID と AccessKey Secret を提供する必要があります。

AccessKey を作成する際は、使用目的として **[Use in local development environment]** を選択してください。詳細については、「RAM ユーザーの AccessKey の作成」をご参照ください。

このオプションを選択すると、システムは AccessKey 情報をコードにハードコーディングせず、代わりに環境変数を使用して認証情報を設定することを推奨します。**[I confirm that I must create an AccessKey]** チェックボックスをオンにし、**[Continue to Create]** をクリックします。

ステップ 3: プラグインの設定

RUM ビルドツールプラグインの設定で、RUM アプリケーション ID、AccessKey ID、AccessKey Secret、バージョン、およびアプリケーションのリージョンを入力します。バージョンは、ARMS コンソールでアップロードされたソースマップファイルをグループ化するために使用され、デフォルトは 1.0.0 です。リージョンのデフォルトは cn-hangzhou です。

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

import { rumVitePlugin } from '@arms/rum-vite-plugin'
export default defineConfig({
  plugins: [rumVitePlugin({
    pid: '',  // RUM アプリケーション ID
    accessKeyId: '',
    accessKeySecret: '',
    version: '',
    region: ''
  })],
  build: {
    sourcemap: true,
  },  
});

ソースマップファイルの手動アップロード

ステップ 1: プロジェクトのビルド

ビルドツールが提供するビルドコマンドを使用して、プロジェクトをビルドします。RUM ビルドツールプラグインは、JS ファイルとそれに対応するソースマップファイルに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"
}

ブラウザでページを開いた後、グローバル window オブジェクトの _armsRumDebugIds プロパティを確認することで、UUID が JS ファイルに注入されたことを確認できます。

> window._armsRumDebugIds
< {"Error\n    at file:///Users/yy/Projects/rum-bundler-plugin/packages/examples/dist/webpack5/index.js:1:128": "e4f083d6-b8d8-4cae-a0ea-16f2e83a6be1"}

ステップ 2: ソースマップファイルの手動アップロード

自動アップロード機能を使用しない場合は、ARMS コンソールで手動でファイルをアップロードできます。**[Application Settings]** ページの **[File Management]** セクションで、UUID が注入されたソースマップファイルをアップロードします。対応する UUID が UUID 列に表示される場合、ファイルが正常に解析されたことを示します。

アップロード時には、バージョン (例: 1.0.0) を入力し、[Batch Upload] をクリックする必要があります。

ステップ 3: 自動解析の確認

異常な統計 ページから、特定の例外の例外詳細ページに移動します。スタックトレースの各行には、RUM ビルドツールプラグインによって挿入された UUID が表示されます。ハイフン (-) は、UUID の報告に失敗したことを示します。

一致する UUID を持つソースマップファイルがアップロードされている場合、RUM は自動的にスタックトレースの最初の行を解析し、ソースファイル内のエラーの場所を表示します。他の任意の行をクリックして展開し、解析結果を表示できます。

ソースマップが解析されると、ソースファイルは webpack://demo/index.tsx に配置されます。エラーは 14 行目の throw new Error('test error') です。解析されたソースコードは次のとおりです。

import React from 'react';
import Page from '@alicloud/console-components-page';
import TestCode from './TestCode';
const TestPage = () => {
  return (
    <Page>
      &lt;Page.Header title="Test" /&gt;
      &lt;Page.Content&gt;
        <IncidentPlanTable />
        <button
          onClick={() => {
            throw new Error('test error');
          }}
        >
          test
        </button>
      &lt;Page.Content&gt;
    </Page>
  );
};

RUM ビルドツールプラグインのリリースノート

よくある質問

ソースマップファイルが正常にアップロードされたのに、例外詳細ページにソースコードが表示されない場合はどうすればよいですか?

アップロードしたソースマップファイルに、ソースコードの内容 (sourcesContent フィールド) が含まれていません。この問題を解決するには：

1. フロントエンドビルドツールの設定を確認し、ソースマップファイルの生成時にソースコードの包含が有効になっていることを確認してください。

2. decodeSourceMap などのサードパーティツールを使用して、ローカルで生成されたソースマップファイルに sourcesContent フィールドが含まれていることを確認してください。

3. OSS に保存されているソースマップファイルが正しくフォーマットされており、アクセス可能であることを確認してください。

ARMS RUM は、ソースマップファイルのアップロードにカスタム OSS バケットをサポートしていますか?

いいえ。ARMS RUM はカスタム OSS バケットをサポートしていません。ARMS RUM は各リージョンに専用の OSS バケットを用意します。 用意されたバケットを直接使用するには、[アプリケーション設定] ページの [ファイル管理] タブの [OSS 一括アップロード] スイッチを有効にするだけです。別のバケットを指定することはできません。

ossutil やその他のツールを使用してアップロードしたソースマップファイルが ARMS コンソールに表示されない場合はどうすればよいですか?

フォルダーベースのパスまたは非標準のディレクトリ構造を使用してファイルをアップロードすると、ARMS コンソールでファイルリストが正しく表示されない可能性があります。ソースマップのアップロードを自動的に処理する、Webpack または Vite 用の RUM ビルドツールプラグインを使用することをお勧めします。手動でファイルをアップロードする必要がある場合は、このトピックの「ソースマップファイルを手動でアップロードする」セクションの説明に従い、[アプリケーション設定] ページの [ファイル管理] セクションで [一括アップロード] 機能を使用し、正しいバージョン番号を入力します。

アプリケーションが ARMS RUM サービスリージョンとは異なるリージョンにデプロイされている場合、エンドポイントをどのように設定すればよいですか?

ARMS RUM ソースマップストレージは、中国 (杭州)、シンガポール (アジア太平洋南東 1)、およびシリコンバレー (米国西部 1) のリージョンでのみ利用できます。アプリケーションが別のリージョンにデプロイされている場合は、クライアントまたはプラグイン設定で、これら 3 つのサポートされているリージョンのいずれかを指すようにエンドポイントを設定し、プロビジョニングされた OSS バケットに接続する必要があります。ソースマップのアップロードにローカルリージョンのエンドポイントを使用することはできません。