在前端开发中,错误监控是一个非常重要的环节。Raven.js 是一个开源的前端错误监控工具,它可以帮助我们在网页运行时监控 JavaScript 错误,并将错误信息发送到指定的服务器。
@gkaran/raven-js 是 Raven.js 的一个 npm 包,它提供了更加便捷的使用方式。本篇文章将介绍如何使用 @gkaran/raven-js 开启前端错误监控。
安装
@gkaran/raven-js 可以通过 npm 安装。在终端中执行以下命令即可:
$ npm install @gkaran/raven-js
使用
引入
安装成功后,在需要使用 Raven.js 的文件中引入 @gkaran/raven-js:
import Raven from '@gkaran/raven-js';
初始化 Raven
在引入 Raven 后,我们需要初始化 Raven 配置,告诉它应该把错误信息发送到哪个服务器。
Raven.config('your-dsn', {}).install();
其中,'your-dsn' 是服务器的 DSN,可以在 Sentry 管理面板中找到。
Sentry.init({dsn: 'your-dsn'});
捕捉错误
Raven 可以可以捕捉抛出的任意 JavaScript Error 对象。
// do something } catch (e) { Raven.captureException(e); }
这将捕捉所有类型的 errors(包括 Promise rejections)。当然这可以自定义拦截器,Sentry支持自定义拦截器对捕捉的异常进行过滤,比如过滤掉与PWA的生命周期相关的异常。
-- -------------------- ---- ------- -- ------------------------------------------------- -- --- - ------ ----- - ------ ----- ------ --------------- --------------------------------- --- -- ----------- ----------- ------------------------- ---------- ------------ --- ------------------------- -------- ----- -- - ----------- ------ -------- ----------- --------------------------------- ----------- ----------- --- ------------------------- -------- ------------------- --------- ---- ------ --- -------- ----- ----- ---- ---------- ---------------- --------------- -------- -------- - ------ --- ----------------- -------- -------- -- - -------------------------- -------- - - ------ -- -- ---------- ---------------- -- ---------- ----------------- ----- --------------- ----------- --- ----- - --- ------------------------ ----- ----- ---------- ------------------------------------- -- ---- ---------- ----- ---- ------------------- ------------------------ -------------- --- - -- -- --------- - ----- --- - -------------------------- - ------------------------- -------- ----- -- - ----------- --- ------------------------- -------- ------------------- --------- ---- --- ------------ --------------- -------- -------- - ------ --- ----------------- -------- -------- -- - -------------------------- -------- - - ------ - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------