You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
合作与生态
支持与服务
开发者
了解我们
导航

SourceMap 上传与反解

更新时间:2022.09.06 17:02:11

背景

请查看SourceMap详解 了解什么是sourcemap,以及如何利用sourcemap 来进行代码反解。

Sourcemap 管理的位置

Sourcemap管理既有单独存在的页面,也会存在于各个版本详情中。

版本详情页面可由js错误详情页中的管理sourcemap跳转过来。

如何上传Sourcemap

  • (需要鉴权)使用 @apm-insight-web/upload-sourcemaps-webpack-plugin 自动上传 (推荐)

  • (需要鉴权)使用 @apm-insight-web/upload-sourcemaps 自动上传

  • 使用平台手动上传

使用 upload-sourcemaps-webpack-plugin (推荐)

在平台获取鉴权信息

为了防止 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,用于鉴权
    }),
  ],
}

使用upload-sourcemap工具

在平台获取鉴权信息

为了防止 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>
  • 指定release版本(非必须)
    release 只能是常规字符串,最多支持下划线做分隔的英文字符,不支持`:`等特殊字符。
npx upload-sourcemaps --app_id xxxxxx --paths ./dir1 --release 1.0.1 --app_key <API_KEY> --app_secret <API_TOKEN>

验证Sourcemap合法性

如果确认了已经上传 sourcemap,且格式正确,release 对应无误。但反解出来依旧不正确的。可采取如下方式自测。
若结果正常,但平台无法反解,若结果也无法反解,则说明 sourcemap 或原始文件有误。请自行排查是否是sourcemap 被覆盖,或 js 文件被二次处理。

在平台下载对应 sourcemap

  1. 在具体报错页面,找到报错的文件名,并检查是否有 release 信息。

  2. 单击管理sourcemap在版本详情里的 sourcemap 管理模块,搜索对应文件名,找到sourcemap下载。

下载 mozilla 官方 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>
    		);
    };
    ======================================================================
  • 失败输出
    失败输出的 s 变量属性会全为 null,且输出源代码报错。
    $	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 只接受包含完整源码的 sourcemap 格式,不接受其他类似于cheap-xxx的格式。请检查 sourcemap 是否包含源码。