NuxtN
Nuxt•3y ago•
4 replies
learntheropes

Custom error page from api response.

I'm trying to use createError together with useFetch as documented here.

I'm using the createError function both on the server and the client, but I'm not redirected to the custom error.vue page.

This is my project: https://stackblitz.com/edit/nuxt-starter-kwh5us?file=app.vue,error.vue

My code:

- app.vue
<script setup>
const { data, error } = await useFetch('/api/foo', {
  onResponseError({ request, response, options }) {
    throw createError({
      statusCode: response._data.statusCode,
      statusMessage: response._data.statusMessage,
    });
  },
});
</script>

<template>
  <div>
    <div>This is the home page</div>
    <pre>{{ data }}</pre>
  </div>
</template>

- server/api/foo.get.js
export default defineEventHandler((event) => {
  throw createError({
    statusCode: 400,
    statusMessage: 'Random Error Message',
  });
});


- error.vue
<script setup>
const props = defineProps({
  error: Object,
  required: true,
});

const handleError = () => clearError({ redirect: '/' });
</script>

<template>
  <div>This is the error page</div>
  <div>Error Code: {{ error.statusCode }}</div>
  <div>Error Message: {{ error.statusMessege }}</div>
  <div><button @click="handleError">Go to the home page</button></div>
</template>

Is there something wrong in my code or it is a bug?
StackBlitz
handle error from api - StackBlitz
A Nuxt.js project based on nuxt
handle error from api - StackBlitz
Nuxt
Error handling · Get Started with Nuxt
Learn how to catch errors in different lifecycle.
Error handling · Get Started with Nuxt
Was this page helpful?