Next.js 13 中间件异常处理失效问题及优化方案咨询

你的middleware代码里，try/catch仅包裹了NextResponse.next()这一行，但这行代码的作用是放行请求到后续的路由/组件处理流程，并不会触发或捕获后续流程中抛出的异常。Middleware的执行逻辑是在请求进入具体业务处理前运行，后续环节的异常不会回传到当前middleware的try/catch块中，所以无法实现全局异常捕获的效果。

根据Next.js 13的App Router架构，需要分场景处理异常：

1. API路由的异常捕获 #

对于app/api下的API路由，可以封装通用错误处理函数，统一捕获API内部异常：

// app/api/utils/errorHandler.ts
import { NextResponse } from "next/server";

export const handleApiError = (error: unknown) => {
  const err = error as Error & { status?: number };
  return NextResponse.json(
    {
      error: {
        message: err.message || "服务器内部错误",
        status: err.status || 500,
      },
    },
    { status: err.status || 500 }
  );
};

在API路由中调用该函数：

// app/api/test/route.ts
import { NextRequest, NextResponse } from "next/server";
import { handleApiError } from "../utils/errorHandler";

export async function GET(req: NextRequest) {
  try {
    // 业务逻辑示例
    throw new Error("API请求异常");
    return NextResponse.json({ data: "success" });
  } catch (error) {
    return handleApiError(error);
  }
}

2. 页面组件的异常捕获 #

在App Router中，使用错误边界组件（error.tsx）捕获页面组件树中的异常。在需要处理异常的页面目录下创建该文件：

// app/user/error.tsx
"use client"; // 错误边界组件必须为客户端组件

import { useEffect } from "react";

type ErrorProps = {
  error: Error & { digest?: string };
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  useEffect(() => {
    console.error("页面异常:", error);
  }, [error]);

  return (
    <div className="error-container">
      <h2>页面加载出错</h2>
      <p>{error.message || "未知错误"}</p>
      <button onClick={() => reset()}>点击重试</button>
    </div>
  );
}

该组件会自动捕获当前页面目录下所有组件抛出的异常，并展示自定义错误界面。

3. 全局兜底异常处理 #

如果需要对所有请求做统一的500错误兜底，可以在middleware.ts中通过拦截响应状态码处理：

import { NextRequest, NextResponse } from "next/server";

export function middleware(req: NextRequest) {
  const response = NextResponse.next();

  // 若响应为500状态，返回自定义JSON错误
  if (response.status === 500) {
    return NextResponse.json(
      { error: { message: "服务器内部错误", status: 500 } },
      { status: 500 }
    );
  }

  return response;
}

注意：这种方式无法读取响应体内容，仅能基于状态码做处理，适合兜底场景。

• Middleware的try/catch仅能处理自身执行逻辑中的错误，无法捕获后续路由/组件抛出的异常。
• API路由用统一错误处理函数捕获业务异常，页面组件用error.tsx错误边界处理渲染异常。
• 全局兜底可通过拦截响应状态码实现，存在一定局限性。

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