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.