一.介绍

1.什么是sentry?

对于每一个项目,我们都没办法保证代码零BUG,零报错,即便是经历过测试,在上线后也会出现一些你预料不到的问题,而这种情况下,广大的用户其实才是最好的测试者。

而sentry就扮演着一个错误收集的角色,将你的项目和sentry结合起来,无论谁在项目使用中报错,sentry都会第一次时间通知开发者,出现了什么错误,错误出现在哪,帮你记录错误,便于你解决问题,这就是sentry。

使用sentry需要结合两个部分,客户端与sentry服务端;客户端就像你需要去监听的对象,比如公司的前端项目,而服务端就是给你展示已搜集的错误信息,项目管理,组员等功能的一个服务平台。

这个平台可以自己搭建,也可以直接使用sentry提供的平台(注册可用),当然如果是公司项目,当然推荐自己搭建,本文做展示会直接使用官方平台。

2.什么是DSN?

DSN是连接客户端(项目)与sentry服务端,让两者能够通信的钥匙;每当我们在sentry服务端创建一个新的项目,都会得到一个独一无二的DSN,也就是**。在客户端初始化时会用到这个**,这样客户端报错,服务端就能抓到你对应项目的错误了。

之前版本的sentry对于**分为公钥和私钥,一般前端用公钥(DSN (Public)),但是现在的版本舍弃了这种概念,只提供了一个**。

3.什么是event

每当项目产生一个错误,sentry服务端日志就会产生一个event,记录此次报错的具体信息。一个错误,对应一个event。

4.什么是issue

同一类event的集合,一个错误可能会重复产生多次,sentry服务端会将这些错误聚集在一起,那么这个集合就是一个issue。

5.什么是Raven

我们在项目中初始化,让项目链接sentry的前提,都得保证已经引入了Raven js,以及我们手动提交错误的各类方法,都由Raven提供,这是很重要的。

 

二.搭建

1.注册与登录

Sentry

sentry支持使用github账号登录,这里我直接使用github登录官方。

2.创建一个新的项目

Sentry

点击左上角的添加功能,选择添加project,页面会跳转到语言选择界面,比如本人项目是angular,这里选择angular。编辑项目名称,选择项目放在哪个分组里,点击创建。

项目project,组team,成员member的关系,你可以在不同的组创建不同的项目,只有加入了该组的成员才能看到组内已拥有的项目错误采集信息。

Sentry

来到了快速入门指南页面,可以先不看,直接点击下一步;这样项目就创建完成了。

Sentry

3.获取项目DSN

点击settings设置或者issue旁边的小箭头,再点击manage管理

Sentry

来到项目设置页,可以看到左侧选项中有一个client keys(DSN),点击DSN,可以看到次项目的DSN,复制,我们等会会用到。

Sentry

Sentry

4. 配置

需要在项目中安装 SDK:

# Using yarn
$ yarn add @sentry/browser

# Using npm
$ npm install @sentry/browser

为了通过 SDK 和 Sentry 服务通信,这里可以单独创建一个高阶组件包裹应用,示例代码如下:

// SentryErrorBoundary
import React, { Component } from "react";
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "YOUR_DSN_KEY_HERE",
});

class SentryErrorBoundary extends Component<any, any> {
  componentDidCatch(error, errorInfo): void {
    Sentry.withScope((scope) => {
      scope.setExtras(errorInfo);
      Sentry.captureException(error);
    });
  }

  render() {
    return this.props.children;
  }
}

export default SentryErrorBoundary;

在项目顶层进行引入

// index.jsx
import React from "react";
import App from "src/App";
import ErrorBoundary from "components/ErrorBoundary";

ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById("root")
);

至此完成了项目的初始化,SDK 会自动捕获应用运行时的错误进行上报。我们可以在管理后台实时监控到错误信息,方便定位问题以快速解决。

 

Sentry

 

分类:

技术点:

相关文章: