使用 Sentry 平台处理客户端异常日志

介绍

引用官方的描述,Sentry 的应用程序监视平台可为每位开发人员提供帮助诊断,修复和优化其代码的性能。

注册

首先进入注册页面注册一个账号,Email最好填公司的邮箱,方便接收告警信息。

注册成功后,选择JavaScript 语言,点击Create Project 。

引入

集成地址:Sentry

要将Sentry 与Vue 应用程序一起使用,需要使用Sentry的浏览器JavaScript SDK :@sentry/browser 。该SDK 将报告应用程序触发的任何未捕获的异常。

我们首先在项目中进行安装:

npm install @sentry/browser

此外,Vue 集成将捕获引发错误的活动组件的名称和道具状态。这是通过Vue的config.errorHandler 钩子报告的。

Sentry 5.X版本的Vue集成位于@sentry/integrations ,下面来安装:

npm install @sentry/integrations

然后在项目的入口文件内引入:

import Vue from "vue";
import * as Sentry from "@sentry/browser";
import { Vue as VueIntegration } from "@sentry/integrations";


Sentry.init({
  dsn: "https://c9bee4513d4f44beb9a9603f8bfd7ba3@o437037.ingest.sentry.io/5399023",
  integrations: [new VueIntegration({ Vue, attachProps: true, logErrors: true })],
});

注意:init 方法里的dsn 是根据注册信息来生成的,无法公用。

在传递参数方面,attachProps 是可选的,默认为true 。如果设置为false ,Sentry 将禁止发送所有 Vue 组件的props 进行记录。logErrors 也是可选的,默认为false 。如果设置为true ,Sentry 将调用Vue 的logError 函数。如果不声明,这就意味着在Vue渲染器中发生的错误不会打印在控制台上,所以这里我们显式声明该参数。

到此,已经为项目成功引入了Sentry 。

配置

当引入完成后,启动项目,再回到刚才注册成功的页面,会有一个Take me to my event 的入口,点击进入就可以看到日常日志输出到控制台。

这里我创建了一个叫做zqykj 的监控项目,这里是监控地址。主页如下所示:

使用 Sentry 平台处理客户端异常日志

如果需要在有新的错误信息的时候,想要及时获悉,需要配置一下告警规则。点击左侧的Alerts ,然后点击页面右上方的Create Alert Rule ,添加最基本的警告规则,这里选择第一条规则An event is seen 。然后选择发送邮件的对象,默认是发送给自己,也可以选择团队。速率限制选择5分钟,然后填入一个规则名称,最后保存。规则如图所示:

使用 Sentry 平台处理客户端异常日志

总结

Sentry 的引入可以很方便的监听到一些错误信息,可以清晰的看到错误信息的来源,包括浏览器信息、操作系统、出错的URL地址,以及栈信息。相信此工具可以极大的提高我们开发人员定位bug的效率。

最后,我们也可以选择将此工具配置到公司内网,Github地址为:https://github.com/getsentry/onpremise ,这部分超出了前端的范畴,在此不做记录。