前端监控sentry使用
2020/7/20 sentry
docs/docker (opens new window)
# 安装
- Step1
git clone [email protected]:getsentry/onpremise.git
1
- Step2:
cd onpremise
- Step3: 创建 name volume，持久化
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres
1
Step4:
cp -n .env.example .envStep5
# onpremise下 创建目录
mkdir -p data/{sentry,postgres}
# 一定执行，不然报错，然后再生成key
docker-compose build
1
2
3
4
2
3
4
- Step6: 生成 key 放到
.env文件中
# 获取项目的key
docker-compose run --rm web config generate-secret-key
1
2
2
- Step7: 生成数据库，并在这一步设置超级用户
docker-compose run --rm web upgrade
1
- Step8: 开启 sentry 服务
docker-compose up -d
1
Step9:
http:://localhost:9000 即可进入sentryDSN
# DSN位置：项目 - 选择目标项目 - 设置 - 客户端密钥 (DSN) - 配置
{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}
PROTOCOL 使用的协议: http或https
PUBLIC_KEY 验证sdk的公钥
SECRET_KEY 验证sdk的密钥
HOST 目标sentry服务器
PATH 通常为空
PROJECT_ID 验证用户绑定的项目id
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- 客户端中使用
import * as Sentry from "@sentry/browser";
Sentry.init({
dsn: "http://PUBLIC_KEY:SECRET_KEY@localhost:9000/PROJECT_ID",
release: "sentry_app@20190710",
environment: process.env.NODE_ENV
});
1
2
3
4
5
6
7
2
3
4
5
6
7
# example
- 工程目录部分文件 示例 (opens new window)
.
├── .gitignore
├── .sentryclirc # sentry配置文件
├── config-overrides.js # react-app-rewired配置文件
├── README.md
├── build # 打包后的文件
│ └── static
│ ├── js
│ │ ├── main.28cb07aa.chunk.js
│ │ └── main.28cb07aa.chunk.js.map
├── package.json
├── public
│ └── index.html
├── src
│ ├── App.js
│ ├── Button.js
│ ├── index.js
│ └── serviceWorker.js
└── yarn.lock
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package.json部分配置
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build"
},
"devDependencies": {
"@sentry/webpack-plugin": "^1.7.0",
"react-app-rewired": "^2.1.3"
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
npx create-react-app react-sentry.sentryclirc
[defaults]
url = http://localhost:9000
org = sentry
project = react-sentry
[auth]
token = 9210xxxxxxxx42b5823d8b0f6ebfdbb4
1
2
3
4
5
6
7
2
3
4
5
6
7
Button.js
import React, { Component } from "react";
class Button extends Component {
constructor() {
this.methodDoesNotExist = this.methodDoesNotExist.bind(this);
}
methodDoesNotExist() {
throw new Error(`我是一个抛出的错误日志: ${new Date()}`);
}
render() {
return <button onClick={this.methodDoesNotExist}> Break the world</button>;
}
}
export default Button;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
App.js
import React from "react";
import * as Sentry from "@sentry/browser";
import Button from "./Button";
// 自建sentry服务的dsn组成部分
// dsn: PROTOCOL://PUBLIC_KEY:SECRET_KEY@localhost:9000/PROJECT_ID
Sentry.init({
dsn: "http://05bdfb2xxxx77:00a40ae1bxxxxf0@localhost:9000/4",
release: "react-sentry@20190711",
environment: process.env.NODE_ENV
});
function App() {
return (
<div className="App">
<Button />
</div>
);
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 上传 sourcemap 文件：
sentry-cli
# sentry-cli releases -o 组织 -p 项目 files [email protected] upload-sourcemaps js文件所在目录 --url-prefix 线上资源URI
# 运行如下命令
sentry-cli releases files react-sentry@20190711 upload-sourcemaps ./build/ --url-prefix '~/static/js/'
1
2
3
4
2
3
4
- 上传 sourcemap 文件：
@sentry/webpack-plugin
# 通过配置webpack： config-overrides.js
# 安装：react-app-rewired
$ `npm install react-app-rewired --save-dev`
1
2
3
2
3
- 配置
config-overrides.js
const SentryCliPlugin = require("@sentry/webpack-plugin");
module.exports = function override(config, env) {
//do stuff with the webpack config...
if (process.env.NODE_ENV === "production") {
config.plugins.push(
new SentryCliPlugin({
include: "./build",
urlPrefix: "~/static/js/",
ignoreFile: ".sentrycliignore",
ignore: ["node_modules", "webpack.config.js"],
configFile: "sentry.properties"
})
);
}
return config;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 运行
npm run build上传 sourcemap