CodeBuddy 赋能智慧航道：Vue3 项目集成 Sentry 实现全链路错误监控

npm install @sentry/vue @sentry/tracing

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';

const app = createApp(App);

Sentry.init({
  app,
  dsn: import.meta.env.VITE_SENTRY_DSN,  // 从环境变量读取
  environment: import.meta.env.MODE,      // 开发/生产环境标识
  integrations: [
    new Integrations.BrowserTracing(),     // 性能监控（可选）
  ],
});

app.mount('#app');

// src/utils/axios.js
import axios from 'axios';
import * as Sentry from '@sentry/vue';

const api = axios.create();

// 响应拦截器
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status >= 400) {
      Sentry.captureException(error, {
        tags: { type: 'axios' },
        extra: { url: error.config.url, status: error.response.status },
      });
    }
    return Promise.reject(error);
  }
);

export default api;

// main.js（在 Sentry.init 后添加）
app.config.errorHandler = (err, vm, info) => {
  Sentry.captureException(err, {
    tags: { type: 'vue' },
    extra: { component: vm?.$.type?.name, info }, // 上报组件名和错误位置
  });
};

// 登录成功后调用
function onLoginSuccess(userId, username) {
  Sentry.setUser({ id: userId, username });
}

// 登出时清除
function onLogout() {
  Sentry.setUser(null);
}

# .env.development
VITE_SENTRY_DSN=https://xxxx@o123456.ingest.sentry.io/1234567
VITE_SENTRY_ENV=development
VITE_MAP_REGION=dev-yangtze

# .env.production
VITE_SENTRY_DSN=https://xxxx@o123456.ingest.sentry.io/7654321
VITE_SENTRY_ENV=production
VITE_MAP_REGION=prod-yangtze

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

const app = createApp(App)

Sentry.init({
  app,
  dsn: import.meta.env.VITE_SENTRY_DSN,
  environment: import.meta.env.VITE_SENTRY_ENV,
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      // 自定义航道业务追踪
      tracePropagationTargets: [
        '/api/hydrology/*',
        '/api/ais-data/*',
        '/map-tiles/*'
      ]
    })
  ],
  // 自定义错误分组关键字段
  fingerprint: ['{{ default }}', '{{ url }}', '{{ user.id }}'],
  // 初始上下文（航道区段）
  beforeSend(event) {
    event.tags = {
      ...event.tags,
      mapRegion: import.meta.env.VITE_MAP_REGION
    }
    return event
  }
})

import axios from 'axios'
import * as Sentry from '@sentry/vue'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL
})

// 请求拦截器：添加航道业务标识
api.interceptors.request.use(config => {
  const vesselId = localStorage.getItem('currentVesselId')
  if (vesselId) {
    config.headers['X-Vessel-Id'] = vesselId
  }
  return config
})

// 响应拦截器：错误上报增强
api.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      const { status, data } = error.response
      // 自定义航道业务错误码处理
      if (status >= 400) {
        Sentry.captureException(error, {
          tags: {
            apiEndpoint: error.config.url?.split('?')[0],
            errorCode: data?.code || status
          },
          extra: {
            requestParams: error.config.params,
            responseData: data
          }
        })
      }
    }
    return Promise.reject(error)
  }
)

export default api

// 捕获未处理的组件错误
app.config.errorHandler = (err, instance, info) => {
  Sentry.captureException(err, {
    tags: {
      component: instance?.__name || 'AnonymousComponent',
      errorType: info,
      // 标记是否为电子航道图组件
      isMapComponent: instance?.$options?.name?.includes('Map')
    },
    contexts: {
      // 添加航道业务上下文
      vessel: {
        id: localStorage.getItem('currentVesselId'),
        name: localStorage.getItem('currentVesselName')
      },
      channelSection: localStorage.getItem('currentSectionId')
    }
  })
}

// 捕获未处理的Promise错误
window.addEventListener('unhandledrejection', event => {
  Sentry.captureException(event.reason, {
    tags: {
      errorType: 'unhandledRejection'
    }
  })
})

import * as Sentry from '@sentry/vue'

export function setVesselContext(vesselId, vesselName) {
  Sentry.setUser({
    id: vesselId,
    username: vesselName,
    // 扩展航道业务字段
    vesselType: localStorage.getItem('vesselType'),
    mmsi: vesselId // 船舶MMSI码作为唯一标识
  })
  
  // 添加航道区段标签
  Sentry.setTag('channelSection', localStorage.getItem('currentSectionId') || 'unknown')
}

// 在船舶登录成功后调用
export function initVesselSession() {
  const vesselId = localStorage.getItem('currentVesselId')
  if (vesselId) {
    setVesselContext(vesselId, localStorage.getItem('currentVesselName'))
  }
}