umi（React）项目接入Sentry-本地-基础篇

公司toC的项目较多，有很多应用场景bug复现难度较大，报错原因不好定位，于是，我老大决定找一个能做线上监控的东西来解决这个问题。因为我老东家有用Sentry来做这个，此情此景我就接下了这个调研任务~ 话不多说，直奔主题，调研一个东西肯定是先本地搞个demo接一接啦~ 我用umi快速生成了一个项目，然后按官方指导。

• 注册一个Sentry账号：sentry.io/signup/
• 创建一个项目

• 找到新项目的dns地址

• 到前端项目里面，先安装@sentry/react

npm install --save @sentry/react

或者

yarn add @sentry/react

然后在项目入口处（umi项目时src下面的app.tsx文件）初始化：

import * as Sentry from "@sentry/react";
import pkg from "../package.json";

process.env.UMI_ENV !== 'prod' && Sentry.init({
    enabled: true,
    dsn: "xxxx",
    integrations: [
        new Sentry.BrowserTracing({
            tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
        }),
        new Sentry.Replay(),
    ],
    environment: process.env.UMI_ENV,
    // 用于性能监控
    tracesSampleRate: 1.0,
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    release: pkg.version
});

然后随便一个页面调用一个没定义的变量或者方法：

import styles from './index.less';
import { history } from "umi";

export default function IndexPage() {
  return (
    <div>
      <h1 className={styles.title}>Sentry Demo</h1>
      <div className={styles.jump} onClick={() => history.push("/test")}>
        我是test页面入口
      </div>
      <button onClick={() => methodDoesNotExist()}>Break the world</button>;
    </div>
  );
}

上面的methodDoesNotExist未定义，所以点击button必定报错，报错显示在这里：

这里的ReferenceError就是对应的报错了，Sentry会对报错进行分类，可以看到这里有各式个样的报错。

未完待续...