# 错误监控工具-Sentry

## 1. 安装依赖

Vue安装：

```
npm i @sentry/browser
npm i @sentry/integrations
```

React安装：

```
npm i @sentry/react
```

## 2. 申请权限

Sentry中配置项目基本信息后，可以得到如下地址明确项目错误信息的上报地址：

```
https://<key>@report.url.cn/sentry/<project>
```

## 3、项目接入sentry

Vue接入：

```javascript
// /src/index.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
const RELEASE_VERSION = require('../package.json').version
Sentry.init({
   dsn: "", // 步骤2所得到的地址
   integrations: [
       new Integrations.Vue({
           Vue,
           attachProps: true,
      }),
       new Integrations.RewriteFrames(),
  ],
   release: RELEASE_VERSION, // 版本号
});
```

React接入：

```javascript
// /src/index.js
import * as Sentry from '@sentry/react';
const RELEASE_VERSION = require('../package.json').version
Sentry.init({
   dsn: "", // 步骤2所得到的地址
   release: RELEASE_VERSION, // 版本号
});
```

## 4、上传sourcemap

### 4.1 安装依赖

```
npm i @sentry/webpack-plugin -D
```

### 4.2 配置.sentryclirc文件

根目录下创建.sentryclirc文件：

```
[auth]
token=XXX // sentry中个人的token令牌
​
[defaults]
org=组织名称
project=projectName
url=http://sentry.oa.com/
```

### 4.3 配置webpack - vue2.0 + react

```javascript
// webpack.prod.conf，参数解释详见参考资料
const SentryCliPlugin = require("@sentry/webpack-plugin");
const RELEASE_VERSION = require('../package.json').version
plugins:[
   new SentryCliPlugin({
         include: "./dist",
         release: RELEASE_VERSION,
         configFile: "sentry.properties",
         ignore: ['node_modules', 'webpack.config.js'],
         urlPrefix : "~/", // 正式环境的js的代码路径前缀
  })
]
```

### 4.4 配置webpack - vue3.0

```javascript
// vue.config.js
const SentryPlugin = require("@sentry/webpack-plugin");
const RELEASE_VERSION = require('../package.json').version
module.exports = {
 productionSourceMap: true,
 chainWebpack: config => {
   config.plugin("sentry").use(SentryPlugin, [
    {
       ignore: ["node_modules"],
       include: "./dist", // 上传dist文件的js
       configFile: "./.sentryclirc", // 配置文件地址
       release: RELEASE_VERSION, // 版本号
       urlPrefix: "~/", // 正式环境的js的代码路径前缀
    },
  ]);
},
 // ...
}
```

{% hint style="warning" %}
`@sentry/webpack-plugin`在上传后不会删除sourceMap, 修改一下`npm run build`命令：

```
"scripts": {
    "build": "vue-cli-service build && rm -fr dist/js/*.map"
}
```

{% endhint %}

### 4.5 其他

webpack-sentry-plugin 可以在上传后删除打包后的sourcemap，可以节省后面上传打包后文件的过滤sourcemap的操作。

```
npm install webpack-sentry-plugin --save-dev
```

根目录创建 sentry.config.js

```javascript
module.exports = {
 organization: '',
 project: '',
 apiKey: '',
};
```

webpack配置：

```javascript
const SentryPlugin = require('webpack-sentry-plugin')
const RELEASE_VERSION = require('../package.json').version
plugins: [
 // ...
 new SentryPlugin(Object.assign({
     release: RELEASE_VERSION,
     deleteAfterCompile: true,
     // exclude: /(\.css\.map| \.css | \.html)$/,
     include: /(\.js\.map | \.js)$/, // 只上传js和map文件
     filenameTransform: function (filename) {
       return '~/' + filename
    },
  }, require('../sentry.config.js')))
]
```

{% hint style="info" %}
参考资料：[vue+sentry 前端异常日志监控](https://www.cnblogs.com/qiezuimh/p/11440506.html)
{% endhint %}

{% hint style="info" %}
如果你对内容有任何疑问，欢迎提交 [❕issues](https://github.com/MrEnvision/Front-end_learning_notes/issues) 或 [✉️ email](mailto:EnvisionShen@gmail.com)
{% endhint %}


---

# 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://sherwinshen.gitbook.io/qian-duan-xue-xi/tools/sentry.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.