开发者社区 问答 正文

ARMS前端上传sourceMap可以做自动匹配吗?

ARMS前端上传sourceMap可以做自动匹配吗?现在只看到可以手动选择sourceMap进行匹配的方法image.png
https://help.aliyun.com/zh/arms/browser-monitoring/use-cases/diagnose-js-errors-by-using-browser-monitoring

展开
收起
真的很搞笑 2024-02-06 20:31:27 130 分享 版权
阿里云 AI 助理回答

是的,ARMS前端监控支持通过配置实现SourceMap的自动匹配和解析。以下是详细的实现方式和步骤:


1. 自动上传SourceMap文件

通过使用RUM前端构建工具插件(如@arms/rum-vite-plugin@arms/rum-webpack-plugin),可以在构建项目时自动生成并上传SourceMap文件到ARMS的OSS存储中,从而实现自动匹配。

具体步骤:

步骤一:安装插件

根据使用的前端构建工具,安装对应的RUM插件: - 对于Vite:

npm install @arms/rum-vite-plugin -save
  • 对于Webpack:
    npm install @arms/rum-webpack-plugin -save
    

步骤二:配置插件

在构建工具的配置文件中添加插件,并填写必要的参数,包括RUM应用ID、AccessKey ID、AccessKey Secret、版本号以及Region。

  • Vite 配置示例

    import { rumVitePlugin } from '@arms/rum-vite-plugin'
    
    export default defineConfig({
    plugins: [rumVitePlugin({
      pid: 'your-rum-app-id', // RUM 应用 ID
      accessKeyId: 'your-access-key-id',
      accessKeySecret: 'your-access-key-secret',
      version: '1.0.0', // 版本号
      region: 'cn-hangzhou' // 地域,默认为 cn-hangzhou
    })],
    build: {
      sourcemap: true, // 确保生成 SourceMap 文件
    },
    });
    
  • Webpack 配置示例

    import { RumWebpackPlugin } from '@arms/rum-webpack-plugin'
    
    const config = {
    plugins: [new RumWebpackPlugin({
      pid: 'your-rum-app-id', // RUM 应用 ID
      accessKeyId: 'your-access-key-id',
      accessKeySecret: 'your-access-key-secret',
      version: '1.0.0', // 版本号
      region: 'cn-hangzhou' // 地域,默认为 cn-hangzhou
    })],
    devtool: 'source-map', // 确保生成 SourceMap 文件
    };
    
    export default config;
    

步骤三:开启OSS批量上传开关

在ARMS控制台中,为目标RUM应用开启OSS批量上传文件开关,确保插件有权限将SourceMap文件上传至OSS存储。


2. 自动解析SourceMap

当SourceMap文件成功上传后,ARMS会根据JS文件和SourceMap文件中的UUID进行自动匹配和解析。具体流程如下:

步骤一:注入UUID

RUM前端构建工具插件会在构建过程中向JS文件和对应的SourceMap文件中注入UUID,建立双向关联。例如,SourceMap文件中会增加debugId字段,表示UUID注入成功。

步骤二:异常堆栈解析

在ARMS控制台的异常统计页面中,进入目标异常的异常明细页面,堆栈信息中的每一行都会显示其通过插件注入的UUID。如果已上传了带有对应UUID的SourceMap文件,堆栈信息中的第一行将会自动解析并展示报错的源代码位置。


3. 手动上传与匹配(备选方案)

如果不使用自动上传功能,也可以手动上传SourceMap文件并在ARMS控制台中完成匹配。

步骤一:构建项目

通过前端构建工具生成JS文件和SourceMap文件,确保文件中已注入UUID。

步骤二:手动上传

在ARMS控制台的应用设置页面,进入文件管理区域,上传注入了UUID的SourceMap文件。上传成功后,UUID列会显示对应的UUID,表示解析成功。

步骤三:自动解析

与自动上传类似,ARMS会根据UUID自动匹配并解析异常堆栈信息。


4. 注意事项

  • 安全性提醒:在配置自动上传SourceMap时,需要提供AccessKey ID和AccessKey Secret。强烈建议使用RAM用户完成操作,并妥善保管密钥,避免泄露。
  • 版本要求:确保使用的RUM前端构建工具插件版本为0.0.8及以上,以支持自动上传功能。
  • 地域配置:上传SourceMap文件时需指定正确的地域ID(如cn-hangzhou),否则可能导致文件无法正确上传或解析。

总结

通过上述配置,ARMS前端监控可以实现SourceMap的自动上传和匹配,无需手动选择SourceMap文件。这种方式不仅简化了操作流程,还提高了异常诊断的效率。如果您需要进一步的帮助,可以通过阿里云服务钉钉群(78410016550)联系技术支持团队。

有帮助
无帮助
AI 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答