更新时间:2022.09.06 17:02:11
请查看SourceMap详解 了解什么是sourcemap,以及如何利用sourcemap 来进行代码反解。
Sourcemap管理既有单独存在的页面,也会存在于各个版本详情中。
版本详情页面可由js错误详情页中的管理sourcemap跳转过来。
(需要鉴权)使用 @apm-insight-web/upload-sourcemaps-webpack-plugin 自动上传 (推荐)
(需要鉴权)使用 @apm-insight-web/upload-sourcemaps 自动上传
使用平台手动上传
为了防止 sourcemap 文件误传,自动上传命令需要鉴权。
进入文件管理 > Sourcemap 管理页面,在顶部获取鉴权所需的API_KEY和API_TOKEN。在接下来的上传中需要提供鉴权信息。
npm install @apm-insight-web/upload-sourcemaps-webpack-plugin --save-dev
在 webpack.config.js 中添加如下脚本。
const UploadSourcemapsPlugin = require('@apm-insight-web/upload-sourcemaps-webpack-plugin') const config = { plugins: [ new UploadSourcemapsPlugin({ app_id: 123456, paths: ['./dir1', './dir2'], // 包含 sourcemap 文件的路径,我们会从中上传符号表文件到平台 release: "1.0.1", // 你的 sourcemap 版本,和 sdk 的版本需要保持一致,可不填,默认为空 appKey: "你的 API_KEY", // 从 sourcemap 管理 页面获取到的 Api Key,用于鉴权 appSecret: "你的 API_TOKEN", // 从 sourcemap 管理 页面获取到的 Api token,用于鉴权 }), ], }
为了防止 sourcemap 文件误传,自动上传命令需要鉴权。
进入文件管理 > Sourcemap 管理页面,在顶部获取鉴权所需的API_KEY和API_TOKEN。在接下来的上传中需要提供鉴权信息。
npm install @apm-insight-web/upload-sourcemaps --save-dev
执行以上命令安装,也可以选择全局安装。
npx upload-sourcemaps --app_id xxxxxx --paths ./dir1 --app_key <API_KEY> --app_secret <API_TOKEN>
npx upload-sourcemaps --app_id xxxxxx --paths ./dir1 --release 1.0.1 --app_key <API_KEY> --app_secret <API_TOKEN>
如果确认了已经上传 sourcemap,且格式正确,release 对应无误。但反解出来依旧不正确的。可采取如下方式自测。
若结果正常,但平台无法反解,若结果也无法反解,则说明 sourcemap 或原始文件有误。请自行排查是否是sourcemap 被覆盖,或 js 文件被二次处理。
在具体报错页面,找到报错的文件名,并检查是否有 release 信息。
单击管理sourcemap在版本详情里的 sourcemap 管理模块,搜索对应文件名,找到sourcemap下载。
地址: https://github.com/mozilla/source-map
var sourceMap = require("source-map"); var fs = require("fs"); // 此处替换为你下载下来的 sourcemap 文件 let data = fs.readFileSync("../index.js.5d59fc.js.map").toString(); const consumer = new sourceMap.SourceMapConsumer(data); consumer.then(c => { // 此处替换为原始报错的行列号 const line = 23, column = 112003; let s = c.originalPositionFor({ line, column }); console.log(s); console.log(`origin code for line: ${line}, ${column}\n`); console.log( `======================================================================` ); console.log( c .sourceContentFor(s.source) .split("\n") .slice(Math.max(s.line - 10, 0), s.line + 10) .join(`\n`) ); console.log( `======================================================================` ); });
$ node index.js origin code for line: 373, 2432186 ====================================================================== }); setTimeout(() => { throw new Error('local test, plz ignore'); }, 1000); }, []); return ( <Provider store={store}> <Player /> </Provider> ); }; ======================================================================
$ node index.js { source: null, line: null, column: null, name: null } origin code for line: 373111, 2432186 ====================================================================== (node:4136) UnhandledPromiseRejectionWarning: Error: "null" is not in the SourceMap. ...
sourcemap 只接受包含完整源码的 sourcemap 格式,不接受其他类似于cheap-xxx的格式。请检查 sourcemap 是否包含源码。