React 中的错误处理（错误边界、React-Query、Axios 拦截器）

Question

我有一个 Create React 应用程序（使用

react-router

v6），它设置为以下方式与 API 进行通信。

在顶层 - 我将我的应用程序包装在

ErrorBoundary

(

Sentry.ErrorBoundary

) 中。

获取 API 时，前端从

useQuery

调用

react-query

方法（使用 axios 实例来获取请求的 API URL）。

但是如何处理来自 axios 的错误 404 或 500？

目前，

ErrorBoundary

会呈现一个阻塞 UI 的

ErrorPage

。我正在尝试找到一种不阻塞 UI 的更好方法。

在我看来，我可以通过以下方式处理错误：

1. 直接使用axios拦截器 - 但目前它在一个单独的文件中，并且不使用React Router的useNavigate() - 所以我要么使用窗口重定向到

   /404

   或

   /500

   ，要么将其包装在

   React.Context

   中（本身包裹在我的 React Router 上下文中），这样它就可以使用其中的

   useNavigate()

   从

   react-router

   重定向到

   /404

   或

   /500

   。

2. 使用react-query中的

   onError

   处理程序（直接在我的

   QueryClient

   配置中），该处理程序将传递

   AxiosError

   并根据axios错误响应状态重定向到

   /404

   或

   /500

3. 使用来自

   Sentry.ErrorBoundary

   的错误对象并根据axios的错误响应状态渲染不同的UI

解决方案1和2将利用

useNavigate()

通过

react-router

来重定向（或window.pathname），但我对这些不满意......解决方案3对我来说更有趣（因为我可以拥有404 UI而无需更改路径名！）但解决方案 3 无法处理错误（它将被捕获）...

有什么建议或者更好的想法吗？

我还没有发现太多关于 SPA 中处理错误的信息 - 感谢您的宝贵时间:)

Answer 1

听起来您想要一种非阻塞的方式来处理 404 和 500 错误，同时保持对用户所看到内容的控制，而不会将整个应用程序重定向到错误页面。这是一个可能有帮助的示例方法：

使用react-query的onError处理程序 使用react-query，您可以在QueryClient级别或每个查询中定义onError函数。这允许您在组件中本地处理特定错误，而不是在全局 ErrorBoundary 中。例如，对于 404 错误，您可以在组件中显示内联错误消息，而仅针对更严重的错误进行重定向。

以下是如何在 QueryClient 配置中进行设置以处理 404 和 500 的方法：

import { QueryClient } from 'react-query';
import { useNavigate } from 'react-router-dom';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: (error) => {
        if (axios.isAxiosError(error)) {
          const navigate = useNavigate();
          const status = error.response?.status;

          if (status === 404) {
            navigate('/404'); // Navigate to a custom 404 page
          } else if (status === 500) {
            navigate('/500'); // Navigate to a custom 500 page
          }
        }
      },
    },
  },
});

export default queryClient;