@xmqd/webpack-sentry-plugin

@xmqd/webpack-sentry-plugin 是一个用于在 webpack 构建生产环境代码时上传 .map 文件到 sentry 上的插件。

Table of Contents

• Introduction
• Installation
• Usage
• Options
• License

Introduction

封装了 webpack-sentry-plugin，集成以下功能：

• sentry 上 release 与上线 tag 关联。
• 实现静态资源域名和网站域名不一致情况下的 sourcemap 功能。
• 传入的 options 透传给 webpack-sentry-plugin。
• 把 release 设置为环境变量 process.env.SENTRY_RELEASE，用于客户端上传错误到对应 release。
• 自动转换 sourceMappingURL 为完整 url 并把完整 url 作为 sentry 上 .map 文件的文件名。
• 构建完成后自动删除 .map 文件。

Installation

node side

• with npm

  $ npm install @xmqd/webpack-sentry-plugin --save-dev

• with yarn

  $ yarn add @xmqd/webpack-sentry-plugin --dev

client side

• with npm

  $ npm install raven-js --save

• with yarn

  $ yarn add raven-js

Usage

node side

• require @xmqd/webpack-sentry-plugin

  const SentryPlugin = require('@xmqd/webpack-sentry-plugin');

• configure webpack.prod.config.js

  // ...
    
  // 不包含列信息的 sourcemap，生产环境建议直接这样配置
  devtool: 'cheap-module-source-map',
  // ...
  output: {
      // ...
      sourceMapFilename: 'path/to/[name].[chunkhash:8].map',
      // ...
  },
  // ...
  plugins: [
      // ...
        
      /**
       * 参数配置参照 https://github.com/40thieves/webpack-sentry-plugin
       * 
       * @param {Object} options
       * @param {string} options.baseSentryURL - sentry api
       * @param {string} options.organization - 组织名
       * @param {string} options.project - 项目名
       * @param {string} options.apiKey - 在 sentry 生成的访问 sentry api 的 token
       * @param {string} [options.urlPrefix=~/] - 上传到 sentry 上的 js 文件的文件名，请保证是以 “~/” 开头且路径与构建路径一致
       * @param {boolean} [options.isSilent=false] - 是否禁用插件
       */
      new SentryPlugin({
          baseSentryURL: 'https://sentry.io/api/0',
          organization: 'sentry',
          project: 'project name',
          apiKey: 'access token',
          urlPrefix: '~/dist/static/'
      }),
      // ...
  ],
  // ...

client side

• require raven-js

  import Raven from 'raven-js';

• configure

  // 如果是在 vue 或 react 框架中引入需要加，方便上报信息
  window.Raven = Raven;
  
  /**
   * optinos 中其他参数参配置照 https://docs.sentry.io/platforms/javascript/?platform=browser
   *
   * @param {string} dsn - 新建一个项目会产生一个标识该项目的 dsn，用于上报错误
   * @param {Object} options
   * @param {string} options.release - 固定为 process.env.SENTRY_RELEASE，在 webpack 构建会自动替换成对应的 release
   */
  Raven
      .config('dsn', {
          // ...
          release: process.env.SENTRY_RELEASE,
          // ...
      })
      .install();

Options

• webpack 相关参数配置参照 webpack-sentry-plugin。
• 客户端相关参数配置参照 raven-js

License

MIT