Sentry的使用

公司项目里需要加入，于是自己倒腾了下，就总结了下入门使用手法，哈哈，欢迎指点，希望能帮助大家~~~

Sentry 自我理解，可以更便捷的了解到非必现的bug、无法通过日志追踪的异常等。

一、Sentry介绍：

sentry是一个实时事件日志记录和聚合平台。它专门用于监视错误和提取执行适当的事后操作所需的所有信息, 而无需使用标准用户反馈循环的任何麻烦。

Sentry 是一个日志平台，分为客户端和服务端，客户端(目前客户端有Python, PHP,C#, Ruby等多种语言)就嵌入在你的应用程序中间，程序出现异常就向服务端发送消息，服务端将消息记录到数据库中并提供一个web节目方便查看。Sentry由python编写，源码开放，性能卓越，易于扩展，目前著名的用户有Disqus, Path, mozilla, Pinterest等

---

二、Sentry的注册和使用

公司已有现成的服务了，所以我们只需要用公司邮箱进行注册即可。

下面介绍一下简单的使用方法：

2.1 首先注册账号： 分为UAT 和线上(ONLINE)

online: https://sentry-fe... // 这里是正式线上链接

uat: http://sentry... // 这里是uat环境链接

(公司邮箱注册)


新注册的账号可能无法New Project 创建，这时候需要点击左侧栏目，点击Project & Teams ，需要加入Teams,这是刷新页面，则可以在Select project下面看到你的项目，如果无项目请联系管理员；

image

进入后进行简单配置，然后右上角可以点击 New Project 创建，选择需要项目类型，根据提示进行配置

image

选择相对应的技术

image

下面这个生成的链接也就是日后项目实时监听bug的地址（项目中的sentry.ts文件中需要配置的这个）

image

2.2 sentry在项目中的配置

a. 首先在项目中下载依赖

$ yarn add raven-js -D

b. sentry配置文件

(目前有一套配置文件，可直接饮用，也可对里面的错误警报规则做修改)
如：

image

c. sentry 在项目中的引用：

import * as Raven from "raven-js"; // 首先引入
import { ravenOptions, DSN_ONLINE, DSN_UAT } from "config/sentry"; // 上面对sentry的配置文件
import { isLocalEnv, isUatEnv } from "utils/url";  // 封装的页面链接获取

componentDidMount() {
    if (!isLocalEnv) {
            const dsn = isUatEnv ? DSN_UAT : DSN_ONLINE;
            Raven.config(
                dsn,
                Object.assign({}, ravenOptions, {
                    release: __webpack_global__.SENTRY_RELEASE
// 这里注意了，__webpack_global__相当于是全局的，需要在tsconfig.json里进行配置，深层的原理和关联可以追踪看ezpack库
                })
            ).install();
        }
}

//  componentDidCatch 错误捕获
componentDidCatch(error, errorInfo) {
        const group = errorInfo ? location.href : "default";
        Raven.captureException(error, { extra: errorInfo, fingerprint: [group] });
    }

image

image

以上是在项目中添加sentry最简单的配置使用，当完成到这里的时候，可以进行测试 比如在项目中添加

throw new Error("test error");

发布在环境上进行测试，在自己的账号项目中检查是否监听到错误。

以上只是简单地配置在项目中了，当然，我们可以将它运用的更友好，比如在请求的时候加上：

const captureException = (err, option) => {
    Raven.captureException(err, {
        fingerprint: ["API", option.url],
        message: err,
        extra: option
    });
};
//  在请求时，发生错误处理方法中可以加入此配置，在监听到错误时，详细信息会包括fingerprint： 类型， message： 错误信息， extra： 请求链接的信息以及连接等， 都将在 sentry监听到的详情里展现出来。

还有一些其他用法，待研究后更新。。。(^__) 嘻嘻……

---

推荐参考资料：

【参考资料1】
【参考资料2】