前言
在前端开发中，我们难以避免出现一些无法捕获的错误，尤其是页面中的 JavaScript 代码出现错误，如果不能及时地定位这些错误，将会给用户带来不好的体验，亦或是泄露一些敏感的信息。为了解决这个问题，很多前端开发者会选择使用 Bugsnag 这样的错误监测和跟踪工具。
Bugsnag 可以帮助我们捕获并发送错误报告，包括错误的堆栈信息，line number, column number 等。但是，如果我们使用了一些工具来压缩和混淆代码，这些信息将无法正确地反映出来。针对这个问题，有人提出了一个解决方案，即使用 Bugsnag sourcemaps 插件来生成 sourcemaps，并在 Bugsnag 控制台上关联 source map。
本文将介绍如何使用 npm 包 @thinman/bugsnag-sourcemaps 来生成 sourcemaps，并将其与 Bugsnag 关联。
安装
使用 npm 安装 @thinman/bugsnag-sourcemaps：
--- ------- ---------- ---------------------------
配置
在 package.json 的 scripts 中添加以下配置：
---------- - -------------------- ------------------- ------ ------------------------- --------------------------------- --------------------------------------------- ------------------------------------------------ ------------------------------------ -
参数说明：
- 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 代码：
-------- -------------- - ----- --- ----------- -------- - ---------------
压缩后的 js 代码：
-------- --------- --- ----------- ------------
sourcemaps 文件：
- ---------- -- ------- ----------- ----------- -------------------------- ---------- ------------- -------- -- -
在 package.json 中配置脚本：
---------- - -------------------- ------------------- ------ ------------------------- --------------------------------- ---------------------------------------- ---------------------------------------------- -------------------------------------------------------- -
执行脚本：
--- --- -----------------
总结
本文介绍了如何使用 npm 包 @thinman/bugsnag-sourcemaps 来生成 sourcemaps，并将其与 Bugsnag 关联。很多前端开发者都应该使用 Bugsnag 或者类似的错误监测和跟踪工具，摆脱手动定位错误的烦恼。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668ecd9381d61a3540c97