Next.js 14 服务器端错误处理：方式正确性及最佳实践

你的实现方式是否正确？ #

这种方式是正确的。在Next.js 14的App Router中，服务器组件（默认page.tsx属于服务器组件）中抛出的未捕获错误，会自动向上传播并被就近的error.tsx（全局路由或当前路由段的错误处理文件）捕获，渲染对应的错误页面。你无需手动添加try/catch来捕获错误，让错误自然传播至error.tsx的做法符合Next.js的设计规范。

Next.js 14服务器端错误处理最佳实践 #

• 层级化使用error.tsx：不要仅依赖根目录的全局error.tsx，可以为特定路由段（比如app/dashboard/error.tsx）创建专属的错误处理文件，针对不同页面展示更贴合场景的错误提示，同时避免错误影响整个应用。
• 区分预期错误与意外错误：
  • 对于API返回非200这类可预见的错误（比如参数错误、资源权限不足），可以考虑返回包含错误信息的对象而非直接抛出错误，在页面组件中判断后展示友好的UI提示，避免触发error.tsx的全屏错误页面。
  • 对于程序崩溃、数据库连接失败这类不可预见的严重错误，直接抛出错误让error.tsx处理。
• 强制记录错误日志：在抛出错误前，务必记录详细的上下文信息（比如请求URL、状态码、错误栈），方便后续排查问题。例如在你的getPositions函数中添加日志：

  async function getPositions() {
    const url = `${process.env.BASE_API_URL}/positions?enabled=true`;
    const response = await fetch(url, { cache: "no-cache" });
  
    if (!response.ok) {
      console.error(`API请求失败: ${url}, 状态码: ${response.status}`);
      if (response.status === 404) {
        notFound(); // 触发not-found.tsx页面
      }
      throw new Error("Es gab ein Problem mit Ihrer Anfrage");
    }
  
    const data = await response.json();
    return data.result;
  }
  

• 用notFound()处理404场景：当API返回资源不存在（404状态码）时，不要抛出普通Error，调用Next.js提供的notFound()函数，会自动触发not-found.tsx页面，更符合语义化的错误处理逻辑。
• 避免静默吞掉错误：不要在服务器组件中用try/catch包裹逻辑却不处理错误（比如只打印日志不重新抛出），这会导致错误无法被error.tsx捕获，问题难以被发现。如果必须捕获，确保错误被重新抛出或妥善处理。
• 自定义错误类型：可以创建自定义错误类，携带额外的上下文信息（比如错误码、用户可见提示），在error.tsx中根据错误类型展示不同的内容。例如：

  class ApiError extends Error {
    constructor(message: string, public statusCode: number) {
      super(message);
      this.name = "ApiError";
    }
  }
  
  // 在getPositions中抛出
  throw new ApiError("资源不存在", 404);
  

• 区分服务器/客户端错误边界：服务器组件依赖error.tsx处理错误，客户端组件则需要使用React的ErrorBoundary组件包裹，分开处理两端的错误逻辑，避免混淆。

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