sentry-injection-webpack-plugin
Plugin that simplifies injection of sentry and sentry configuration to serve your project
Install
Webpack5
npm i --save-dev sentry-injection-webpack-plugin@next yarn add --dev sentry-injection-webpack-plugin@nextWebpack4
npm i --save-dev sentry-injection-webpack-plugin yarn add --dev sentry-injection-webpack-pluginUseage
webpack.config.js
const webpack = require('webpack');
const SentryInjectionWebpackPlugin = require('sentry-injection-webpack-plugin');
const packageInfo = require('./package.json');
module.exports = {
devtool: 'hidden-source-map', // 生成 source map，SentryInjectionWebpackPlugin 会把生成好的 source map 文件上传到 Sentry 服务器，之后删掉该文件
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new SentryInjectionWebpackPlugin({
dsn: 'http://123@192.168.1.123:9000/1', // required，可以理解为每个项目唯一的id，sentry后台可查看，基础功能只添加这一个参数即可
insertBefore: 'head', // optional， 默认值 head，脚本默认会插入在 head 中，也可设置为 body
environment: process.env.NODE_ENV, // optional， 默认值 development，开发环境(development)、测试环境(testing)、预发布环境(staging)、生产环境(production)
template: 'index.html', // optional，不使用该插件时打包生成的html模板名，本插件会基于该模板注入sentry client代码，默认为 index.html
release: `${packageInfo.name}@${packageInfo.version}`, // optional，建议添加，当配置包含应用程序的版本（release）时，Sentry 可以显示有关回归以及有关可疑提交的详细信息。
tracesSampleRate: 1, // optional，采集率，默认值1，可选范围 0-1
performance: true, // optional，开启性能监控，注意：整个包会增加30多KB
lazy: false, // optional，懒加载 sentry 包。当 DOMContentLoaded 方法执行的时候才会加载 sentry 包。会提高首屏加载速度，不过 sentry 统计的 performance 会相对延迟
logErrors: false, // optional, 是否打印 Vue.config.errorHandler 拦截的错误
sourceMap: { // optional，可上报souce map到sentry
include: './dist', // required，所有的 .map 文件都会被递归上传，匹配关联的js文件。
url: 'http://192.168.1.123:9000/', // required，Sentry 服务地址，默认会发到 https://sentry.io
project: 'react', // required，项目名
urlPrefix: '~/', // required，线上js的完整路径，默认是 ~/，有的项目可能是 ~/static，必须要设置正确，不然还是会看不到源码
org: 'sentry', // required，组织名，获取地址：https://sentry.io/settings/sentry/
authToken: '5b135953d13b48829452912c985a1ce84407195871b74367bc5eb6be8ef93a1c', // required，身份验证令牌，用于和Sentry做交互，获取地址：https://sentry.io/settings/account/api/auth-tokens/
ignore: '', // optional，忽略的文件路径，默认值 ['node_modules']
// ... 更多请见 https://github.com/getsentry/sentry-webpack-plugin
}
})
]
}生成的 index.html [本地开发中不嵌入Sentry]
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<script src="sentry_head.2ca48de2.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Compatibility
| Webpack | DSL | CLI | |||||
| Version | Config externals | ||||||
| 5.x | Yes | No | [React 17] | DIY | |||
| 4.x | Yes | No | [React 17] | [Vue 2.6] | [create-react-app 4.0] | [Umi 3.3] | [@vue/cli 4.5] |
Additional
React：创建 sentry_head.js，并注入到 <head> 中
Vue：将生成 sentry 相关的脚本和现有脚本打包在一起
本地开发环境(development)默认不会集成 sentry，可在测试环境(testing)、预发布环境(staging)、生产环境(production)查看效果