Error boundaries with onErrorCaptured in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an error boundary using onErrorCaptured in Vue.

Vue

<script setup>
import { [1], onErrorCaptured } from 'vue'

const error = ref(null)
onErrorCaptured((err) => {
  error.value = err.message
  return false
})
</script>

Drag options to blanks, or click blank then click option'

AonErrorCaptured

Bwatch

Cref

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using onErrorCaptured instead of ref to create reactive state.

Using reactive when only a single value is needed.

We use ref to create a reactive variable error that stores the error message.

2fill in blank

medium

Complete the template to show the error message if an error is captured.

Vue

<template>
  <div v-if="[1]">
    <p>Error: {{ error }}</p>
  </div>
  <slot v-else />
</template>

Drag options to blanks, or click blank then click option'

Aerror

Berror.value

Cerror.message

DerrorCaptured

Attempts:

3 left

💡 Hint

Common Mistakes

Using error.value inside the template, which is not needed.

Trying to access error.message which is not defined.

In the template, refs are accessed directly without .value.

3fill in blank

hard

Fix the error in the onErrorCaptured callback to properly stop error propagation.

Vue

<script setup>
import { ref, onErrorCaptured } from 'vue'

const error = ref(null)
onErrorCaptured((err) => {
  error.value = err.message
  return [1]
})
</script>

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Returning true which allows the error to propagate.

Not returning anything, which also allows propagation.

Returning false stops the error from propagating further in Vue's error handling.

4fill in blank

hard

Fill both blanks to create a reactive error state and reset it on a button click.

Vue

<script setup>
import { [1], onErrorCaptured } from 'vue'

const error = [2](null)

function resetError() {
  error.value = null
}

onErrorCaptured((err) => {
  error.value = err.message
  return false
})
</script>

Drag options to blanks, or click blank then click option'

Aref

Breactive

Cwatch

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a single value.

Forgetting to import the reactive function.

Use ref to create a reactive variable and import it from Vue.

5fill in blank

hard

Fill all three blanks to create an error boundary component that captures errors, shows a message, and allows reset.

Vue

<template>
  <div v-if="[1]">
    <p>Error: {{ error }}</p>
    <button @click="[2]">Reset</button>
  </div>
  <slot v-else />
</template>

<script setup>
import { ref, onErrorCaptured } from 'vue'

const error = ref(null)

function [3]() {
  error.value = null
}

onErrorCaptured((err) => {
  error.value = err.message
  return false
})
</script>

Drag options to blanks, or click blank then click option'

Aerror

BresetError

DclearError

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the reset function in template and script.

Checking a wrong variable in the template condition.

The template checks error, the button calls resetError, and the function resetError clears the error.