React在updateDehydratedSuspenseComponent时触发401错误的原因排查

问题 #

• 开发者工具网络面板中，所有请求均返回2xx成功状态
• 能从服务器获取有效数据
  
• 但仍抛出401错误（该API未被模拟）

react-dom.development.js:17497 Uncaught Error: Request failed with status code 401
    at updateDehydratedSuspenseComponent (react-dom.development.js:17497:19)
    at updateSuspenseComponent (react-dom.development.js:17193:16)
    at beginWork$1 (react-dom.development.js:18509:14)
    at beginWork (react-dom.development.js:26927:14)
    at performUnitOfWork (react-dom.development.js:25748:12)
    at workLoopConcurrent (react-dom.development.js:25734:5)
    at renderRootConcurrent (react-dom.development.js:25690:9)
    at performConcurrentWorkOnRoot (react-dom.development.js:24504:38)
    at workLoop (scheduler.development.js:256:34)
    at flushWork (scheduler.development.js:225:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)

• 该错误导致Next.js无法加载页面

"use client"

import { apiClient } from "@/util/axios";
import { useSuspenseQuery } from "@tanstack/react-query";
import { AxiosResponse } from "axios";

interface PropType {
  params: { sessionId: string };
}

export default function Page({ params }: PropType) {
  const { data: userResponse } = useSuspenseQuery<AxiosResponse<any>>({
    queryKey: ["user", "profile"],
    queryFn: async () => await apiClient.get("/user/profile"),
  });
  console.log(userResponse);
  // const sessionId = Number(params.sessionId);
  // const userData = userResponse.data;
  return <></>;
}

• 以上为page.tsx代码

export const refreshClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_SERVER,
});

// 仅使用access_token重试请求
export const retryClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_SERVER,
});

// 使用access_token发起请求，遇到401时用refresh_token重新请求
export const apiClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_SERVER,
});

refreshClient.interceptors.request.use(
  (config) => {
    const refreshToken = Cookies.get("refresh_token");
    config.headers.Authorization = `Bearer ${refreshToken}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

retryClient.interceptors.request.use(
  (config) => {
    const accessToken = Cookies.get("access_token");
    config.headers.Authorization = `Bearer ${accessToken}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

retryClient.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

apiClient.interceptors.request.use(
  (config) => {
    const accessToken = Cookies.get("access_token");
    config.headers.Authorization = `Bearer ${accessToken}`;
    console.log("req",config);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

apiClient.interceptors.response.use(
  (response) => {
    console.log("success", response);
    return response.data;
  },
  async (error) => {
    const originalReq = error.config as InternalAxiosRequestConfig<any>;
    console.log(error, originalReq);
    if (error?.response?.status === 401) {
      try {
        await refreshClient.get("/auth/token-refresh");
        return retryClient(originalReq);
      } catch (err) {
        return Promise.reject(err);
      }
    }
    return Promise.reject(error);
  }
);

• 以上为Axios实例配置代码
• 从控制台日志可见，响应无错误
• 项目中已配置error.tsx和loading.tsx
• 为何React开发环境中会出现401错误？所有API都存在这个问题
• 若使用默认axios.get而非自定义实例，会显示error.tsx页面
• 若使用useQuery而非useSuspenseQuery，可正常显示UI与数据

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