SourceMap 上传与反解

背景 #

请查看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 是否包含源码。