Error Page

The error page, which is defined by /pages/_error/+Page.js, is rendered when an error occurs. It's also rendered when you call throw render(abortStatusCode).

// /pages/_error/+Page.ts
 
export { Page }
 
import { usePageContext } from 'vike-react/usePageContext'
/* Or:
import { usePageContext } from 'vike-vue/usePageContext'
import { usePageContext } from 'vike-solid/usePageContext'
*/
 
function Page() {
  const pageContext = usePageContext()
 
  let msg: string // Message shown to the user
  const { abortReason, abortStatusCode } = pageContext
  if (abortReason?.notAdmin) {
    // Handle `throw render(403, { notAdmin: true })`
    msg = "You cannot access this page because you aren't an administrator."
  } else if (typeof abortReason === 'string') {
    // Handle `throw render(abortStatusCode, `You cannot access ${someCustomMessage}`)`
    msg = abortReason
  } else if (abortStatusCode === 403) {
    // Handle `throw render(403)`
    msg = "You cannot access this page because you don't have enough privileges."
  } else if (abortStatusCode === 401) {
    // Handle `throw render(401)`
    msg = "You cannot access this page because you aren't logged in. Please log in."
  } else {
    // Fallback error message
    msg = pageContext.is404 ?
      "This page doesn't exist." :
      "Something went wrong. Try again (later)."
  }
 
  return <p>{msg}</p>
}
 
// When using TypeScript you can define the type of `abortReason`
declare global {
  namespace Vike {
    interface PageContext {
      abortReason?:
        | string
        | { notAdmin: true }
    }
  }
}

The API > usePageContext() UI component hook allows you to access pageContext from any UI component.

The global interface Vike.PageContext allows you to define pageContext types in a global fashion, see API > pageContext > Typescript.

The pageContext.abortReason and pageContext.abortStatusCode values are set by throw render(abortStatusCode, abortReason), and pageContext.is404 is set by Vike.

The error page is rendered when:

The URL didn't match the route of any of your pages (404 Page Not Found).
Your code has a bug (500 Internal Error), technically speaking: one of your hooks threw an error.
One of your hooks used throw render(abortStatusCode), for example: throw render(401, "You don't have the permission to access this page.").

Pre-rendering

If you use pre-rendering, then Vike uses the error page to generate /dist/client/404.html.

Most Static Hosts follow the convention of using the file 404.html as 404 page.

Error Page

Pre-rendering

See also