Web & H5 端 SourceMap 自动解析_应用实时监控服务(ARMS)-阿里云帮助中心

在追踪前端 JS 错误时，需要通过追踪 JS 代码堆栈来定位报错位置。RUM 支持采集 JS 错误堆栈信息，通过开发同学上传的 SourceMap 文件即可解析 JS 堆栈。但由于 RUM 支持管理多个版本的 SourceMap 文件，仅通过文件名往往无法准确关联异常堆栈中的 JS 文件和对应的 SourceMap 文件。通过使用 RUM 前端构建工具插件，可以向打包生成的 JS 文件和 SourceMap 文件注入 UUID 以在两者间建立双向关联，从而在打开 RUM 异常明细界面时能够自动解析和展示堆栈信息，无需手动选择 SourceMap 文件。

前提条件

确保您的Web应用已接入用户体验监控，具体操作，请参见接入Web & H5应用。

支持的前端构建工具类型

目前 RUM Web & H5 SourceMap 自动解析功能支持以下前端构建工具：

Webpack
Vite

使用RUM前端构建工具插件

Webpack

安装 RUM Webpack 前端构建工具插件 npm 包。
```
npm install @arms/rum-webpack-plugin --save
```

在 Webpack 配置文件中应用 RUM 前端构建工具插件，并通过设置 devtool 属性使 Webpack 生成 SourceMap 文件。

import { RumWebpackPlugin } from '@arms/rum-webpack-plugin'

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

export default config

Vite

安装 RUM Vite 前端构建工具插件 npm 包。
```
npm install @arms/rum-vite-plugin --save
```

在 Vite 配置文件中应用 RUM 前端构建工具插件，并通过设置 build.sourcemap 属性使 Vite 生成 SourceMap 文件。

import { rumVitePlugin } from '@arms/rum-vite-plugin'

export default defineConfig({
  plugins: [rumVitePlugin()],
  build: {
    sourcemap: true,
  },  
});

构建项目并上传 SourceMap 文件

步骤一：构建项目

通过前端构建工具提供的 build 命令构建项目代码后，RUM 前端构建工具会在 JS 文件和对应的 SourceMap 文件中注入 UUID。

注入成功后控制台会输出以下信息，显示注入成功的 JS 文件的数量：

ARMS RUM Info: UUID Injection Update: 1 successes, 0 failures. Total files processed: 1

SourceMap 文件中增加 debugId 字段，表示 SourceMap 文件 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 属性表示 JS 文件 UUID 注入成功。

步骤二：上传 SourceMap 文件

在应用设置页面的文件管理区域，上传注入了 UUID 的 SourceMap 文件，UUID 列出现对应的 UUID 代表解析成功。

说明

暂不支持批量上传带有 UUID 的 SourceMap 文件。

步骤三：自动解析

通过异常统计页面进入目标异常的异常明细页面，堆栈信息中的每一行都会显示其通过 RUM 前端构建工具插件注入的 UUID，显示 "-" 则代表没有成功上报 UUID。

若已上传了带有对应 UUID 的 SourceMap 文件，堆栈信息中的第一行将会自动解析并展示报错的源代码位置，其他行可通过单击所在行展开自动解析结果。

RUM前端构建工具插件版本说明

版本号	说明
0.0.5	支持 Webpack、Vite 前端构建工具，通过注入 UUID 在 JS 文件和对应 SourceMap 文件间建立双向联系。