Vue.js: 错误处理与调试

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

<!-- 父组件：错误边界 -->
<template>
  <ErrorBoundary>
    <ProductList />
  </ErrorBoundary>
</template>

<!-- ErrorBoundary.vue -->
<script setup>
const { onErrorCaptured, ref } = Vue
const error = ref(null)

onErrorCaptured((err, instance, info) => {
  console.error('Caught:', err)
  // 1. 显示错误信息
  error.value = err.message
  // 2. 上报到 Sentry
  Sentry.captureException(err)
  // 3. 阻止向上传播
  return false
})

const retry = () => { error.value = null }
</script>

<template>
  <div v-if="error" class="error">
    <h3>⚠️ Something went wrong</h3>
    <p>{{ error }}</p>
    <button @click="retry">Retry</button>
  </div>
  <slot v-else />
</template>

// 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')
}

<!-- ErrorBoundary.vue -->
<script setup>
const { onErrorCaptured, ref } = Vue

const error = ref(null)

// ✅ 捕获子组件错误
onErrorCaptured((err, instance, info) => {
  console.error('Boundary caught:', err)
  error.value = {
    message: err.message,
    stack: err.stack,
    info
  }
  
  // 阻止向上传播
  return false
})

const reset = () => { error.value = null }
</script>

<template>
  <div v-if="error" class="error-boundary">
    <h3>⚠️ {{ error.message }}</h3>
    <details>
      <summary>Stack trace</summary>
      <pre>{{ error.stack }}</pre>
    </details>
    <button @click="reset">Retry</button>
  </div>
  <slot v-else />
</template>

// 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)

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'))

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

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
.btn { padding: 6px 12px; margin: 4px; background: #42b883; color: white; border: none; border-radius: 4px; cursor: pointer; }
.error { padding: 1rem; background: #fee; border: 1px solid #fcc; color: #c00; border-radius: 4px; margin: 4px 0; }
.buggy { padding: 1rem; background: #f0f9ff; border-radius: 4px; }
</style>

<div id="app">
  <button class="btn" @click="triggerError = !triggerError">
    {{ triggerError ? '恢复' : '触发子组件错误' }}
  </button>

  <error-boundary>
    <p>ErrorBoundary 之外的组件 - 正常工作</p>
  </error-boundary>

  <error-boundary>
    <buggy-component v-if="triggerError"></buggy-component>
    <p v-else class="buggy">ErrorBoundary 内的子组件 - 正常</p>
  </error-boundary>
</div>

<script>
const { createApp, ref, onErrorCaptured } = Vue

// ✅ ErrorBoundary 组件
const ErrorBoundary = {
  setup(_, { slots }) {
    const error = ref(null)
    onErrorCaptured((err) => {
      error.value = err
      return false   // 阻止向上传播
    })

    function reset() { error.value = null }

    return { error, reset }
  },
  template: `
    <div>
      <div v-if="error" class="error">
        ⚠️ Error caught: {{ error.message }}
        <button @click="reset">重试</button>
      </div>
      <slot v-else></slot>
    </div>
  `
}

// 故意出错的子组件
const BuggyComponent = {
  setup() {
    // 模拟错误：访问 undefined.value
    const data = ref(null)
    return { data }
  },
  template: '<div>{{ data.value.foo }}（会报错）</div>'
}

const App = {
  components: { ErrorBoundary, BuggyComponent },
  setup() {
    const triggerError = ref(false)
    return { triggerError }
  }
}

createApp(App).mount('#app')
</script>

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

// 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'))