Sentry搭建
安装
安装前准备：
- 确认已启动 docker，且设置 docker 最小内存为 4g，否则会报错内存过小，官方推荐 8g。
- 确认已安装 docker-compose，执行
docker-compose --version查看，如果 docker 是 desktop 版本会自带安装 docker-compose。
前往 https://github.com/getsentry/self-hosted/releases/latest 下载最新版本，进入目录下给install.sh文件添加执行权限：
chmod +x install.sh
执行安装：
./install.sh
接下来是漫长的等待，磁盘占用大概 7 个 G 的样子。
可能会有报错：realpath: command not found。 是本地一些库没装，安装依赖库：
Ubuntu: sudo apt-get install coreutils
OS X: brew install coreutils
参考：https://unix.stackexchange.com/questions/101080/realpath-command-not-found
官方教程：https://develop.sentry.dev/self-hosted/
docker-compose 安装：https://docs.docker.com/compose/install/
安装成功后，启动服务：
docker-compose up -d # 成功后访问 http://127.0.0.1:9000
停止服务：
docker-compose down
配置 React 项目
登录后台后创建 React 项目，会展示配置方式以及手动上报错误来测试：
Sentry.init({
dsn: 'http://40e57534183347e6bd61ab887d5425d0@192.168.1.30:9000/3',
tracesSampleRate: 1.0,
environment: 'development',
release: packageJson.version, // 根据 package.json 的版本号来设置，一定要有，后面与sourcemap上传的版本号匹配
});
Sentry.captureMessage('Hello, world!');
Sentry.captureException(new Error('Good bye'));
Sentry.captureEvent({
message: 'Manual',
});
页面报错后，后台就会自动出现错误日志，查看日志可以看到错误信息堆栈，错误堆栈是混淆后的代码，我们可以上传 sourcemap 文件来让 Sentry 展示源代码的错误位置。
上传 sourcemap
- 安装 webpack 插件@sentry/webpack-plugin：
npm i @sentry/webpack-plugin -D
webpack 中添加 plugin：
new SentryWebpackPlugin({
release: packageJson.version, // 与项目中Sentry.init的release一致
include: './outputs/', // 只上传输出目录下的文件
ignore: ['node_modules'],
}),
- 项目根目录添加 sentry-cli 配置文件：
.sentryclirc：
[defaults]
url = http://192.168.1.30:9000/
org=sentry
project=layabox-project-template
[auth]
token=b48c0077fb0548a3a21d731fd0d12bca6caa229b504d441a9798e544f9e8f3b7
-
url 是 sentry 的服务器地址
-
org 是 sentry 的组织名(Sentry>Settings>General Settings>Organization Slug)
-
project 是 Sentry 中创建的项目名
-
token 非常难找，在 Sentry 左下的 Settings 点击，默认展示的是
Settings>sentry>General，点击这个目录标题的Settings可以查看设置首页，会看到My Account，点击进去才是账号设置的目录Settings>Account>Details，选择最下方的AUTH TOKEN，新创建一个 token，复制即可。
编译 release 后运行项目可能会报错，提示：__webpack_modules__[moduleId] is not a function，这里有讨论：
https://issueexplorer.com/issue/getsentry/sentry-webpack-plugin/265
解决办法是在 webpack.config.js 中的 optimization 里设置：
optimization: {
minimize: false,
minimizer,
runtimeChunk: {
name: (entrypoint) => `runtime~${entrypoint.name}`,
},
},