vue项目接入sentry监控

参考sentry官方文档

sentry 中的一些概念：

1. scope：是一个存储event信息的集合，
2. release：描述部署到环境中的代码版本，在sentry初始化时指定release有利于定位问题版本

   上报前的钩子函数

   issue上报前会调用beforeSend，参数是event，一个event的结构如下：

   // error event object

   在beforeSend里面可以做一些过滤

sentry接入vue/vite项目细则

引入sentry sdk

// sentry.config.js
import * as Sentry from '@sentry/vue'
Sentry.init({
    app,
    dsn: 'https://xxx@sentryapp.mysite/x',
    release: 'v1.0.0',
    // 集成
    integrations: [
      Sentry.browserTracingIntegration({ router, enableInp: true }),
      Sentry.replayIntegration()
    ],
    ignoreErrors: [],
    environment: import.meta.env.MODE,
    maxBreadcrumbs: 50,
    beforeBreadcrumb(breadcrumb, hint) {
      return breadcrumb;
    },
    attachStacktrace: true,
    // 采样率
    tracesSampleRate: 1,
    normalizeDepth: 10,
    // 错误采样率
    sampleRate: 1,
    replaysSessionSampleRate: 0,
    replaysOnErrorSampleRate: 0
  });

注意：

• dsn可从项目-设置-SDK SETUP-DSN找到或生成
• release 值应当随每次版本发布动态变化，如git commit或版本号

上传sourcemap到自建平台

• 首先开启vite配置中的build.sourcemap

  // vite.config.js
  {
  	build: {
  		...
  		sourcemap: config.mode === 'production' ? 'hidden' : false,
  	}
  }

• 引入@sentry/vite-plugin插件

  // vite.config.js
  import { sentryVitePlugin } from '@sentry/vite-plugin'
  export default {
  	// other config...
  	plugins: [
  		// others plugin...
  		sentryVitePlugin({
  	        url: 'https://sentryapp.myself.site/',
  	        org: 'xxx', // 到自部署平台项目里找
  	        project: 'xxx', // 到自部署平台项目里找
  	        authToken: 'sntrys_eyxxxxx',
          sourcemaps: {
            assets: './dist/xxx/**.js',
            ignore: ['node_modules'],
            urlPrefix: '~/mp_v3/', // 与build.assetsDir一致
            filesToDeleteAfterUpload: [
              './dist/**/*.map'
            ]
          }
        })
      ]
  }

  注意：
• url填写 自建sentry平台地址
• org 填写Settings-GeneralSettings 中的organization Slug
• project 填写 指定项目下Project Settings中的Name
• authToken 在Settings-Developer Settings-Auth Tokens下生成和配置，这个最好不要直接写在项目中，可设置在部署的环境变量中
• urlPrefix 需要和build.assetsDir保持一致，否则可能导致sourcemap定位对不上
• 设置 filesToDeleteAfterUpload的值，表示上传完sourcemap后删除相关文件

前端常见异常类型及捕获方式

• ES Exception
• Dom Exception
• 资源加载报错
• Promise错误
• unhandle 错误

  sentry能够捕获的类型

• js运行时错误，比如TypeError，ReferenceError，sentry通过重写window.onerror方法
• 未处理的promise rejection，sentry通过重写unhandledRejectionf方法
• 在集成框架插件后可捕获框架抛出的错误，比如Vue ErrorHandler，React ErrorBoundary

sentry不能捕获异步代码中的错误，比如setTimeout
sentry不会捕获已被try catch块捕获的错误
sentry不会捕获外部资源加载失败错误

sentry可以监控什么

sentry 无法捕获异步操作，例如axios，$.ajax接口请求发生的错误，需要通过sentry.captureException手动上报。例如下面是对jquery.$ajax错误的捕获和上报:

$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
    const reportError = new Error(thrownError || 'Jquery ajax请求异常');
    reportError.name = 'AjaxError';
    // jquery在http类错误时不会返回错误堆栈,此时需手动构建
    const artificialStack = new Error().stack; // 当前捕获的堆栈路径
    reportError.status = jqxhr.status;
    reportError.stack = `${settings.type} ${settings.url}\n${artificialStack}`;

    Sentry.withScope(scope => {
	  // 修改局部scope 只在本次上报生效
      // 添加请求上下文
      scope.setContext('request', settings);
      scope.setTag('category', 'jquery.ajax');
      scope.setExtra('request', `${settings.type} ${settings.url}`);
      scope.setExtra('response', jqxhr.responseText);
      Sentry.captureException(reportError);
    })
  })

遇到的问题：

sentry需要上报哪些数据？
基于上面提的，sentry自身能够捕获到

如何快速定位错误来源？
使用sourcemap

遗留问题

对于微前端应用，在主应用接入sentry，无法捕获子应用内出现的错误