前端项目接入sentry配置简要说明

说明

sentry 可以用来监听项目异常，快速定位线上问题。可多语言接入，有丰富的sdk及构建工具插件。

目的

• 1. 监听js运行异常，业务代码异常
• 2. 监听js运行异常，包括vue，react 框架层面异常
• 3. 监听js运行异常，未补货的其他异常
• 4. 还原异常上下文，包括用户信息
• 5. 快速定位到异常源码（source map）
• 6. 环境区分（测试环境【161，163】等，线上环境）
• 7. Release版本区分，定位到异常是由哪次提交引起的

实施

1. 引入@sentry/browser sdk

npm install @sentry/browser --save

2. 获取git 代码版本, 导入该变量

const gitSha = require('child_process')
  .execSync('git log --pretty=format:"%h" -1')
  .toString()
  .trim();

导入

vue cli3

在vue.config.js中设置

process.env.VUE_APP_GIT_SHA = gitSha;

react umi

在config.ts中设置

  define: {
    'process.env.CUR_RELEASE': gitSha,
  },

3. 在项目入口进行初始化

vue

安装@sentry/integrations

npm install @sentry/integrations --save

if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: '',
    integrations: [new Integrations.Vue({ Vue, attachProps: true })],
    environment: process.env.VUE_APP_SERVERKEY,
    release: process.env.VUE_APP_GIT_SHA,
  });
  Sentry.configureScope(scope => {
    const localInfo = localStorage.getItem('user-info');
    if (localInfo) {
      const userInfo = JSON.parse(localInfo);
      scope.setUser({ username: userInfo.mobile });
      scope.setExtras(userInfo);
    }
  });
}

react

Sentry.init({
    dsn: curServer.monitor,
    environment: process.env.CUR_SERVER,
    release: process.env.CUR_RELEASE,
  });
Sentry.configureScope(scope => {
    scope.setUser({
      username: name,
    });
  });

4. 上传source map

1. 在sentry web服务上 新建项目

   image.png

2. 安装插件webpack-sentry-plugin

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

2. 配置webpack,使用 webpack-chain 方式配置

    const SentryPlugin = require('webpack-sentry-plugin');
       config.plugin('sentry').use(SentryPlugin,[{
           organization: 'sentry',
           project: 'acz-admin',
           apiKey:
             '',
           baseSentryURL: '',
           exclude: /^pdfjs\//,
           release: gitSha,
           deleteAfterCompile: true,
           suppressConflictError: true,
         }]).end()
   

3. 打卡source-map

   设置devtool为 source-map

4. 打包项目

查看效果

image.png image.png