npm 包 @thinman/bugsnag-sourcemaps 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们难以避免出现一些无法捕获的错误，尤其是页面中的 JavaScript 代码出现错误，如果不能及时地定位这些错误，将会给用户带来不好的体验，亦或是泄露一些敏感的信息。为了解决这个问题，很多前端开发者会选择使用 Bugsnag 这样的错误监测和跟踪工具。

Bugsnag 可以帮助我们捕获并发送错误报告，包括错误的堆栈信息，line number, column number 等。但是，如果我们使用了一些工具来压缩和混淆代码，这些信息将无法正确地反映出来。针对这个问题，有人提出了一个解决方案，即使用 Bugsnag sourcemaps 插件来生成 sourcemaps，并在 Bugsnag 控制台上关联 source map。

本文将介绍如何使用 npm 包 @thinman/bugsnag-sourcemaps 来生成 sourcemaps，并将其与 Bugsnag 关联。

安装

使用 npm 安装 @thinman/bugsnag-sourcemaps：

npm install --save-dev @thinman/bugsnag-sourcemaps

配置

在 package.json 的 scripts 中添加以下配置：

"scripts": {
  "bugsnag-sourcemap": "bugsnag-sourcemaps upload --api-key=${YOUR_API_KEY} --app-version=${YOUR_APP_VERSION} --minified-file-path=${PATH_TO_MINIFIED_FILE} --source-map-file-path=${PATH_TO_SOURCEMAP_FILE} --minified-url=${YOUR_MINIFIED_URL}"
}

参数说明：

YOUR_API_KEY：Bugsnag 控制台中的 API Key。
YOUR_APP_VERSION：应用程序的版本号。
PATH_TO_MINIFIED_FILE：压缩后的代码路径。
PATH_TO_SOURCEMAP_FILE：sourcemaps 文件路径。
YOUR_MINIFIED_URL：用于访问压缩后代码的 URL。

示例代码

以下是一个例子，演示如何使用 @thinman/bugsnag-sourcemaps：

压缩前的 js 代码：

function testFunction() {
  throw new Error("test error");
}

testFunction();

压缩后的 js 代码：

function n(){throw new Error("test error")}n();

sourcemaps 文件：

{
  "version": 3,
  "file": "index.js",
  "mappings": "AAAAA,QAASA,KAAIC,MAAMC",
  "sources": ["index.js"],
  "names": []
}

在 package.json 中配置脚本：

"scripts": {
  "bugsnag-sourcemap": "bugsnag-sourcemaps upload --api-key=${YOUR_API_KEY} --app-version=${YOUR_APP_VERSION} --minified-file-path=./dist/index.min.js --source-map-file-path=./dist/index.min.js.map --minified-url=https://example.com/path/to/index.min.js"
}

执行脚本：

npm run bugsnag-sourcemap

总结

本文介绍了如何使用 npm 包 @thinman/bugsnag-sourcemaps 来生成 sourcemaps，并将其与 Bugsnag 关联。很多前端开发者都应该使用 Bugsnag 或者类似的错误监测和跟踪工具，摆脱手动定位错误的烦恼。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600668ecd9381d61a3540c97