Sentry接入及上报

Installation

# Using yarn
$ yarn add @sentry/browser

# Using npm
$ npm install @sentry/browser

React项目不需要安装以下包

# Using yarn
yarn add @sentry/integrations

# Using npm
npm install @sentry/integrations

创建

Sentry网站创建对应项目

Vue项目接入Sentry

以下代码添加到 main.js 里面

import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

// dsn是创建项目自动生成的
Sentry.init({
  dsn: 'https://************@sentry.io/********',
  release: 'test@0.0.1',
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
});

React项目接入Sentry

import React from 'react';
import ReactDOM from 'react-dom';
import * as Sentry from '@sentry/browser';
import App from 'src/App';

Sentry.init({dsn: "https://*******@sentry.io/****"});

ReactDOM.render(<App />, document.getElementById('root'));

使用webpack-sentry-plugin插件上传及删除sourceMap

使用 webpack-sentry-plugin这个插件可以做到上传并删除SourceMap文件。

Installation

npm install webpack-sentry-plugin --save-dev

yarn add webpack-sentry-plugin --dev

Usage

1. Require webpack-sentry-plugin:

   var SentryPlugin = require('webpack-sentry-plugin');

2. Add to webpack config:

   var config = {
    plugins: [
      new SentryPlugin({
        // Sentry options are required
        organization: 'your-organization-name',
        project: 'your-project-name',
        apiKey: 'your-api-keys',
   
        // Release version name/hash is required
        release: 'your-release-version'
      })
    ]
   }

Vue项目插件用法

创建vue.config.js

var SentryPlugin = require('webpack-sentry-plugin');
// vue.config.js
module.exports = {
    // 选项...
    configureWebpack: config => {
        // 可自己根据打包命令设置 
        config.plugins.push(
            new SentryPlugin({
              	// 注意此处为全小写
                organization: 'futuredawn',
              	// 对应的项目名字
                project: 'vue01',
              	// Sentry 设置里面生成的 Api keys 
                apiKey: 'b2d7c7c66b2c4e0d9086f0abe6e535722b9b1b5e417c45eabeaae119b13216e8',

                // Release version name/hash is required
                release: 'test@0.0.1',
                // 设置dist目录上传文件
                include: /\.js.map$/,
                // 上传完毕之后删除source map文件
                deleteAfterCompile: true
            })
        )
    }   
}

可以根据运行环境判断是否使用SentryPlugin

var SentryPlugin = require('webpack-sentry-plugin');
// vue.config.js
module.exports = {
    // 选项...
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.plugins.push(
                new SentryPlugin({
                    organization: process.env.VUE_APP_ORGANIZATION,
                    project: process.env.VUE_APP_PROJECT,
                    apiKey: process.env.VUE_APP_APIKEY,
    
                    // Release version name/hash is required
                    release: process.env.VUE_APP_RELEASE,
                    // 设置dist目录上传文件
                    include: /\.js.map$/,
                    // 上传完毕之后删除source map文件
                    deleteAfterCompile: true
                })
            )
        } else {
            // 为开发环境修改配置...
        }
        
    }   
}

.env.production

VUE_APP_ORGANIZATION = *******
VUE_APP_PROJECT = vue01
VUE_APP_APIKEY = ******************
VUE_APP_RELEASE = vue01@0.0.4

React项目插件用法

创建项目之后 yarn eject 把配置暴露出来

打开config/webpack.config.js

添加 *const* *SentryPlugin* = require('webpack-sentry-plugin');

在文件510行(HtmlWebpackPlugin上面)添加plugin

new SentryPlugin({
  // 注意此处为全小写
  organization: '*****',
  // 对应的项目名字
  project: 'react01',
  // Sentry 设置里面生成的 Api keys 
  apiKey: '******',

  // Release version name/hash is required
  release: 'react@0.0.1',
  // 设置dist目录上传文件
  include: /\.map$/,
  // 上传完毕之后删除source map文件
  deleteAfterCompile: true,
  // 支持复写同文件
  suppressConflictError: true
}),

参考资料

掘金参考文档

webpack-sentry-plugin