_error.page.js
By defining renderer/_error.page.tsx
we can render a dedicated page when an error occurs.
// renderer/_error.page.js
export { Page }
function Page(pageProps) {
if (pageProps.is404) {
// Return a UI component "Page Not Found."
} else {
// Return a UI component "Our server is having problems. Sincere apologies. Try again later."
}
}
We can define hooks just like any other page, such as a custom layout.
If we enable pre-rendering, then vite-plugin-ssr uses _error.page.js
to generate dist/client/404.html
.
Most Static Hosts automatically pick up
404.html
and use it to render a 404 page.
The page _error.page.js
is rendered when:
404 Page Not Found
)..page.js
/ .page.server.js
/ .page.route.js
) throws an error (500 Internal Server Error
).throw RenderErrorPage()
.For 1.
and 3.
, vite-plugin-ssr
automatically sets the following:
pageContext.is404 === true
pageContext.pageProps.is404 === true
We can
throw RenderErrorPage({ pageContext: { is404: false }})
to havepageContext.is404 === false
as well aspageContext.pageProps.is404 === false
.
For 2.
:
pageContext.is404 === false
pageContext.pageProps.is404 === false
Normally, the
vite-plugin-ssr
source code doesn't know anything aboutpageContext.pageProps
but this is the only exception.
That way, we can use pageContext.pageProps.is404
to decide what error message to show our user.