前端遇到接口批量异常导致 Toast 弹窗轰炸该如何处理？

问题背景

最近项目遇到一个典型问题：后端接口出现大规模异常时，前端瞬间收到大量错误响应，导致Toast弹窗连续轰炸，用户体验极差。记录下解决方案，供大家参考。

核心解决思路

错误合并 - 短时间内相同/类似错误合并处理
分级处理 - 区分关键错误和普通错误
全局管控 - 中央管理器统一协调错误展示
优雅降级 - 提供全局错误遮罩

完整实现方案

1. 错误管理器核心实现

typescript 复制代码

// errorManager.ts
/**
 * 错误级别定义
 * - CRITICAL: 需要立即处理的关键错误
 * - BATCH: 可批量处理的普通错误
 * - SILENT: 静默处理的次要错误
 */
enum ErrorLevel {
  CRITICAL = 1,
  BATCH = 2,
  SILENT = 3
}

/**
 * 增强型错误处理器
 * 支持错误分级和智能合并
 */
class ErrorHandler {
  private batchQueue: string[] = [];
  private batchTimer?: number;
  private criticalErrors: string[] = [];
  
  /**
   * 处理错误
   * @param error 错误对象
   * @param level 错误级别
   */
  handle(error: any, level = ErrorLevel.BATCH): void {
    const msg = this.extractMessage(error);
    
    switch (level) {
      case ErrorLevel.CRITICAL:
        this.handleCritical(msg);
        break;
      case ErrorLevel.BATCH:
        this.addToBatch(msg);
        break;
      // SILENT级别不处理
    }
  }
  
  private extractMessage(error: any): string {
    if (typeof error === 'string') return error;
    return error.response?.data?.message || error.message || '请求失败';
  }
  
  private handleCritical(msg: string): void {
    // 关键错误立即显示
    Toast.error(`[重要] ${msg}`);
    this.criticalErrors.push(msg);
    
    // 超过3个关键错误触发全局遮罩
    if (this.criticalErrors.length >= 3) {
      this.showGlobalOverlay();
    }
  }
  
  private addToBatch(msg: string): void {
    if (!this.batchQueue.includes(msg)) {
      this.batchQueue.push(msg);
    }
    
    // 防抖处理
    clearTimeout(this.batchTimer);
    this.batchTimer = window.setTimeout(() => {
      this.flushBatch();
    }, 800);// 800ms合并窗口
  }
  
  private flushBatch(): void {
    if (this.batchQueue.length === 0) return;
    
    const displayMsg = this.batchQueue.length > 3
      ? `多个操作失败（共${this.batchQueue.length}个）`
      : this.batchQueue.join('；');
    
    Toast.error(displayMsg);
    this.batchQueue = [];
  }
  
  private showGlobalOverlay(): void {
    window.dispatchEvent(
      new CustomEvent('globalErrors', {
        detail: {
          messages: this.criticalErrors,
          count: this.criticalErrors.length
        }
      })
    );
  }
}

export const errorHandler = new ErrorHandler();

2. 全局错误遮罩组件

typescript 复制代码

// GlobalErrorOverlay.tsx
import React, { useState, useEffect } from 'react';
import { Button, Modal } from 'antd';

const GlobalErrorOverlay: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [errors, setErrors] = useState<string[]>([]);
  
  useEffect(() => {
    const listener = (e: CustomEvent) => {
      setErrors(e.detail.messages);
      setVisible(true);
    };
    
    window.addEventListener('globalErrors', listener as EventListener);
    return () => {
      window.removeEventListener('globalErrors', listener as EventListener);
    };
  }, []);
  
  const handleClose = () => {
    setVisible(false);
    setErrors([]);
  };
  
  return (
    <Modal
      title="系统遇到多个错误"
      visible={visible}
      footer={[
        <Button key="close" onClick={handleClose}>
          我知道了
        </Button>,
        <Button 
          key="refresh" 
          type="primary" 
          onClick={() => window.location.reload()}
        >
          刷新页面
        </Button>
      ]}
      onCancel={handleClose}
    >
      <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
        {errors.length > 3 ? (
          <p>共遇到 {errors.length} 个关键错误，部分错误如下：</p>
        ) : null}
        
        <ul style={{ listStyle: 'disc', paddingLeft: '20px' }}>
          {errors.slice(0, 3).map((msg, i) => (
            <li key={i} style={{ color: '#ff4d4f', marginBottom: '8px' }}>
              {msg}
            </li>
          ))}
        </ul>
      </div>
    </Modal>
  );
};

export default GlobalErrorOverlay;

3. 错误分类与拦截器配置

typescript 复制代码

// errorInterceptor.ts
import axios from 'axios';
import { errorHandler } from './errorManager';

/**
 * 错误分类策略
 */
function classifyError(error: any): ErrorLevel {
  // 网络错误
  if (!error.response) return ErrorLevel.CRITICAL;
  
  const status = error.response.status;
  
  // 认证错误
  if ([401, 403].includes(status)) {
    return ErrorLevel.CRITICAL;
  }
  
  // 服务器错误
  if (status >= 500) {
    return ErrorLevel.CRITICAL;
  }
  
  // 限流错误
  if (status === 429) {
    return ErrorLevel.SILENT;
  }
  
  // 其他业务错误
  return ErrorLevel.BATCH;
}

// axios响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    const level = classifyError(error);
    errorHandler.handle(error, level);
    return Promise.reject(error);
  }
);

4. 应用集成

typescript 复制代码

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import GlobalErrorOverlay from './components/GlobalErrorOverlay';

ReactDOM.render(
  <>
    <App />
    <GlobalErrorOverlay />
  </>,
  document.getElementById('root')
);

关键优化点

智能错误处理：
- 自动识别错误类型和级别
- 关键错误立即反馈
- 普通错误合并处理
- 次要错误静默处理
用户体验优化：
- 关键错误超过阈值显示全局遮罩
- 提供错误摘要和详细列表
- 支持刷新和关闭操作
- 避免弹窗轰炸
性能与扩展性：
- 使用防抖控制错误展示频率
- 支持自定义错误分类策略
- 方便集成监控系统

实施建议

渐进式实施：
- 先实现基础错误合并
- 再添加错误分级
- 最后实现全局遮罩

错误监控：

typescript 复制代码

// 可扩展错误上报
axios.interceptors.response.use(null, error => {
  if (process.env.NODE_ENV === 'production') {
    // 上报到监控系统
    monitor.trackError(error);
  }
  return Promise.reject(error);
});

状态持久化：

typescript 复制代码

// 存储错误日志
localStorage.setItem('errorLog', JSON.stringify({
  timestamp: Date.now(),
  errors: criticalErrors
}));

这套方案能有效解决批量接口异常导致的弹窗问题，同时保证用户获得适当的错误反馈。