异常监控：用 Sentry 给你的应用装个"黑匣子"

import { createApp } from 'vue'
import * as Sentry from '@sentry/vue'
import App from './App.vue'

const app = createApp(App)

Sentry.init({
  app,
  dsn: "你的DSN地址",
  environment: process.env.NODE_ENV,
  // 其他配置...
})

app.mount('#app')

Sentry.init({
  app,
  dsn: "你的DSN地址",

  // 环境信息
  environment: process.env.NODE_ENV,

  // 版本信息，用于追踪哪个版本出现了问题
  release: process.env.VUE_APP_VERSION,

  // 错误采样率，1.0 表示 100% 上报
  sampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,

  // 性能监控采样率
  tracesSampleRate: 0.1,

  // 会话回放采样率
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

  // 捕获行为栈的总量
  maxBreadcrumbs: 50,

  // 数据结构深度
  normalizeDepth: 5,

  // 发送 event 前的钩子函数
  beforeSend(event, hint) {
    // 在这里可以过滤掉一些不需要的错误
    if (event.exception) {
      const error = hint.originalException
      // 过滤掉网络错误
      if (error && error.message && error.message.includes('Network Error')) {
        return null
      }
    }

    // 添加用户信息
    event.user = {
      id: getUserId(),
      username: getUsername(),
      email: getUserEmail()
    }

    return event
  },

  // 集成配置
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
})

const { sentryWebpackPlugin } = require('@sentry/webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      sentryWebpackPlugin({
        org: "你的组织名",
        project: "你的项目名",
        authToken: process.env.SENTRY_AUTH_TOKEN,

        // 只在生产环境上传
        include: './dist',
        ignore: ['node_modules', 'webpack.config.js'],

        // 上传后删除本地 source map
        cleanArtifacts: true,

        // 设置 release 版本
        release: process.env.VUE_APP_VERSION,
      }),
    ],
  },

  // 生产环境生成 source map
  productionSourceMap: process.env.NODE_ENV === 'production',
}

// 监听资源加载错误
window.addEventListener('error', (event) => {
  if (event.target !== window) {
    // 资源加载错误
    Sentry.captureException(new Error(`Resource load error: ${event.target.src || event.target.href}`), {
      tags: {
        type: 'resource_error',
        element: event.target.tagName.toLowerCase()
      },
      extra: {
        src: event.target.src || event.target.href,
        outerHTML: event.target.outerHTML
      }
    })
  }
}, true)

// 监听 Promise 未捕获的错误
window.addEventListener('unhandledrejection', (event) => {
  Sentry.captureException(event.reason, {
    tags: {
      type: 'unhandled_promise_rejection'
    }
  })
})

const sampleRate = process.env.NODE_ENV === 'production' ? 0.1 : 1.0

beforeSend(event, hint) {
  // 过滤掉浏览器插件错误
  if (event.exception && event.exception.values) {
    const error = event.exception.values[0]
    if (error.stacktrace && error.stacktrace.frames) {
      const frames = error.stacktrace.frames
      if (frames.some(frame => frame.filename && frame.filename.includes('extension://'))) {
        return null
      }
    }
  }

  return event
}

// 设置用户信息
Sentry.setUser({
  id: user.id,
  username: user.username,
  email: user.email
})

// 设置标签
Sentry.setTag('page', 'checkout')
Sentry.setTag('feature', 'payment')

// 设置额外信息
Sentry.setExtra('orderInfo', orderData)

// 添加面包屑
Sentry.addBreadcrumb({
  message: 'User clicked pay button',
  category: 'ui',
  level: 'info'
})

// 上报简单错误
Sentry.captureMessage('Something went wrong', 'error')

// 上报异常
try {
  riskyFunction()
} catch (error) {
  Sentry.captureException(error)
}

// 上报带上下文的错误
Sentry.withScope((scope) => {
  scope.setTag('section', 'payment')
  scope.setLevel('warning')
  scope.setContext('payment', {
    amount: 100,
    currency: 'USD'
  })
  Sentry.captureMessage('Payment processing slow')
})

// 手动创建事务
const transaction = Sentry.startTransaction({
  name: 'API Call',
  op: 'http'
})

try {
  const response = await fetch('/api/data')
  const data = await response.json()
  transaction.setStatus('ok')
} catch (error) {
  transaction.setStatus('internal_error')
  Sentry.captureException(error)
} finally {
  transaction.finish()
}

// 配置告警规则
{
  "conditions": [
    {
      "name": "Error rate increase",
      "threshold": "10%",
      "timeWindow": "1h"
    }
  ],
  "actions": [
    {
      "type": "email",
      "targets": ["dev-team@company.com"]
    },
    {
      "type": "slack",
      "channel": "#alerts"
    }
  ]
}