Sentry-injection-webpack-plugin NPM

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@next

Webpack4

  npm i --save-dev sentry-injection-webpack-plugin

  yarn add --dev sentry-injection-webpack-plugin

Useage

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

Additional

React：创建 sentry_head.js，并注入到 <head> 中

Vue：将生成 sentry 相关的脚本和现有脚本打包在一起

本地开发环境(development)默认不会集成 sentry，可在测试环境(testing)、预发布环境(staging)、生产环境(production)查看效果