在前端开发中，我们不免会遇到需要将代码上传到服务器上进行部署和监控的情况。而 Sentry 作为开源的异常监控平台，可以帮助我们快速发现和定位服务器上的异常问题。本文介绍如何使用npm包webpack2-sentry-plugin快速集成Sentry到项目中，实现自动上报异常错误信息。
1. 安装webpack2-sentry-plugin
使用npm包管理工具，先将 webpack2-sentry-plugin 安装到项目中：
npm install webpack2-sentry-plugin --save-dev
2. 配置Sentry账户
在 https://sentry.io/welcome/ 上注册账户并创建项目，选择相应语言的SDK并获取DSN，如下图所示：
3. 配置webpack2-sentry-plugin
在项目配置文件webpack.config.js中，引入并配置webpack2-sentry-plugin插件。示例如下：
-- -------------------- ---- -------
----- ------------ - ----------------------------------
-------------- - -
------ -----------------------------
------- -
----- ---------------------------
--------- ------------------------
--
-------- -
--- --------------
------------- ------------
-------- ------------
------- -------------
---------- -------------
-------- -------
-------- ------------------------- ----------
------- ---------------- ---------
--
-
--其中的 include 和 ignore 参数用来指定要上传的文件和忽略的文件列表。需要注意的是，include 参数中的文件最好指定为编译后的文件，这样可以减小上传文件的体积。
4. 处理在代码中的异常
在代码中加入下面的代码段：
try {
// your code
} catch (error) {
Raven.captureException(error);
}其中 Raven 是 Sentry SDK 提供的全局错误处理对象。在代码中将错误对象传入该对象的 captureException 方法中，即可在 Sentry 中自动捕获和上报异常信息。
5. 结论
通过使用npm包 webpack2-sentry-plugin，可以快速便捷地将 Sentry 集成到前端项目中，实现自动报错和异常监控。同时，也需要注意在代码中添加适当的错误处理，将错误对象等信息传递给 Sentry 平台进行处理。
try {
// your code
} catch (error) {
Raven.captureException(error);
}6. 示例代码
完整 webpack.config.js 配置文件如下：
-- -------------------- ---- -------
----- ------------ - ----------------------------------
-------------- - -
------ ---------------
------- -
----- -------
--------- ---------------
--
-------- -
--- --------------
------------- ------------------
-------- -------------
------- ----------------
---------- -----------------
-------- --------
-------- ---------------------
------- ----------------
--
-
--完整 index.js 文件如下：
-- -------------------- ---- ------- ------ ----- ---- ----------- ------ --- ---- ------ ------ --- ---- ------------ --------------------------------- --- ----- --- ------- ------- - -- ------ --- --- - -- ---- ---- - ----- ------- - ------------------------------ -
这里使用了 Raven 的 config 方法指定了 Sentry 平台上的 DSN，从而开启了 Sentry 的错误监控功能。在 App.vue 中留下一个错误演示：
-- -------------------- ---- -------
----------
-----
---------- -----------
------- ------------------------- --------------
------
-----------
--------
------ ------- -
-------- -
------------ -
----- --- ------------ ----- -- -- ---------
-
-
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d581e8991b448e12dc