在前端开发中，JavaScript 代码的错误处理是一个非常重要的过程。在实际开发中，我们常常会遇到因为某些原因导致 JavaScript 代码出现错误的情况。这些错误可能是语法错误、逻辑错误、数据类型错误等等，如果不加以处理，可能会引发一系列的问题，比如程序崩溃、数据丢失等等，给用户带来不好的体验。
为了解决这些问题，我们需要对 JavaScript 进行错误收集和监控。本文将介绍现在比较流行的使用 Webpack 打包后的错误收集解决方案。
webpack 打包后的错误收集方案
前端开发中，通常我们会使用 Webpack 进行代码的打包。Webpack 打包后的代码在错误处理方面有一些不同于全局的 JavaScript 环境。
传统的 JavaScript 环境下，全局的 window.onerror 事件可以捕获到所有的异常。但是在使用 Webpack 进行打包之后，这个 onerror 方法并不能捕获到所有的异常。
这是因为，对于一些没有被捕获的异常，Webpack 会将它们打成一个叫做 runtime error 的 chunk，在 runtime error 中有一个错误处理函数，这个函数中可以处理所有没有被捕获的异常。所以 window.onerror 并不能像传统 JavaScript 环境下那样捕获到所有的异常。
因此，针对 Webpack 打包后的代码进行错误收集和监控，需要使用特定的解决方案。下面我们将介绍目前比较流行的两个 webpack 打包后的错误收集方案：sentry 和 Bugsnag。
Sentry 的使用
Sentry是一个流行的错误收集和监控解决方案。它可以集成到各种应用程序中，包括桌面应用程序、移动应用程序和 Web 应用程序。
Sentry 可以收集到错误，刻画出详细的错误信息，包括错误的发生时间、出错文件、错误代码行号等等。同时，Sentry 还提供了丰富的事件和数据处理功能，可以帮助我们更好地处理错误。
下面我们来看看如何在 Webpack 中使用 Sentry。
安装 Sentry
在使用 Sentry 之前，需要先安装 Sentry 的 JavaScript SDK。
使用 npm 进行安装：
npm install @sentry/browser @sentry/integrations --save
初始化 Sentry
在使用 Sentry 之前，需要先进行初始化。
我们需要在引入 @sentry/browser 的时候，调用 init() 方法，传入一些参数，如下所示：
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: 'your-dsn',
integrations: [new Sentry.Integrations.Vue({ Vue })]
});其中，dsn 是一个唯一的标识符，每个项目都有一个唯一的 dsn。
异常捕获
在 Sentry 初始化后，我们就可以开始进行异常捕获了。
在我们捕获到一个异常之后，我们需要使用 Sentry.captureException 方法将异常信息发送到 Sentry 服务器：
try {
// do something
} catch (error) {
Sentry.captureException(error);
}配置 Source Map
当发生 JavaScript 异常时，我们往往需要知道错误的具体位置，在哪个文件的哪一行代码出错了。但是由于 Webpack 的打包，我们在浏览器中看到的代码已经不再是源代码了，而是多个 chunk 组成的代码。
为了解决这个问题，我们需要在 Webpack 中配置 Source Map，这样我们就可以知道错误的确切位置了。
首先，在 webpack.config.js 文件中开启 Source Map：
devtool: 'source-map'
然后，在 Sentry 中配置 Source Map：
-- -------------------- ---- -------
-------------
---- -----------
------------- ---- ------------------------- --- ----
-------- -------------------
------------ -------------
-- -- ------ ---
-- ------- ------ ------- ------ ---------
-- ---- ------ --
-- ---------------------------------------------------------------------------
----------------- ----- -
-- ----- -- ---------------------- -- ----------------------------- -
-- -- ----- -----
----- ---------- - --------------------------------- -- -----------------------------
-- -- ------ ---
---------------------- -- -
-----------------
----------
---
------ ------------------------------------------------
---
-
------ ------
-
---需要注意的是，开启 Source Map 并不是自动的，我们还需要在 Sentry 后台配置对应的文件。
其他配置项
Sentry 还有一些其他的配置项，比如设置环境、设置时间戳、设置用户等等，这里就不一一列举了。大家可以参考 Sentry 的官方文档。
Bugsnag 的使用
Bugsnag 是一个面向开发人员、设计师和产品经理的错误监测和分析平台。通过它，开发人员可以更快地发现和修复错误，从而提高应用程序性能和用户体验。
Bugsnag 可以集成到多种桌面应用程序、移动应用程序和 Web 应用程序中。它可以捕获各种类型的错误，包括 JavaScript 错误、网络错误、页面渲染错误等等。
下面我们来看看如何在 Webpack 中使用 Bugsnag。
安装 Bugsnag
在使用 Bugsnag 之前，需要先安装 Bugsnag 的 JavaScript SDK。
使用 npm 进行安装：
npm install bugsnag-js --save
初始化 Bugsnag
在使用 Bugsnag 之前，需要先进行初始化。
我们需要在引入 bugsnag-js 的时候，调用 bugsnag() 方法，传入一些参数，如下所示：
import bugsnag from 'bugsnag-js';
const bugsnagClient = bugsnag('your-api-key');其中，api-key 是一个唯一的标识符，每个项目都有一个唯一的 api-key。
异常捕获
在 Bugsnag 初始化后，我们就可以开始进行异常捕获了。
在我们捕获到一个异常之后，我们需要使用 bugsnagClient.notify 方法将异常信息发送到 Bugsnag 服务器：
try {
// do something
} catch (error) {
bugsnagClient.notify(error);
}配置 Source Map
当发生 JavaScript 异常时，我们往往需要知道错误的具体位置，在哪个文件的哪一行代码出错了。但是由于 Webpack 的打包，我们在浏览器中看到的代码已经不再是源代码了，而是多个 chunk 组成的代码。
为了解决这个问题，我们需要在 Webpack 中配置 Source Map，这样我们就可以知道错误的确切位置了。
和 Sentry 一样，在 webpack.config.js 文件中开启 Source Map：
devtool: 'source-map'
然后，在 Bugsnag 中配置 Source Map：
-- -------------------- ---- -------
----- ------------- - ------------------------
-- -- ------ ---
-- ------- ------ ------- ------- ---------
-- ---- ------- --
-- -------------------------------------------------------
----------------------
-------- ------- -- -
----- - ------ -------- -------- - - ------
-- ------ --- --
-- ------ -- ----------------- -
---------------------------- ------ -- -
-------------- -
-- --------------------- -- --- -------- -
---------- - --------------------------- ----------
-
---------- - --------------------------------------------
------------------------
-
---
-
----------------------------
-
---需要注意的是，和 Sentry 一样，开启 Source Map 并不是自动的，我们还需要在 Bugsnag 后台配置对应的文件。
其他配置项
Bugsnag 还有一些其他的配置项，比如设置环境、设置时间戳、设置用户等等，这里就不一一列举了。大家可以参考 Bugsnag 的官方文档。
总结
对于一个 Web 应用程序，错误处理是非常重要的。在使用 Webpack 进行打包之后，我们需要使用特定的解决方案来收集和监控错误。
本文介绍了目前比较流行的两个 webpack 打包后的错误收集方案：sentry 和 Bugsnag。它们都具有较好的性能和功能，能够帮助我们更好地进行错误收集和监控。
这里提醒大家，无论使用哪一种错误收集和监控方案，都需要注意隐私和安全问题。错误信息可能会包括用户的敏感信息，所以我们需要注意处理这些信息，避免泄露。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f4628ef6b2d6eab3d6bba2