Menu
I've seen the custom 404.astro page. But how does this translate to server-side rendering? (Using the node.js adapter if that matters.)
Looking at the Response docs, I thought about writing something like:
---
import { render } from 'astro/???'
import { getProduct } from '../api'
import { MyErrorAstroComponent } from '../MyErrorAstroComponent'
const product = await getProduct(Astro.params.id)
if (!product) {
const props = { status: 404 }
return new Response(render(MyErrorAstroComponent, props), {
status: 404
})
}
---
<html>
<!-- Success page here... -->
</html>
Same question for a 500 or 503 page, e.g. if the database times out or something...
I've found How can I render a astro component to a HTML string?, but no good answer...
534
404 can be handled at the bottom of the middleware pipeline when none of them could handle the request.
here more details on how to implement it in an express js project
https://expressjs.com/en/starter/faq.html#:~:text=How%20do%20I%20handle%20404%20responses%3F
here working fine, implemented in an Astro as node middleware with node project.
const app = express();
app.use(express.static('dist/client/'))
app.use(express.static('dist/client/raw'))
app.use(authRouter)
app.use(ssrHandler);
app.use((req, res, next) => {
res.status(404).send("Sorry can't find that!")
})
here a link to a full working project https://github.com/MicroWebStacks/astro-big-doc/blob/a2049e286424c256e9d406f7df84dfedf65527ad/server/server.js#L17
in standalone mode it is possible to add a collector page such as [...any].astro that collects all requests not hit by other pages and then pick the required content to be returned and place it in its body as follows
---
import Page_404 from './404.astro'
const {any} = Astro.params;
console.log(`${any} does not exist`)
---
<Page_404/>
here are examples where this can be tested
Github repo : https://github.com/MicroWebStacks/astro-examples#08_404-error-handling
StackBliz : https://stackblitz.com/github/MicroWebStacks/astro-examples/tree/main/08_404-error-handling
CodeSandbox : https://codesandbox.io/s/github/MicroWebStacks/astro-examples/tree/main/08_404-error-handling
Gitpod (test in prod) : https://gitpod.io/?on=gitpod#https://github.com/MicroWebStacks/astro-examples/tree/main/08_404-error-handling
192
answered Jul 28 '26 16:07
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With