Vue.js: 错误处理与调试

// ProductList.vue
const products = ref([])
onMounted(async () => {
  const res = await fetch('/api/products')
  products.value = await res.json()  // ❌ 后端返回非 JSON → 报错
})

// main.js
const { createApp } = Vue
import App from './App.vue'

const app = createApp(App)

// ✅ 全局错误处理
app.config.errorHandler = (err, instance, info) => {
  console.error('Global error:', err)
  console.log('Component:', instance)
  console.log('Info:', info)  // 'render' / 'watch' / 'lifecycle hook'
  
  // 上报到 Sentry
  Sentry.captureException(err)
  
  // 用户通知
  showErrorNotification('Something went wrong')
}

// 1. 渲染错误（模板语法错）
app.config.errorHandler = (err, instance, info) => {
  if (info === 'render') console.error('Render error:', err)
}

// 2. 生命周期钩子错误
if (info === 'mounted') console.error('Mounted error:', err)

// 3. watch 回调错误
if (info === 'watcher callback') console.error('Watch error:', err)

// 4. 自定义指令错误
if (info === 'directive') console.error('Directive error:', err)

// 5. 事件处理错误
if (info === 'v-on handler') console.error('Event error:', err)

// main.js
app.config.errorHandler = (err, instance, info) => {
  console.error('[Global]', err, info)
  // 上报到 Sentry / 自己的日志服务
  // Sentry.captureException(err)
}

页面本身无变化；组件渲染或生命周期抛错时，控制台输出「[Global] 错误对象 render」等日志。
该 handler 会收到 err、组件实例和 info 字段，可在这里接入 Sentry 等日志服务上报。

1. 打开 DevTools（F12 / Cmd+Opt+I）
2. 切换到 Vue 标签
3. 点击组件树中的组件
4. 右侧显示：
   - State（响应式数据）
   - Props
   - Emits
   - Slots
   - Lifecycle

// 1. 实时修改 state（开发模式）
// DevTools 中直接编辑，看组件实时响应

// 2. 时间旅行（Pinia）
// 切换到 Pinia 面板 → Base → 可以回放每一步 state 变化

// 3. 性能标记
// import { markRaw } from 'vue'
// 大数据对象用 markRaw 标记，DevTools 不会深遍历

// 4. 组件 highlight
// DevTools → 右上角"眼睛"图标 → 鼠标悬停高亮组件

// 5. 路由跳转
// DevTools → Routing 标签 → 看每次跳转的 path + params

# Chrome 扩展
# https://chromewebstore.google.com/detail/vuejs-devtools/odjccnclnlddjlajjphfdmhnlhaglgki

# Firefox 扩展
# https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

# 或独立应用（推荐）
# https://devtools.vuejs.org/

const { onMounted, onUnmounted } = Vue

onMounted(() => {
  performance.mark('app-start')
  
  // 你的代码
  loadData()
  
  performance.mark('app-end')
  performance.measure('app-load', 'app-start', 'app-end')
  
  const measure = performance.getEntriesByName('app-load')[0]
  console.log(`App loaded in ${measure.duration}ms`)
})

// 1. v-once：只渲染一次
<h1 v-once>{{ title }}</h1>

// 2. v-memo：缓存子树
<div v-memo="[item.id, item.updatedAt]">
  <!-- 只在 id 或 updatedAt 变化时重渲染 -->
</div>

// 3. shallowRef：大数据不深响应
const bigList = shallowRef([...10000 items])

// 4. markRaw：第三方库不响应
const map = markRaw(new Map())

// 5. 懒加载：路由 / 组件
const Heavy = defineAsyncComponent(() => import('./Heavy.vue'))

// 1. v-once（只渲染一次）
<h1 v-once>{{ title }}</h1>

// 2. v-memo（缓存）
<div v-memo="[item.id]">...</div>

// 3. shallowRef（浅响应）
const list = shallowRef([...])

// 4. markRaw（不响应）
const map = markRaw(new Map())

// 5. 异步组件（懒加载）
const Heavy = defineAsyncComponent(() => import('./Heavy.vue'))

页面外观与未优化时一致，只是更新行为改变：v-once 内容不再随数据变化，v-memo 依赖不变时跳过更新。
shallowRef 只跟踪 .value 替换，markRaw 对象不会被转为响应式，异步组件首次渲染时按需加载。

npm install @sentry/vue @sentry/tracing

const { createApp } = Vue
import * as Sentry from '@sentry/vue'
import { Integrations } from '@sentry/tracing'
import App from './App.vue'

const app = createApp(App)

// 1. 初始化 Sentry（app 必须先创建）
Sentry.init({
  app,
  dsn: 'https://your-dsn@sentry.io/123',
  integrations: [
    new Integrations.BrowserTracing()
  ],
  tracesSampleRate: 1.0,
  // 生产环境降低采样
  // tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0
  
  // Vue 特定配置
  logErrors: true,
  release: '1.0.0',
  environment: process.env.NODE_ENV
})

// 2. 全局错误上报
app.config.errorHandler = (err, instance, info) => {
  Sentry.captureException(err, {
    extra: {
      component: instance?.$options.name,
      info
    }
  })
}

// vite.config.js
export default {
  build: {
    sourcemap: true  // 生产环境也生成 source map
  }
}

// Sentry 上传 source map
// @sentry/cli releases -o your-org -p your-project files upload-sourcemaps ./dist

初始显示「触发子组件错误」按钮，以及两段正常文字：「ErrorBoundary 之外的组件 - 正常工作」和「ErrorBoundary 内的子组件 - 正常」。
点击按钮后，第二个边界内出现红色「⚠️ Error caught: Cannot read properties of null (reading 'foo')」和「重试」按钮，第一个边界外的文字仍正常显示。
点「重试」清除错误并重新渲染子组件，按钮文字变回「触发子组件错误」。