Nuxt Error Handling

up:: Nuxt

Summary

Errors can happen in two places:

1. Client-side
2. Server-side

throw createError("Could not update");
 
throw createError(
	message: "Chapter not found",
	statusCode: 404,
);

Client-Side

Error Boundaries

Info

Error boundaries help to isolate errors. It is easier to locate where the error was thrown.

<NuxtErrorBoundary>
	<button @click="throwError"> Throw Error
</NuxtErrorBoundary>

This prevents errors to bubble up throughout the whole app. It catches it and renders the error slot.

<template #error="{ error }">
	<p>Oh no, something broke!</p>
	<code>{{ error }}</code>
<template />

Clearing the error

Getting rid of the error is a simple case of setting the error.value = null.

Server-Side

Is handled by error.vue.

<script setup>
const error = useError();
const handleError = () => {
	clearError({
		redirect: "/"
	})
}
</script>