TS 方法实现过滤 React 和 Antd 常见控制台警告，如Warning: [antd: xxx] border is deprecated 或 Warning: findDOMNode is deprecated in StrictMode

[resetsix]

目录

• 背景说明
• 实现方案
• 使用方法
• 注意事项

背景说明

在 React 项目中，特别是使用 Ant Design 组件库时，经常会遇到一些废弃警告，比如：

• Antd 组件的 bordered 属性废弃警告（新增variant变体属性）
• React 的 findDOMNode 方法废弃警告
• 其他类似的控制台警告

这些警告虽然不影响功能，但会污染控制台输出。本文提供了一个统一的解决方案。

实现方案

1. 警告过滤方法

// utils/setupGlobalErrorHandling.ts

// 类型定义
type ErrorInfo = string;
type ErrorHandlerFunction = (
  error: Error | unknown,
  errorInfo: ErrorInfo
) => void;

interface GlobalErrorHandlingResult {
  ExtendedError: typeof ExtendedError;
  handleError: ErrorHandlerFunction;
}

interface ErrorHandlingConfig {
  maxErrorsPerSecond: number;
  enableConsoleOverride: boolean;
  ignoredWarnings: typeof IGNORED_WARNING_MESSAGES;
}

// 扩展全局 Error 构造函数的类型定义
declare global {
  interface ErrorConstructor {
    captureStackTrace?(targetObject: object, constructorOpt?: Function): void;
  }
}

// 扩展的错误类
class ExtendedError extends Error {
  constructor(message: string) {
    super(message);
    this.name = this.constructor.name;
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, this.constructor);
    }
  }
}

// 简化的警告配置，直接添加需要忽略的消息字符串即可
const IGNORED_WARNING_MESSAGES = [
  "`bordered` is deprecated",
  "Warning: findDOMNode is deprecated",
  // 在这里直接添加新的警告消息
  "Warning: StrictMode double-invocation",
  "Warning: Cannot update a component while rendering a different component",
  "[antd: Form.Item] `children` is array",
] as const;

// 默认配置
const DEFAULT_CONFIG: ErrorHandlingConfig = {
  maxErrorsPerSecond: 10,
  enableConsoleOverride: true,
  ignoredWarnings: IGNORED_WARNING_MESSAGES,
};

// 简化的警告过滤器
class WarningFilter {
  static shouldIgnore(message: unknown): boolean {
    if (typeof message !== "string") return false;

    return IGNORED_WARNING_MESSAGES.some((warningMsg) =>
      message.includes(warningMsg)
    );
  }
}

// 错误限流器
class ErrorThrottler {
  private errorCount = 0;
  private lastErrorTime = 0;

  constructor(private readonly maxErrorsPerSecond: number) {}

  shouldThrottle(): boolean {
    const now = Date.now();
    if (now - this.lastErrorTime > 1000) {
      this.errorCount = 0;
      this.lastErrorTime = now;
    }

    if (this.errorCount >= this.maxErrorsPerSecond) {
      return true;
    }

    this.errorCount++;
    return false;
  }
}

// 错误处理器
class ErrorHandler {
  private isHandlingError = false;
  private readonly throttler: ErrorThrottler;

  constructor(
    private readonly customHandler?: ErrorHandlerFunction,
    maxErrorsPerSecond: number = 10
  ) {
    this.throttler = new ErrorThrottler(maxErrorsPerSecond);
  }

  private defaultHandler: ErrorHandlerFunction = (error, errorInfo) => {
    console.error("Caught an error:", error, errorInfo);
  };

  handle(error: Error | unknown, errorInfo: ErrorInfo): void {
    if (this.throttler.shouldThrottle()) {
      console.warn("Too many errors, throttling error handling");
      return;
    }

    if (this.isHandlingError) {
      console.warn(
        "Error occurred while handling another error, skipping to prevent potential infinite loop"
      );
      return;
    }

    this.isHandlingError = true;
    try {
      if (this.customHandler) {
        this.customHandler(error, errorInfo);
      } else {
        this.defaultHandler(error, errorInfo);
      }
    } catch (handlerError) {
      console.error("Error occurred in error handler:", handlerError);
    } finally {
      this.isHandlingError = false;
    }
  }
}

/**
 * @description: 全局运行时异常处理
 * @param {ErrorHandlerFunction} customErrorHandler
 * @param {Partial<ErrorHandlingConfig>} config
 */
export const setupGlobalErrorHandling = (
  customErrorHandler?: ErrorHandlerFunction,
  config: Partial<ErrorHandlingConfig> = {}
): GlobalErrorHandlingResult => {
  const finalConfig = { ...DEFAULT_CONFIG, ...config };
  const errorHandler = new ErrorHandler(
    customErrorHandler,
    finalConfig.maxErrorsPerSecond
  );

  // 设置 window.onerror 处理器
  window.onerror = (message, source, lineno, colno, error) => {
    errorHandler.handle(
      error || new Error(message as string),
      `window.onerror: ${source}:${lineno}:${colno}`
    );
    return true;
  };

  // 设置 unhandledrejection 事件处理器
  window.addEventListener("unhandledrejection", (event) => {
    errorHandler.handle(event.reason, "unhandledPromiseRejection");
  });

  if (finalConfig.enableConsoleOverride) {
    // 重写 console 方法
    const originalConsoleError = console.error;
    const originalConsoleWarn = console.warn;

    console.warn = (...args) => {
      if (WarningFilter.shouldIgnore(args[0])) return;
      originalConsoleWarn.apply(console, args);
    };

    console.error = (...args) => {
      if (WarningFilter.shouldIgnore(args[0])) return;
      errorHandler.handle(
        args[0] instanceof Error ? args[0] : new Error(args.join(" ")),
        "console.error"
      );
      originalConsoleError.apply(console, args);
    };
  }

  return {
    ExtendedError,
    handleError: errorHandler.handle.bind(errorHandler),
  };
};

使用方法

基础使用

最简单的方式调用：在index.tsx根组件中直接调用 setupGlobalErrorHandling 方法。

import { setupGlobalErrorHandling } from '@/utils/base/errorHandling';
// 最简单的使用方式
setupGlobalErrorHandling();

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

带自定义错误处理

在 index.tsx 中配置自定义错误处理：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { setupGlobalErrorHandling } from '@/utils/base/errorHandling';
// 自定义错误处理
setupGlobalErrorHandling((error, errorInfo) => {
  console.error("自定义处理错误：", error, errorInfo);
});

手动错误处理

获取 handleError 方法，并手动调用它处理自定义错误：

例如将handleError传递给ErrorBoundary的onError

const { handleError } = setupGlobalErrorHandling();
try {
  // 可能出错的代码
} catch (error) {
  handleError(error, "自定义错误信息");
}

//  index.tsx

<ErrorBoundary onError={(error, errorInfo) => handleError(error, errorInfo.componentStack || "")}>
// ...
</ErrorBoundary>

使用环境

开发环境可能需要看到这些警告，可以根据环境变量决定是否启用过滤：

if (!import.meta.env.DEV) {
  setupGlobalErrorHandling();
}

注意事项

1. 初始化时机

• 应在应用启动的最早期进行初始化
• 建议在入口文件（如 main.tsx 或 index.tsx）中设置

2. 开发环境考虑

• 开发环境可能需要看到这些警告，可以根据环境变量决定是否启用过滤

3. 警告过滤规则

• 可以通过修改 warningMessages 数组来添加新的过滤规则
• 每个规则支持多个条件的组合判断

4. 性能影响

• 该方案通过重写 console 方法实现，对性能影响极小
• 包含了错误处理频率限制，防止错误风暴

[yuzh0816]

治标不治本，但不失为一种解决办法🤣

[resetsix]

治标不治本，但不失为一种解决办法🤣

没办法，pro-components要兼容 antd v4，实在看不下去那些 warning。

[aniceking]

根本不起作用。。。

[SilentFlute]

function filterConsoleError() {
  // 配置需要过滤的错误消息
  const ignoredMessages = ['findDOMNode is deprecated'];

  const originalConsoleError = console.error;
  console.error = function (...args) {
    const message = args[0];
    if (!ignoredMessages.some((ignoredMessage) => message.includes(ignoredMessage))) {
      originalConsoleError.apply(console, args);
    }
  };
}

export default filterConsoleError;

我使用楼主这个报错, 后来参考了楼主的代码之后写了这个, 这能让这个报错不显示

[InfernalAzazel]

没有效果

[SilentFlute]

不应该啊, 整个代码是个工具函数, 然后在入口文件最开始处调用, 就是调用这个函数的时机能靠多前面就靠多前面

[shuangbofu]

感谢！终于摆脱牛皮癣一样的玩意了