@alitajs/sentry v2.0.0

umi-plugin-sentry

umi 项目快速介入 Sentry 官方 SDK 的插件。

Sentry 是一个服务，帮助你监测和修复在实时崩溃。服务器是 Python 的，但是它包含一个完整的 API，用于在任何应用程序中从任何语言发送事件。

调试开发

yarn && yarn build && yarn start

无需在 example 目录下面安装依赖

使用

$ yarn add @alitajs/sentry

import { defineConfig } from 'umi';
export default defineConfig({
  plugins: ['@alitajs/sentry'],
  sentry: {
    dsn: '可以访问 https://sentry.io/ 免费申请，记得选 react 项目类型',
  },
});

错误跟踪

错误堆栈

面包屑

用户反馈

配置

运行时配置

比如：

export const sentry = {
  showDialog: true,
  fallback: ({ error, componentStack, resetError }) => (
    <React.Fragment>
      <div>You have encountered an error</div>
      <div>{error.toString()}</div>
      <div>{componentStack}</div>
      <button
        onClick={() => {
          resetError();
        }}
      >
        Click here to reset!
      </button>
    </React.Fragment>
  ),
  onError: (e) => {
    console.error(e);
  },
  beforeCapture: (scope) => {
    scope.setTag('location', 'first');
    scope.setTag('anotherTag', 'anotherValue');
  },
};

API

import { Sentry } from 'umi';

captureMessage 手动发数据

// 此处的 debug 为等级
Sentry.captureMessage('Something went wrong', 'debug');

captureException 手动发送事件

默认情况下 sentry 只会发送我们程序中没有捕获的错误，如果是已经被程序捕获的错误，将不会自动发送，这时候我们可以在处理完错误之后，选择性的手动发送事件。

try {
  aFunctionThatMightFail();
} catch (err) {
  Sentry.captureException(err);
}

setLevel 设置等级

Sentry.configureScope(function (scope) {
  scope.setLevel(Sentry.Severity.Warning);
});

setUser 设置用户

比如在用户登陆授权之后，全程跟踪用户发生的错误。

Sentry.setUser({ id: '123', username: 'xiaohuoni', email: '' });

可以清除当前设置的用户：

Sentry.configureScope((scope) => scope.setUser(null));

setTag 设置标签

设置完可以在后台看到对应的分类标签

Sentry.setTag('page_locale', 'de-at');

以上是我觉得比较常用的方法，如果你想了解更多，请查看 sentry 的文档。