如何剥离上报至Sentry的错误文件路径以正确匹配Source Map

不需要配置固定url prefix，通过上报侧重写堆栈路径即可适配任意部署路径，具体实现如下：

前端初始化配置 #

使用Sentry内置的RewriteFrames集成，在错误上报前剥离所有动态路径前缀，统一对齐Sentry侧存储的产物路径格式：

import * as Sentry from '@sentry/react';
import { RewriteFrames } from '@sentry/integrations';

Sentry.init({
  dsn: '自托管Sentry项目对应DSN',
  release: process.env.REACT_APP_SENTRY_RELEASE, // 与上传SourceMap时的release值保持完全一致
  integrations: [
    new RewriteFrames({
      iteratee: (frame) => {
        if (frame.filename) {
          // 截取路径末端纯文件名，自动丢弃所有层级的部署路径前缀
          const pureFileName = frame.filename.split('/').pop();
          // 统一改写为Sentry产物存储的根路径格式
          frame.filename = `~/${pureFileName}`;
          frame.abs_path = frame.filename;
        }
        return frame;
      }
    })
  ]
  // 其余原有Sentry配置保留即可
});

上传侧配套调整 #

• 无论使用sentry-cli、sentry-webpack-plugin还是其他上传工具，将urlPrefix参数固定设为~/，不需要跟随部署路径修改，也不需要配置多级子路径。
• 配置完成后触发测试错误，在Sentry后台查看事件原始JSON，确认堆栈帧的filename字段为~/main.XYZ.js这类格式，和版本Artifacts页面下的JS、SourceMap路径完全匹配，即可自动完成源码映射。

适配说明 #

• 该方案对所有chunk生效，包括主chunk、异步懒加载chunk，不需要单独写路径匹配规则
• 完全兼容多环境动态部署场景，测试、预发、生产环境无论部署在几级子路径下，都不需要调整Sentry相关配置
• 自托管、官方SaaS版Sentry均可使用，不需要修改服务端配置

内容的提问来源于stack exchange，提问作者Martin Hyberg