Astro.js服务端渲染（Node.js适配器）自定义错误页面实现疑问

一、主动错误（如404资源不存在）处理 #

你代码里的核心问题是错误导入了渲染方法，Astro SSR中无需额外导入render，直接使用Astro.render()即可渲染Astro组件为HTML。修改后的代码如下：

---
import { getProduct } from '../api'
// 直接导入.astro组件，注意文件后缀
import MyErrorAstroComponent from '../MyErrorAstroComponent.astro'

const product = await getProduct(Astro.params.id)

if (!product) {
  // 渲染错误组件并传入状态码参数
  const errorHtml = await Astro.render(MyErrorAstroComponent, { status: 404 })
  return new Response(errorHtml, {
    status: 404,
    headers: {
      'Content-Type': 'text/html'
    }
  })
}
---
<html>
  <!-- 正常页面内容 -->
</html>

二、异常错误（如500服务器错误、503服务不可用）处理 #

对于数据库超时这类突发异常，可通过页面内try-catch捕获或全局中间件统一处理两种方式：

1. 页面内局部捕获 #

在异步操作外层包裹try-catch，根据错误类型返回对应状态码的错误页面：

---
import { getProduct } from '../api'
import MyErrorAstroComponent from '../MyErrorAstroComponent.astro'

let product
try {
  // 可能抛出异常的异步操作
  product = await getProduct(Astro.params.id)
} catch (err) {
  // 根据错误信息判断状态码，比如数据库超时返回503
  const statusCode = err instanceof Error && err.message.includes('timeout') ? 503 : 500
  const errorHtml = await Astro.render(MyErrorAstroComponent, { 
    status: statusCode,
    message: err instanceof Error ? err.message : '服务器内部错误'
  })
  return new Response(errorHtml, {
    status: statusCode,
    headers: { 'Content-Type': 'text/html' }
  })
}

if (!product) {
  // 404处理逻辑同上
}
---
<html>
  <!-- 正常页面内容 -->
</html>

2. 全局中间件统一处理 #

创建src/middleware.ts文件，捕获所有路由的异常，实现全局错误处理：

import { defineMiddleware } from 'astro/middleware';
import MyErrorAstroComponent from './MyErrorAstroComponent.astro';

export const onRequest = defineMiddleware(async ({ next }) => {
  try {
    return await next();
  } catch (err) {
    // 自定义状态码判断逻辑
    const statusCode = err instanceof Error && err.message.includes('timeout') ? 503 : 500;
    const errorHtml = await Astro.render(MyErrorAstroComponent, {
      status: statusCode,
      message: err instanceof Error ? err.message : '未知服务器错误'
    });
    return new Response(errorHtml, {
      status: statusCode,
      headers: { 'Content-Type': 'text/html' }
    });
  }
});

三、错误组件示例 #

MyErrorAstroComponent.astro可以这样编写，接收状态码和错误信息参数：

---
const { status, message = '请求出错了' } = Astro.props;
---
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{status} 错误</title>
</head>
<body>
  <div style="text-align: center; padding: 4rem;">
    <h1>{status}</h1>
    <p>{message}</p>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者mb21