Nuxt•5mo ago

Custom Error Page

Hi, I have created a custom error page and place .vue file in the root directory. Now, whenever there is a page that doesn''t exist; it automatically redirects to error.vue but in the Network tab I still see the status to be 200. it should be 404. help with that please, thanks '

29 Replies

ALIOP•5mo ago

update: I have tried setResponseStatus() and useRequestEvent in my error.vue but still its not working..

Thr0nSK•5mo ago

could you provide a reproduction? In a new Nuxt project, it sets the correct 404 response code for me

ALIOP•5mo ago

yeah, hold on @Thr0nSK when I console.log process.server, it prints false

Thr0nSK•5mo ago

I'm not sure what you're talking about Can you give me a small reproduction on stackblitz, for example?

ALIOP•5mo ago

~/error.vue

<template>
  <div>
    <h1>Page Not Found!</h1>
  </div>
</template>

<script setup>
  definePageMeta({
  middleware: [
    () => {
      if (process.server) {
        console.log('server process');
        const event = useRequestEvent();
        setResponseStatus(event, 404);
      }
    },
  ],
});
</script>

<template>
  <div>
    <h1>Page Not Found!</h1>
  </div>
</template>

<script setup>
  definePageMeta({
  middleware: [
    () => {
      if (process.server) {
        console.log('server process');
        const event = useRequestEvent();
        setResponseStatus(event, 404);
      }
    },
  ],
});
</script>

Thr0nSK•5mo ago

You do not need to set the response status there 404 should be automatically set for you

ALIOP•5mo ago

but I get 200 what could I be missing...

Thr0nSK•5mo ago

yeah, so can you give me a reproduction with the project, where you're getting the 200 status code? 😅

ALIOP•5mo ago

LOL.. that'd be a big big reply

Thr0nSK•5mo ago

https://nuxt.new/

Nuxt.new

Start a new Nuxt project

Thr0nSK•5mo ago

create a small reproduction here

ALIOP•5mo ago

okay let me try

Thr0nSK•5mo ago

stackblitz preferably

ALIOP•5mo ago

https://stackblitz.com/edit/github-jagvr2?file=error.vue,app.vue,pages%2Fproducts.vue okay, I am getting 404 here something wrong with my project then...

manniL•5mo ago

if you use a catch-all you have to deal with 404s "on your own" 🙂

ALIOP•5mo ago

does that mean, I can't use the useRequestEvent compoable and etResponseStatus() plugin?

manniL•5mo ago

you should still be able to

ALIOP•5mo ago

Thank you for the help, I got it. See below:

import { defineNuxtRouteMiddleware } from 'nuxt/app';

export default defineNuxtRouteMiddleware((to) => {
  const pages = ['/', '/login', '/register', '/cart', '/about', '/checkout', '/contact-us'];
  const isKnownPage = pages.includes(to.path);

  if (!isKnownPage) {
    const event = useRequestEvent();
    return setResponseStatus(event, 404, 'Page Not Found');
  }
});

import { defineNuxtRouteMiddleware } from 'nuxt/app';

export default defineNuxtRouteMiddleware((to) => {
  const pages = ['/', '/login', '/register', '/cart', '/about', '/checkout', '/contact-us'];
  const isKnownPage = pages.includes(to.path);

  if (!isKnownPage) {
    const event = useRequestEvent();
    return setResponseStatus(event, 404, 'Page Not Found');
  }
});

Thank you @Thr0nSK and @manniL / TheAlexLichter but this also has problems... lets say I directly enter the address of a certain page.. for example a direct link to a product. this code is going to add 404 status code to that as well..

manniL•5mo ago

do you have a [...].vue component somewhere?

ALIOP•5mo ago

yes, I do.. we have three apps using same code base. and there is a [...slug].vue page in the pages directory which is basically being used to render components based on the app coming from the configurations..

Thr0nSK•5mo ago

could you try using

throw createError({
    status: 404,
})

throw createError({
    status: 404,
})

in cases where you want to render an error page?

manniL•5mo ago

+ fatal: true very important

ALIOP•5mo ago

it works but for some reason my ui doesn't load does the error page in the root load when some other errors appear as well? for example there is a function that I am calling but it doesn't exist or some composable that has been called outside the nuxt context?

Thr0nSK•5mo ago

If I'm not mistaken, it will show a fullscreen error page for those errors as well if rendered on the server. On the client side, it will behave as if you had throw createError({ fatal: false })

ALIOP•5mo ago

hi again, I have used throw createError but whenever I use it, my layout doesn't load, does any of you have idea about what's going on here? okay, using useRequestEvent() and setResponseStatus(event, 404); resolved the issue. but I would still love to know why it didn't work with createError

manniL•5mo ago

well, throwing createError renders the error.vue file, which comes without anything (think of it like "an extra app.vue just for errors")

ALIOP•5mo ago

right, I read somewhere in the documentation ( i think it was for createError) that by default ~/error.vue is rendered with error layout. I tried to create a custom error layout by actually creating one and naming it error.vue but I don't think it worked.. I need to test that again though. Also, if there is some parsing error like so: <div> {{ hello world! }} </div> how does nuxt throw error for that? because first when I navigate to the page which contains this code, it will show me that I have a parsing error in a modal kind of window. because of 'hello world!' . Now, if I refresh the page; I am taken to the ~/error.vue but I see no layout at all (normally I see default which was setup by my team lead). and I have used useError there which will get the 'statusCode', 'message' and ' statusMessage' etc. they are displayed but no layout. but, instead of refreshing the page, if I just press escape and remove that error modal that showed parsing error. try to go to that page again (the one that has parsing error) I am taken to the ~/error.vue page but this time it prints default error message which is kind of fallback and doesn't show any statusCode etc. Same thing when I try to render a nuxt context related composable outside the context. I would really be thankful if you could share your opnion on it. thanks

manniL•5mo ago

right, I read somewhere in the documentation ( i think it was for createError) that by default ~/error.vue is rendered with error layout

No, that's not the case. Where did you read that? error.vue is independent of the app to avoid errors in the error component and having a catch-22 😄

ALIOP•5mo ago

okay, my bad. it isn't in the docs. perhaps chatGPT told me that (free version LOL). any word about parsing errors?

Gaming

Programming

Custom Error Page