React如何统一管理错误信息，在catch块直接调用展示toast提示

因为react-toast-notifications提供的useToasts是React Hook，本身只能在React组件或者自定义Hook内部调用，以下提供两种常用实现方案按需选择即可。

方案一：封装自定义错误处理Hook（推荐，符合React规范） #

无全局变量污染，适合仅在组件内部处理错误的场景。

1. 新建统一错误处理文件 src/utils/useErrorHandler.js

import { useToasts } from 'react-toast-notifications';

export const useErrorHandler = () => {
  const { addToast } = useToasts();

  // 统一错误提示逻辑，可扩展错误上报、特殊码拦截等能力
  const showErrorToast = (error, customMessage = '操作失败') => {
    const errorMsg = error?.response?.data?.message || error?.message || customMessage;
    addToast(errorMsg, {
      appearance: 'error',
      autoDismiss: true,
      autoDismissTimeout: 3000
    });
  };

  return { showErrorToast };
};

2. 组件内调用示例

import { useErrorHandler } from '@/utils/useErrorHandler';

const Index = () => {
  const { showErrorToast } = useErrorHandler();

  useEffect(() => {
    fetchDataFromApi()
      .then(data => {
        // 业务逻辑处理
      })
      .catch(error => showErrorToast(error, '数据加载失败'))
  }, [])

  // 其他业务逻辑
}

方案二：全局挂载实现全场景调用 #

支持在axios拦截器、普通工具函数等非组件环境触发提示。

1. 根组件内将addToast挂载到全局变量

import { useToasts, ToastProvider } from 'react-toast-notifications';

// 全局存储Toast实例
window.__GLOBAL_TOAST__ = {};

const AppInit = () => {
  const { addToast } = useToasts();
  
  useEffect(() => {
    // 把错误提示方法挂载到全局
    window.__GLOBAL_TOAST__.addErrorToast = (error, customMessage = '操作失败') => {
      const errorMsg = error?.response?.data?.message || error?.message || customMessage;
      addToast(errorMsg, {
        appearance: 'error',
        autoDismiss: true,
        autoDismissTimeout: 3000
      });
    };
  }, [addToast]);

  return <App />;
}

// 根组件包裹ToastProvider
const Root = () => {
  return (
    <ToastProvider>
      <AppInit />
    </ToastProvider>
  )
}

export default Root;

2. 新建统一错误处理工具文件 src/utils/errorHandler.js

export const showErrorToast = (...args) => {
  // 安全校验，避免实例未挂载时报错
  if (window.__GLOBAL_TOAST__?.addErrorToast) {
    window.__GLOBAL_TOAST__.addErrorToast(...args);
  }
};

3. 任意场景调用示例

• 组件catch中调用

import { showErrorToast } from '@/utils/errorHandler';

const Index = () => {
  useEffect(() => {
    fetchDataFromApi()
      .then(data => {
        // 业务逻辑处理
      })
      .catch(error => showErrorToast(error, '数据加载失败'))
  }, [])
}

• axios响应拦截器中调用

import { showErrorToast } from '@/utils/errorHandler';

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

注意：两种方案都可以在统一方法中扩展通用逻辑，比如错误日志上报、登录过期跳转、权限不足拦截等，无需在每个业务组件重复实现。

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