Vue.js: Tratamento de Erros

// ProductList.vue
const products = ref([])
onMounted(async () => {
  const res = await fetch('/api/products')
  products.value = await res.json()  // ❌ The backend returns non-JSON → throws error
})

<!-- Parent Component：Error Boundary -->
<template>
  <ErrorBoundary>
    <ProductList />
  </ErrorBoundary>
</template>

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

onErrorCaptured((err, instance, info) => {
  console.error('Caught:', err)
  // 1. Display error message
  error.value = err.message
  // 2. Report to Sentry
  Sentry.captureException(err)
  // 3. Prevent upward transmission
  return false
})
</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
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// ✅ Global Error Handling
app.config.errorHandler = (err, インスタンス, info) => {
  console.エラー('Global エラー:', err)
  console.log('Component:', インスタンス)
  console.log('Info:', info)  // 'render' / 'watch' / 'lifecycle hook'
  
  // Report to Sentry
  Sentry.captureException(err)
  
  // User Notification
  showErrorNotification('Something went wrong')
}

<!-- ErrorBoundary.vue -->
<script setup>
import { onErrorCaptured, ref } from 'vue'

const error = ref(null)

// ✅ Catching Child Component Errors
onErrorCaptured((err, instance, info) => {
  console.error('Boundary caught:', err)
  error.value = {
    message: err.message,
    stack: err.stack,
    info
  }
  
  // Prevent upward transmission
  return false
})
</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. Rendering Error（Template syntax error）
app.config.errorHandler = (err, instance, info) => {
  if (info === 'render') console.error('Render error:', err)
}

// 2. Lifecycle Hook Error
if (info === 'mounted') console.error('Mounted error:', err)

// 3. watch Callback Error
if (info === 'watcher callback') console.error('Watch error:', err)

// 4. Custom Command Error
if (info === 'directive') console.error('Directive error:', err)

// 5. Error Handling
if (info === 'v-on handler') console.error('Event error:', err)

1. Open DevTools（F12 / Cmd+Opt+I）
2. Switch to Vue Tags
3. Click a component in the component tree
4. Display on the right：
   - State（Responsive Data）
   - Props
   - Emits
   - Slots
   - Lifecycle

// 1. Real-time editing state（Development Mode）
// DevTools Edit directly in the document，Watch the component respond in real time

// 2. Time Travel（Pinia）
// Switch to Pinia Panel → Base → You can replay each step state Changes

// 3. Performance Labels
// import { markRaw } from 'vue'
// Big Data Objects Used For markRaw Mark，DevTools Does not perform a deep traversal

// 4. Components highlight
// DevTools → top right corner"Eyes"Icon → Highlight Components on Mouse Hover

// 5. Route Redirection
// DevTools → Routing Tags → Look at each redirect path + params

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

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

# or a standalone app（Recommendations）
# https://devtools.vuejs.org/

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  performance.mark('app-start')
  
  // Your code
  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：Render only once
<h1 v-once>{{ タイトル }}</h1>

// 2. v-memo：Cache Subtree
<div v-memo="[item.id, item.updatedAt]">
  <!-- Only re-render on id or updatedAt changes -->
</div>

// 3. shallowRef：Big Data Does Not Respond Deeply
const bigList = shallowRef([...10000 アイテム])

// 4. markRaw：Third-party ライブラリ is not responding
const map = markRaw(new Map())

// 5. Lazy Loading：Routing / Components
const Heavy = defineAsyncComponent(() => import('./Heavy.vue'))

npm install @sentry/vue @sentry/tracing

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

// 1. Initialization Sentry
Sentry.init({
  app,
  dsn: 'https://your-dsn@sentry.io/123',
  integrations: [
    new Integrations.BrowserTracing()
  ],
  tracesSampleRate: 1.0,
  // Reduce Sampling in the Production Environment
  // tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0
  
  // Vue Specific Placement
  logErrors: true,
  release: '1.0.0',
  environment: process.env.NODE_ENV
})

const app = createApp(App)

// 2. Global Error Reporting
app.config.errorHandler = (err, instance, info) => {
  Sentry.captureException(err, {
    extra: {
      component: instance?.$options.name,
      info
    }
  })
}

// vite.config.js
export default {
  ビルド: {
    sourcemap: true  // Generated in the production environment as well source map
  }
}

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

// main.js：Global
app.config.errorHandler = (err, instance, info) => {
  console.error('Global:', err, info)
  Sentry.captureException(err)
}

<!-- ErrorBoundary.vue：Components -->
<script setup>
import { onErrorCaptured, ref } from 'vue'
const error = ref(null)
onErrorCaptured((err, instance, info) => {
  error.value = err.message
  return false
})
</script>

// Asynchronous：Manual try/catch
try {
  await fetch('/api/data')
} catch (err) {
  console.error('Async:', err)
  Sentry.captureException(err)
}

// 1. Rendering Error
if (info === 'render') console.error('Render')

// 2. Life Cycle Errors
if (info === 'mounted') console.error('Mounted')

// 3. watch Error
if (info === 'watcher callback') console.error('Watch')

// 4. Command error
if (info === 'directive') console.error('Directive')

// 5. Event Error
if (info === 'v-on handler') console.error('Event')

// 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. Lazy Loading
const Heavy = defineAsyncComponent(() => import('./Heavy.vue'))