一、基础配置

1.1 修改语言/时区

image.png

1.2 设置 API keys

配置API keys，在选择令牌作用域时，必须要勾选 project:write 和 event:write 这2个选项，这涉及到后面上传 sourceMap 文件的权限。
image.png

设置成功后可以看到一条 API key。
image.png

1.3 创建团队

创建团队，可以避免各个项目之间存在干扰。比如 React 项目通常是前端组负责的，那前端可以自己创建一个团队。APP组、后端组又各自创建自己的团队，这样各团队之间的项目就不会存在互相干扰。
image.png

二、创建项目管理

下面创建一个项目
image.png

选择相应的前端框架，项目名称、以及所属团队。
image.png

创建后可以看到一篇 React 项目的接入文档，写的非常详细了。
image.png
如果怕忘记，可以点右上角的全部文档，查看官方的文档 React Docs。

三、接入 React 项目

万事俱备只欠 bug。

接入过程官方文档已经写得很详细了，就是安装 @sentry/react 和 @sentry/tracing。

yarn add @sentry/react @sentry/tracing
or
npm install --save @sentry/react @sentry/tracing

着重讲一下这一段：

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import * as Sentry from "@sentry/react";
  4. import { Integrations } from "@sentry/tracing";
  5. import App from "./App";
  7. Sentry.init({
  8.   dsn: "http://1a45e49011d84cd7872b5xxxxxxxxx@sentry.xxxx.com/4",
  9.   integrations: [new Integrations.BrowserTracing()],
  11.   // Set tracesSampleRate to 1.0 to capture 100%
  12.   // of transactions for performance monitoring.
  13.   // We recommend adjusting this value in production
  14.   tracesSampleRate: 1.0,
  15. });
  • 在第 8 行的 dsn 配置，是初始化文档的时候给出的配置。官方文档给的是接入他们平台的，这个留意下就行：
    • 1a45e49011d84cd7872b5xxxxxxxxx是当前项目的一个标识；
    • 4 是当前项目的编号（如果是第一次创项目应该是 2-3）,因为官方有部分案例，占了 1-2；

写一个bug,测试下 sentry 功能：

  1. <button onClick={methodDoesNotExist}>Break the world</button>;