Error boundaries with onErrorCaptured in Vue - Step-by-Step Execution

Concept Flow - Error boundaries with onErrorCaptured

Child Component Throws Error

↓

onErrorCaptured Hook in Parent

↓

Return false

↓

Stop Propagation

↓

Parent Handles Error or Passes Up

When a child component throws an error, the parent's onErrorCaptured hook runs. Returning false stops error propagation; otherwise, it continues up.

Execution Sample

Vue

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const errorMsg = ref('');
    function onErrorCaptured(err) {
      errorMsg.value = err.message;
      return false;
    }
    return { errorMsg, onErrorCaptured };
  }
});

A parent component uses onErrorCaptured to catch errors from children and store the error message.

Execution Table

Step	Event	Error Thrown?	onErrorCaptured Called?	Return Value	Error Propagation	State Change
1	Child renders normally	No	No	N/A	N/A	errorMsg = ''
2	Child throws error 'Oops!'	Yes	Yes	false	Stopped	errorMsg = 'Oops!'
3	Parent renders error message	No	No	N/A	N/A	errorMsg = 'Oops!'
4	Another error thrown	Yes	Yes	false	Stopped	errorMsg = 'Another error!'
5	Error propagation stopped, no further handling	N/A	N/A	N/A	N/A	errorMsg holds last error

💡 Error propagation stops when onErrorCaptured returns false, preventing further error bubbling.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
errorMsg	''	'Oops!'	'Another error!'	'Another error!'

Key Moments - 2 Insights

Why does returning false in onErrorCaptured stop error propagation?

Returning false tells Vue the error is handled here, so it stops sending the error to parent components, as shown in step 2 of the execution_table.

What happens if onErrorCaptured returns true or nothing?

The error keeps propagating up to higher parents or global handlers, because only false stops propagation. This is implied by the flow in concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of errorMsg after step 2?

A 'Oops!'

B ''

C 'Another error!'

D undefined

💡 Hint

Check the 'State Change' column at step 2 in the execution_table.

At which step does onErrorCaptured stop error propagation?

A Step 3

B Step 1

C Step 2

D Step 5

💡 Hint

Look at the 'Error Propagation' column in the execution_table.

If onErrorCaptured returned true instead of false, what would change in the execution_table?

A errorMsg would not update

B Error propagation would continue to parents

C Error propagation would stop immediately

D Child would not throw error

💡 Hint

Refer to the 'Return Value' and 'Error Propagation' columns in the execution_table.

Concept Snapshot

Error boundaries in Vue use onErrorCaptured hook.
onErrorCaptured runs when a child error occurs.
Return false to stop error propagation.
Return true or nothing to continue bubbling.
Use to catch and handle errors gracefully.

Full Transcript

In Vue, error boundaries are created using the onErrorCaptured hook in a parent component. When a child component throws an error, Vue calls onErrorCaptured with the error. If the hook returns false, Vue stops sending the error to higher parents, effectively catching it. If it returns true or nothing, the error continues to propagate upwards. This lets you handle errors locally and prevent app crashes. The error message can be stored in a reactive variable to show feedback in the UI. This visual trace shows how errorMsg updates when errors occur and how returning false stops propagation.