如何处理无法连接服务器的NextJS ServerAction错误？

问题原因 #

当前代码无法捕获错误有两个核心原因：

1. 调用Server Action时未使用await，导致异步Promise的rejection无法被局部try/catch捕获；
2. 反向代理直接拒绝请求（返回401/403或断开连接）属于网络层/代理层错误，Next.js默认不会将这类错误封装为Server Action Promise的rejection，而是会抛出全局未捕获错误，因此局部的错误处理逻辑无法触发。

解决方案 #

方案一：修正异步调用并全局监听未捕获错误 #

先修正原代码的异步调用方式，再通过全局事件监听处理代理层错误：

1. 修正Server Action调用代码（添加await）：

// 客户端组件中
async function triggerAction() {
  try {
    await callMyServerAction();
  } catch (error) {
    // 捕获Server Action内部抛出的错误
    console.error('Action执行错误:', error);
  }
}

2. 在客户端组件中添加全局错误监听：

import { useEffect } from 'react';

function YourClientComponent() {
  useEffect(() => {
    const handleUnhandledRejection = (event) => {
      const error = event.reason;
      // 根据代理返回的特征判断认证过期（比如错误信息含401、Unauthorized或网络错误）
      if (error.message.match(/401|Unauthorized|Network Error/)) {
        // 执行认证过期逻辑，比如跳转登录页
        window.location.href = '/login';
      }
      // 阻止错误冒泡到控制台（可选）
      event.preventDefault();
    };

    window.addEventListener('unhandledrejection', handleUnhandledRejection);
    return () => window.removeEventListener('unhandledrejection', handleUnhandledRejection);
  }, []);

  // ... 其他组件逻辑
}

方案二：手动用Fetch封装Server Action调用（更可控） #

通过手动构造Server Action的请求，完全控制错误处理流程：

1. 先通过浏览器DevTools的Network面板，在认证有效时调用一次Server Action，记录以下信息：

   • 请求的URL（通常是/api/_next/server-action或类似路径）
   • 请求头中的Next-Action和Next-RSC字段值
   • 请求Body中的actionId和参数结构

2. 在客户端组件中手动发起请求：

async function callActionManually() {
  try {
    const response = await fetch('/api/_next/server-action', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Next-Action': '替换为你抓包得到的值',
        'Next-RSC': '1', // 通常固定为1，以符合Next.js的RSC规范
      },
      body: JSON.stringify({
        actionId: '替换为你抓包得到的Action ID',
        args: [], // 你的Server Action需要的参数，没有则为空数组
        callerPath: '/your-page-path', // 调用该Action的页面路径
      }),
      credentials: 'include', // 带上认证Cookie
    });

    if (!response.ok) {
      if (response.status === 401) {
        // 认证过期，跳转登录页
        window.location.href = '/login';
        return;
      }
      throw new Error(`请求失败：${response.status} ${response.statusText}`);
    }

    const result = await response.json();
    // 处理Server Action返回的结果
  } catch (error) {
    // 捕获网络错误（比如代理拒绝连接）或状态码错误
    console.error('调用失败:', error);
    // 这里可以添加用户提示逻辑
  }
}

这种方式可以完全控制请求的每一步，精准捕获代理层的所有错误，适合对错误处理有严格要求的场景。

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