【大前端】React统计所有网络请求的成功率、失败率以及统一入口处理失败页面

React 如何去统一统计所有网络请求的成功率、失败率。以及如何在统一入口处理失败页面呢？这个问题其实分成两块来看：

1. 统一统计所有网络请求的成功率 / 失败率
2. 统一入口处理失败页面（例如跳转到错误页 / Toast 提示 / 弹窗等）

---

1. 统一统计网络请求的成功率、失败率

在 React 应用中常见的网络请求方式是：

• fetch
• axios
• 封装过的 request 方法

✅ 方案一：对 fetch 进行全局封装

你可以在应用启动时，替换全局的 window.fetch：

// request.js
const originFetch = window.fetch;window.fetch = async (...args) => {const start = Date.now();try {const response = await originFetch(...args);if (!response.ok) {reportFailure(args, response.status, Date.now() - start);} else {reportSuccess(args, Date.now() - start);}return response;} catch (error) {reportFailure(args, 'network_error', Date.now() - start);throw error;}
};function reportSuccess(args, duration) {console.log('✅ success:', args, duration);// 上报到埋点 / 监控平台
}function reportFailure(args, code, duration) {console.log('❌ fail:', args, code, duration);// 上报到埋点 / 监控平台
}

这样所有基于 fetch 的请求，都会自动记录成功率/失败率。

---

✅ 方案二：axios 拦截器

如果你用的是 axios，更推荐拦截器方式：

// request.js
import axios from "axios";const instance = axios.create({timeout: 10000,
});instance.interceptors.response.use((response) => {reportSuccess(response.config.url, response.status);return response;},(error) => {if (error.response) {reportFailure(error.config.url, error.response.status);} else {reportFailure(error.config?.url, 'network_error');}return Promise.reject(error);}
);function reportSuccess(url, status) {console.log('✅ success:', url, status);// 上报监控
}function reportFailure(url, status) {console.log('❌ fail:', url, status);// 上报监控
}export default instance;

之后你只用 instance.get/post(...)，所有请求都会被统计。

---

2. 统一入口处理失败页面

一般有两种思路：

✅ 方式一：在请求层做统一错误处理

比如 axios 拦截器里直接做跳转：

import { useNavigate } from "react-router-dom";instance.interceptors.response.use((res) => res,(error) => {if (error.response?.status === 500) {window.location.href = "/error"; // 或者 React Router navigate}return Promise.reject(error);}
);

这样所有 500 错误都会自动跳转到错误页。

---

✅ 方式二：在 React 组件层做统一兜底

• 使用 ErrorBoundary 捕获渲染错误（UI 异常）。
• 使用 请求状态管理器（如 react-query / SWR），在全局配置里设置 onError 统一处理。

例如 React Query：

import { QueryClient, QueryClientProvider } from 'react-query';const queryClient = new QueryClient({defaultOptions: {queries: {onError: (error) => {console.error("请求失败:", error);// 这里可以统一处理，比如跳转错误页},},},
});function App() {return (<QueryClientProvider client={queryClient}><YourApp /></QueryClientProvider>);
}

---

推荐最佳实践

• 请求层：拦截器统一统计成功/失败率
• 错误处理：结合 React Router + 全局错误页面
• 复杂项目：使用 React Query/SWR 统一管理请求状态

---