Vue.js: Error Handling

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

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

const app = createApp(App)

// ✅ Global error handling
app.config.errorHandler = (err, instance, info) => {
  console.error('Global error:', err)
  console.log('Component:', instance)
  console.log('Info:', info)  // 'render' / 'watch' / 'lifecycle hook'
  
  // Report to Sentry
  Sentry.captureException(err)
  
  // Notify the user
  showErrorNotification('Something went wrong')
}

// 1. Render errors (template syntax mistakes)
app.config.errorHandler = (err, instance, info) => {
  if (info === 'render') console.error('Render error:', err)
}

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

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

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

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

// main.js
app.config.errorHandler = (err, instance, info) => {
  console.error('[Global]', err, info)
  // Report to Sentry / your own logging service
  // Sentry.captureException(err)
}

No UI change.
Every uncaught error inside Vue (render, lifecycle, watcher, directive, or v-on handler) is printed once to the browser console prefixed with [Global], together with the error object and the info string.

Console:
[Global] TypeError: Cannot read properties of null (reading 'foo')  render

1. Open DevTools (F12 / Cmd+Opt+I)
2. Switch to the Vue tab
3. Click a component in the tree
4. The right panel shows:
   - State (reactive data)
   - Props
   - Emits
   - Slots
   - Lifecycle

// 1. Edit state live (dev mode)
// Edit directly in DevTools and watch the component react immediately

// 2. Time travel (Pinia)
// Switch to the Pinia panel → Base → replay each state change step by step

// 3. Performance marking
// import { markRaw } from 'vue'
// Mark large data objects with markRaw so DevTools does not traverse them deeply

// 4. Component highlight
// DevTools → the "eye" icon in the top right → hover to highlight components

// 5. Route navigation
// DevTools → Routing tab → inspect the path + params of every navigation

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

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

# Or the standalone app (recommended)
# https://devtools.vuejs.org/

const { onMounted, onUnmounted } = 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>{{ title }}</h1>

// 2. v-memo: cache a subtree
<div v-memo="[item.id, item.updatedAt]">
  <!-- Re-renders only when id or updatedAt changes -->
</div>

// 3. shallowRef: no deep reactivity for large data
const bigList = shallowRef([...10000 items])

// 4. markRaw: keep third-party libraries out of reactivity
const map = markRaw(new Map())

// 5. Lazy loading: routes / components
const Heavy = defineAsyncComponent(() => import('./Heavy.vue'))

// 1. v-once (render only once)
<h1 v-once>{{ title }}</h1>

// 2. v-memo (cache)
<div v-memo="[item.id]">...</div>

// 3. shallowRef (shallow reactivity)
const list = shallowRef([...])

// 4. markRaw (no reactivity)
const map = markRaw(new Map())

// 5. Async component (lazy loading)
const Heavy = defineAsyncComponent(() => import('./Heavy.vue'))

These are snippets rather than a runnable page.
Once applied: the v-once heading renders a single time and never updates again;
the v-memo block re-renders only when item.id changes;
shallowRef stops Vue from deeply tracking the 10,000-item array, so mutations inside it are far cheaper;
markRaw keeps a Map instance outside the reactivity system;
and the async component emits a separate chunk that is fetched only when first rendered.

Effect on rendering:
v-once        → 1 render total, later updates skipped
v-memo        → re-render only when item.id changes
shallowRef    → deep values are not tracked (assign .value to trigger)
markRaw       → object never becomes reactive
async import  → separate chunk loaded on demand

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. Initialize Sentry (the app instance must exist first)
Sentry.init({
  app,
  dsn: 'https://your-dsn@sentry.io/123',
  integrations: [
    new Integrations.BrowserTracing()
  ],
  tracesSampleRate: 1.0,
  // Lower the sample rate in production
  // tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0
  
  // Vue-specific options
  logErrors: true,
  release: '1.0.0',
  environment: process.env.NODE_ENV
})

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

// vite.config.js
export default {
  build: {
    sourcemap: true  // Generate source maps in production too
  }
}

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

The page renders a toggle button and two independent ErrorBoundary regions.
Initially both show their normal content. Clicking the button mounts the buggy child;
its render error is caught by the enclosing boundary, which replaces only that region with a red "⚠️ Error caught: ..." box and a retry button, while the other boundary keeps rendering normally.
Clicking the button again restores the content.

┌───────────────────────────────────────────────┐
│ [Trigger child error]                         │
│                                               │
│ Outside ErrorBoundary - works normally        │
│                                               │
│ ┌───────────────────────────────────────────┐ │
│ │ ⚠️ Error caught: Cannot read properties   │ │
│ │    of null (reading 'foo')     [Retry]    │ │
│ └───────────────────────────────────────────┘ │
└───────────────────────────────────────────────┘

The rest of the page keeps working; only the faulty
boundary shows the error UI.