Error boundaries with onErrorCaptured in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a child component throws an error inside onErrorCaptured?

Consider a Vue 3 component using onErrorCaptured to catch errors from its child components. What will be the rendered output if the child throws an error?

Vue

<script setup>
import { ref, onErrorCaptured } from 'vue'
const errorMessage = ref('')
onErrorCaptured((err) => {
  errorMessage.value = 'Error caught: ' + err.message
  return false
})
</script>
<template>
  <div>
    <ChildComponent />
    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

A The entire component crashes and nothing renders.

B The error is ignored and nothing is displayed.

C The error message is displayed below the child component.

D The error message is logged but not shown in the UI.

💡 Hint

Think about what onErrorCaptured does and how returning false affects error propagation.

Returning false in onErrorCaptured stops the error from propagating further. The error message is set in the reactive errorMessage and displayed in the template.

📝 Syntax

intermediate

Which option correctly uses onErrorCaptured to prevent error propagation?

Choose the correct syntax for onErrorCaptured that catches an error and stops it from propagating further.

A onErrorCaptured((error) => { console.log(error); return true })

B onErrorCaptured(error => { console.log(error) })

C onErrorCaptured(error => { console.log(error); throw error })

D onErrorCaptured((error) => { console.log(error); return false })

💡 Hint

Remember that returning false stops propagation.

Returning false inside onErrorCaptured prevents the error from propagating to parent components. Option D correctly returns false.

🔧 Debug

advanced

Why does the error not get caught by onErrorCaptured in this code?

Given this code snippet, why does the error thrown in ChildComponent not get caught by onErrorCaptured in the parent?

Vue

<script setup>
import { onErrorCaptured } from 'vue'
onErrorCaptured((err) => {
  console.log('Error caught:', err.message)
  return false
})
</script>
<template>
  <ChildComponent />
</template>

<script>
export default {
  components: {
    ChildComponent: {
      setup() {
        throw new Error('Oops!')
      },
      template: '<div>Child</div>'
    }
  }
}
</script>

A Because onErrorCaptured only catches errors in template rendering, not setup.

B Because the error is thrown during setup, before onErrorCaptured is registered.

C Because the parent component does not return false in onErrorCaptured.

D Because the error is caught but immediately rethrown.

💡 Hint

Consider the lifecycle order of setup and error capturing.

Errors thrown during the setup phase of a child component happen before the parent's onErrorCaptured hook is registered, so they are not caught.

❓ state_output

advanced

What is the value of errorCount after multiple errors caught by onErrorCaptured?

In this Vue component, errorCount increments each time an error is caught by onErrorCaptured. After three child components throw errors, what is the final value of errorCount?

Vue

<script setup>
import { ref, onErrorCaptured } from 'vue'
const errorCount = ref(0)
onErrorCaptured(() => {
  errorCount.value++
  return false
})
</script>
<template>
  <ChildOne />
  <ChildTwo />
  <ChildThree />
</template>

A 3

B 0

C 1

D Throws an error and does not update

💡 Hint

Each error triggers the onErrorCaptured hook once.

Each child throwing an error triggers onErrorCaptured once, incrementing errorCount by 1 each time. After three errors, errorCount is 3.

🧠 Conceptual

expert

Which statement about onErrorCaptured is true?

Choose the correct statement about Vue's onErrorCaptured hook.

A <code>onErrorCaptured</code> can prevent error propagation by returning false, but errors in asynchronous code inside child components are not caught.

B <code>onErrorCaptured</code> must be declared in the root component to catch any errors.

C <code>onErrorCaptured</code> only catches errors in parent components, not children.

D <code>onErrorCaptured</code> catches all errors including those in asynchronous code and stops propagation by default.

💡 Hint

Think about error capturing scope and async errors.

onErrorCaptured catches errors from child components synchronously and can stop propagation by returning false. However, errors thrown asynchronously inside child components are not caught by this hook.

Practice

1. What is the main purpose of the onErrorCaptured hook in Vue?

easy

A. To prevent any rendering of child components

B. To automatically reload the page when an error occurs

C. To log errors only in the browser console without affecting UI

D. To catch errors from child components and handle them gracefully

Solution

1. Step 1: Understand the role of error boundaries

   Error boundaries catch errors in child components to prevent the whole app from crashing.

2. Step 2: Identify what onErrorCaptured does

   This hook lets you catch those errors and handle them, for example by showing fallback UI.

3. Final Answer:

   To catch errors from child components and handle them gracefully -> Option D

4. Quick Check:

   Catches child errors gracefully [OK]

Hint: Remember: onErrorCaptured catches child errors for graceful handling [OK]

Common Mistakes:

• Thinking it reloads the page automatically
• Believing it blocks all child rendering
• Assuming it only logs errors without UI impact

2. Which of the following is the correct way to use onErrorCaptured in a Vue 3 Composition API setup function?

easy

A. onErrorCaptured.handleError(error => { /* handle error */ })

B. onErrorCaptured((error, instance, info) => { /* handle error */ })

C. setup() { onErrorCaptured: function(error) { /* handle error */ } }

D. onErrorCaptured = (error) => { /* handle error */ }

Solution

1. Step 1: Recall the correct syntax for hooks in Composition API

   Hooks like onErrorCaptured are called as functions with a callback.

2. Step 2: Match the syntax with options

   onErrorCaptured((error, instance, info) => { /* handle error */ }) correctly shows calling onErrorCaptured with a callback function receiving error details.

3. Final Answer:

   onErrorCaptured((error, instance, info) => { /* handle error */ }) -> Option B

4. Quick Check:

   Hook usage = function call with callback [OK]

Hint: Hooks are functions called with callbacks in setup() [OK]

Common Mistakes:

• Assigning onErrorCaptured instead of calling it
• Using object syntax inside setup incorrectly
• Calling non-existent methods on onErrorCaptured

3. Given this Vue component snippet, what will be the console output when ChildComponent throws an error?

setup() {
  onErrorCaptured((err) => {
    console.log('Error caught:', err.message)
    return false
  })
}

medium

A. Error caught: [error message]

B. No output, error is ignored

C. Error caught: [error message] and error propagates further

D. Runtime error: onErrorCaptured not defined

Solution

1. Step 1: Understand onErrorCaptured behavior with return false

   Returning false stops error propagation and prevents further bubbling.

2. Step 2: Analyze console.log call

   The callback logs the error message, so console shows 'Error caught:' plus the error message.

3. Final Answer:

   Error caught: [error message] -> Option A

4. Quick Check:

   Return false stops propagation, logs error [OK]

Hint: Return false in onErrorCaptured stops error bubbling [OK]

Common Mistakes:

• Assuming error propagates despite return false
• Expecting no console output
• Confusing syntax causing runtime errors

4. Identify the error in this Vue 3 setup function using onErrorCaptured:

setup() {
  onErrorCaptured = (error) => {
    console.error(error)
    return false
  }
}

medium

A. Incorrect assignment instead of calling onErrorCaptured as a function

B. Missing import of onErrorCaptured from Vue

C. Returning false is not allowed in onErrorCaptured

D. console.error cannot be used inside setup

Solution

1. Step 1: Check how onErrorCaptured is used

   It should be called as a function with a callback, not assigned to a function.

2. Step 2: Identify the incorrect syntax

   The code assigns a function to onErrorCaptured instead of calling it, causing an error.

3. Final Answer:

   Incorrect assignment instead of calling onErrorCaptured as a function -> Option A

4. Quick Check:

   Hooks are called, not assigned [OK]

Hint: Use onErrorCaptured(callback), not assignment [OK]

Common Mistakes:

• Assigning hook instead of calling it
• Forgetting to import onErrorCaptured
• Misunderstanding return false usage

5. You want to create an error boundary component in Vue 3 that catches errors from its children and shows a fallback message. Which approach correctly uses onErrorCaptured to stop error propagation and display fallback UI?

hard

A. Wrap children in try-catch inside template to catch errors

B. Use onErrorCaptured but do not return anything, so errors propagate

C. Use onErrorCaptured to set a reactive error state and return false to stop propagation

D. Use onErrorCaptured and always return true to propagate errors

Solution

1. Step 1: Understand error boundary behavior

   An error boundary catches errors and shows fallback UI by tracking error state.

2. Step 2: Use onErrorCaptured to update error state and stop propagation

   Returning false in onErrorCaptured stops error bubbling, allowing fallback UI to show.

3. Final Answer:

   Use onErrorCaptured to set a reactive error state and return false to stop propagation -> Option C

4. Quick Check:

   Set error state + return false = error boundary [OK]

Hint: Return false in onErrorCaptured to stop error bubbling [OK]

Common Mistakes:

• Not returning false, so errors keep propagating
• Trying to catch errors in template with try-catch
• Returning true which continues error propagation