如何在Next.js Server Actions中捕获请求体超2MB限制的错误？

你遇到的413错误是Next.js在解析请求体阶段抛出的，早于你的Server Action函数执行，所以函数内部的try/catch根本无法捕获它。Next.js默认对Server Actions的请求体大小限制为2MB，当上传的FormData超过这个值时，框架层面直接拦截并返回错误。

方案1：调整请求体大小限制 #

如果你确实需要处理大文件上传，可以修改next.config.js，增大Server Actions的请求体限制：

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverActions: {
    bodySizeLimit: '10mb' // 根据需求设置合适的值，比如'5mb'、'20mb'
  }
};

export default nextConfig;

修改后重启开发服务器，新的限制就会生效。

方案2：在客户端捕获错误并展示UI提示 #

如果不想调整限制，要在UI上展示错误提示，需要在客户端调用Server Action的代码中添加try/catch，同时可以结合错误边界处理页面级错误：

客户端调用时捕获错误 #

'use client';
import { handleSomeRequest } from './actions';

export default function UploadPage() {
  const handleFormSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    try {
      const response = await handleSomeRequest(formData);
      // 处理成功逻辑
    } catch (error) {
      // 捕获413错误并展示UI提示
      if (error.statusCode === 413) {
        // 这里可以用自定义弹窗、Toast等组件替代alert
        alert('文件过大，请压缩后重试');
      } else {
        alert('发生未知错误，请稍后再试');
      }
    }
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input type="file" name="attachment" />
      <button type="submit">上传</button>
    </form>
  );
}

使用错误边界处理页面级错误 #

在你的页面目录下创建error.js文件，捕获全局页面错误并展示自定义UI：

'use client';

export default function Error({ error, reset }) {
  if (error.statusCode === 413) {
    return (
      <div className="p-8 text-center">
        <h2 className="text-xl font-bold mb-4">文件过大</h2>
        <p className="mb-6">请减小附件大小后重试</p>
        <button onClick={reset} className="px-4 py-2 bg-blue-500 text-white rounded">
          重新上传
        </button>
      </div>
    );
  }

  return (
    <div className="p-8 text-center">
      <h2 className="text-xl font-bold mb-4">发生错误</h2>
      <button onClick={reset} className="px-4 py-2 bg-blue-500 text-white rounded">
        重试
      </button>
    </div>
  );
}

• 终端仍然会显示该错误日志，这是Next.js框架层面的日志输出，无法通过代码完全抑制，属于正常现象。
• 如果需要处理更大的文件上传，建议结合第三方存储服务，直接在客户端上传文件到存储服务，再将文件链接传给Server Action，避免通过Server Actions传递大负载。

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