前言
在前端开发中,我们难以避免出现一些无法捕获的错误,尤其是页面中的 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