@xmqd/webpack-sentry-plugin NPM

@xmqd/webpack-sentry-plugin

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

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();