# 异常监控之 sentry 实践

sentry 是一个日志平台，分为客户端和服务端，客户端(目前客户端有Python, PHP, C#, Ruby等多种语言)就嵌入在你的应用程序中间，程序出现异常.。它专门用于监视错误和提取执行适当的事后操作所需的所有信息, 而无需使用标准用户反馈循环的任何麻烦。

这个是主页面

![页面](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggb98np9qpj30tz0cejrr.jpg)

首先我们先注册登录一下, 接着创建一下项目生成 token. 点击头像左下角，选择API，生成token，勾选project:write权限

![token](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggb9no1ez0j319h0i7q46.jpg)

## 基础配置

安装 sentry 对应的命令行管理工具 sentry-cli

```js
npm i -g @sentry/cli

sentry-cli -V // 检查版本
```

安装好之后可以登录

```js
sentry-cli login
```

输入一下命令配置

```js
vi /Users/sjh/.sentryclirc
```

![sentryclirc](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggba338kxdj30us07ejrg.jpg)

### 上传 source map

接着配置 sentry-cli releases files test004 upload-sourcemaps --url-prefix '<http://172.18.8.33:5000/static/js>' './build/static/js/'

成功的话会出现这个

![上传成功页面](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggb9ljibnfj30wh068gly.jpg)

如果出现 error: project not found 可以输入一下命令

```js
sentry-cli info
```

这是我们配置的详细信息, 可以对一下是否写错

```js
sentry-cli projects list
```

查看下项目的对应名称是否输错

2）清空 SourceMap 文件

```sh
sentry-cli releases files staging@1.0.1 delete --all
```

上传成功后我们可以在页面看到这个

![sentry 成功](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggbivhx2xnj31as0h374v.jpg)

### release控制

1. 创建release

```sh
sentry-cli releases -o 组织 -p 项目 new staging@1.0.1

# 这里的 staging@1.0.1 就是我们指定的版本号. 
# -o -p可以通过页面左上角可以看到。现在我们可以通过创建多个版本号来进行异常分类。 同时，也可以通过页面中"Releases"查看是否创建成功

```

2. 本地应用release

```js
# 安装raven - js
npm install raven - js--save

# 回到前端项目中， 在config添加对应的release， 指定版本后， 每次上报的异常就会分类到该版本下。

import Raven from 'raven-js';

Raven.config(DSN, {
    release: 'staging@1.0.1'
}).install()
```

3. 删除release

```sh
sentry-cli releases -o 组织 -p 项目 delete staging@1.0.1

# 注意 删除某个release时需要将其下的异常处理掉,并将该版本的sourcemap文件清空
# 完成上面两步可能还要等待2小时才能删除，不然会报错：该版本还有其它依赖。

```

## vue

```js
import * as Sentry from '@sentry/browser';
d;

Sentry.init({
    dsn: 'https://3ab8eff44adc41bdb4b7b3abeb9af39e@o209216.ingest.sentry.io/5304337',
    integrations: [new VueIntegration({
        Vue,
        attachProps: true
    })],
});
Vue.prototype.Sentry = Sentry // 在捕获错误的界面需要用到Sentry
```

接着在 webpack 中配置

```js
    configureWebpack: {
        plugins: [
            new SentryCliPlugin({
                include: "../game-developer-web/src/main/webapp/resources/dist", // 作用的文件夹(打包好的文件夹)
                release: process.env.RELEASE_VERSION, // 版本号
                configFile: "sentry.properties",
                ignore: ['node_modules'],
                urlPrefix: "../game-developer-web/src/main/webapp/resources/dist" // 线上项目的文件夹名
            })
        ]
    }
```

![vue 效果图](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggbitbai4sj30sv06uweq.jpg)

## react

对应的 react 项目配置很简单

在 index.js 引入

```js
import * as serviceWorker from './serviceWorker';
import * as Sentry from '@sentry/browser';

Sentry.init({
    release: 'test004',
    dsn: "https://b0e87f818a464f319892f9c0eeb5e39e@o209216.ingest.sentry.io/5303156",
    release: 'test004',
    beforeSend(event, hint) {
        // Check if it is an exception, and if so, show the report dialog
        if (event.exception) {
            Sentry.showReportDialog({
                eventId: event.event_id
            });
        }
        return event;
    }
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shenjunhong.gitbook.io/blog/chang-jian-zong-jie/meizu/yi-chang-jian-kong-zhi-sentry-shi-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.