前端项目 Warning 警告：别让“忽略”变成技术债，解锁排查思路

// 使用 React 错误边界隔离问题组件
class SafeFixZone extends React.Component {
  state = { hasError: false }
  
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  
  render() {
    if (this.state.hasError) return <div>Fix in progress</div>;
    return this.props.children;
  }
}

// 使用方式
<SafeFixZone>
  <ProblemComponent /> {/* 可能产生警告的组件 */}
</SafeFixZone>

# 使用 Jest 监视特定警告
jest --watch --testPathPattern=ProblemComponent.test.js

// 在 Sentry 中配置警告监控
Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [new Sentry.Integrations.GlobalHandlers()],
  beforeSend(event) {
    if (event.level === 'warning') return event; // 仅监控警告
    return null;
  }
});

# 使用 Webpack 构建时过滤特定警告
module.exports = {
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /Conflicting order\./ // 忽略 CSS 顺序警告
    })
  ]
};

// vue.config.js 中配置性能阈值
module.exports = {
  configureWebpack: {
    performance: {
      hints: 'warning',
      maxAssetSize: 5 * 1024 * 1024,   // 5MB 资源阈值
      maxEntrypointSize: 8 * 1024 * 1024 // 8MB 入口阈值
    }
  }
};

// 重写 console.warn 过滤特定警告
const originalWarn = console.warn;

console.warn = (...args) => {
  const message = args.join(' ');
  
  // 过滤 React 生命周期警告
  if (/componentWill.* has been renamed/.test(message)) return;
  
  // 过滤 key 属性警告
  if (/Each child in a list should have a unique "key"/.test(message)) return;
  
  originalWarn.apply(console, args);
};

Warning: Each child in a list should have a unique "key" prop.

// 错误示例
{users.map(user => <UserCard {...user} />)}

// 修复方案
{users.map(user => (
  <UserCard 
    key={user.id}      // 唯一标识符
    {...user} 
  />
))}

Warning: componentWillMount has been renamed...

// 错误示例
class Component extends React.Component {
  componentWillMount() {
    // 初始化操作
  }
}

// 修复方案
class Component extends React.Component {
  constructor(props) {
    super(props);
    // 迁移初始化操作
  }
  
  componentDidMount() {
    // 副作用操作移至此处
  }
}

chunk chunk-common [mini-css-extract-plugin] Conflicting order

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new CustomFilterPlugin({
        exclude: /Conflicting order\. Following module has been added:/
      })
    ]
  }
};

Unhandled promise rejection: TypeError: Cannot read property 'data' of undefined

// 危险写法
fetchData()
  .then(res => setData(res.data));

// 安全写法
fetchData()
  .then(res => setData(res.data))
  .catch(err => {
    console.error('Fetch failed', err);
    setError(true);
  });

// 或使用 async/await
useEffect(() => {
  const load = async () => {
    try {
      const res = await fetchData();
      setData(res.data);
    } catch (err) {
      setError(true);
    }
  };
  load();
}, []);

Can't perform a React state update on an unmounted component

/**
 * 用户个人资料组件
 * 
 * 该组件根据提供的用户ID获取并显示用户信息
 * 
 * @param {Object} props - 组件属性
 * @param {string} props.userId - 需要获取的用户ID
 * @returns {JSX.Element} 显示用户名的div元素
 */
function UserProfile({ userId }) {
  // 使用状态管理用户数据
  const [user, setUser] = useState(null);

  /**
   * 副作用钩子：根据userId变化获取用户数据
   * 
   * 包含组件卸载时的清理逻辑，防止在已卸载组件上设置状态
   */
  useEffect(() => {
    let isMounted = true;

    // 异步获取用户数据
    fetchUser(userId).then(data => {
      if (isMounted) setUser(data);
    });

    // 清理函数：组件卸载时设置挂载标志为false
    return () => {
      isMounted = false;
    };
  }, [userId]);

  // 渲染用户名（使用可选链操作符防止user为null时报错）
  return <div>{user?.name}</div>;
}

React Hook useEffect has missing dependencies: 'fetchData' and 'userId'

function UserProfile({ userId }) {
  const fetchData = useCallback(async () => {
    // 获取数据
  }, [userId]); // 依赖声明
  
  useEffect(() => {
    fetchData();
  }, [fetchData]); // 正确传递依赖
}

Warning: Failed prop type: Invalid prop 'count' of type 'string' supplied to 'Counter', expected 'number'

import PropTypes from 'prop-types';

/**
 * 计数器组件，接收一个数字并显示其双倍值
 * @param {Object} props - 组件属性
 * @param {number} props.count - 需要计算的基础数值
 * @returns {JSX.Element} 渲染显示count*2结果的div元素
 */
function Counter({ count }) {
  return <div>{count * 2}</div>;
}

// 定义组件属性类型检查
Counter.propTypes = {
  count: PropTypes.number.isRequired,
};

// 开发环境下保持类型检查（生产环境会通过babel插件移除以优化性能）
if (process.env.NODE_ENV !== 'production') {
  Counter.propTypes = {
    count: PropTypes.number.isRequired,
  };
}

Warning: findDOMNode is deprecated in StrictMode

// 废弃用法
const domNode = findDOMNode(this.refs.container);

// 推荐替代
const containerRef = useRef(null);

useEffect(() => {
  console.log('DOM node:', containerRef.current);
}, []);

return <div ref={containerRef}>Content</div>;

Warning: State updates from the useState() and useReducer() hooks don't support batching.

const handleClick = () => {
  setCount(count + 1);
  setLoading(true); 
  setData(fetchData());
}

// 方案1：手动批处理
ReactDOM.unstable_batchedUpdates(() => {
  setCount(c => c + 1);
  setLoading(true);
});

// 方案2：使用useReducer
const [state, dispatch] = useReducer(reducer, initialState);

dispatch({ type: 'UPDATE_ALL' });

Warning: [JSS] Rule is not linked. Missing sheet option "link: true".

const useStyles = makeStyles({
  root: { color: 'red' },
});

function Button() {
  const classes = useStyles();
  return <button className={classes.root}>Submit</button>;
}

// 方案1：启用link选项
const useStyles = makeStyles({
  root: { color: 'red' }
}, { link: true });

// 方案2：使用styled-components
const Button = styled.button`
  color: red;
`;

Warning: Can't perform a React state update on an unmounted component.

useEffect(() => {
  fetch('/api').then(res => {
    setData(res.data); // 可能组件已卸载
  });
}, []);

/**
 * React useEffect 钩子，用于在组件挂载时从 '/api' 端点获取数据
 * 
 * 该副作用执行异步数据获取，并仅在组件仍挂载时更新组件状态。
 * 包含清理逻辑，通过在获取完成前若组件卸载则取消状态更新来防止内存泄漏
 * 
 * @effect
 * @dependencies [] - 空依赖数组表示该副作用仅在组件挂载时运行一次
 * @returns {Function} 清理函数，在组件卸载时将 isMounted 标志设为 false
 */
useEffect(() => {
  // 标识组件是否仍挂载
  let isMounted = true;

  // 从API获取数据，仅在组件挂载时更新状态
  fetch('/api').then(res => {
    if (isMounted) setData(res.data);
  });

  // 组件卸载时运行的清理函数
  return () => {
    isMounted = false;
  };
}, []);

Warning: A component is changing an uncontrolled input to be controlled.

function Search() {
  const [query, setQuery] = useState(); // 初始undefined

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

function Search() {
  const [query, setQuery] = useState(''); // 初始空字符串

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

Warning: The value prop is required for the context provider

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider>
      {/* 缺少value */}
      <Header />
    </ThemeContext.Provider>
  );
}

// 方案1：提供默认值
const ThemeContext = createContext('light');

// 方案2：显式传递value
<ThemeContext.Provider value="dark">
  <Header />
</ThemeContext.Provider>

# 示例：Git 提交时自动检查
npx husky add .husky/pre-commit "npm run lint:fix && npm run build"

// 使用 Performance API 监控警告影响
const warningStart = performance.now();

// 触发警告的代码
const list = [1, 2, 3];
list.map(item => <div>{item}</div>);

const warningDuration = performance.now() - warningStart;
Sentry.captureMessage(`Key warning took ${warningDuration}ms`);

// .eslintrc.js 配置文件
module.exports = {
  // ESLint 规则配置
  rules: {
    // 强制要求 React Hooks 的依赖项必须完整声明（错误级别）
    'react-hooks/exhaustive-deps': 'error',
    // 当使用已废弃的 React API 时发出警告（警告级别） 
    'react/no-deprecated': 'warn',
  },

  // 文件覆盖配置（针对特定文件覆盖规则）
  overrides: [
    {
      // 匹配所有测试文件（*.test.js）
      files: ['**/*.test.js'],
      rules: {
        // 在测试文件中禁用 react-hooks/exhaustive-deps 规则
        'react-hooks/exhaustive-deps': 'off',
      },
    },
  ],
};

eslint --fix src/

npx react-codemod rename-unsafe-lifecycles

/**
 * Demo函数组件
 * 
 * 这是一个React函数组件，使用了React的useEffect Hook来执行副作用操作。
 * 注意：该组件包含一个潜在不安全的操作，已通过eslint-disable禁用相关规则检查。
 */
function Demo() {
  /**
   * useEffect Hook
   * 
   * 在组件挂载时执行一次unsafeOperation操作（依赖数组为空）。
   * 使用了eslint-disable跳过了react-hooks/exhaustive-deps规则的检查，
   * 这可能是因为该操作确实不需要任何依赖，或者是一个特殊用例。
   * 需要注意这种用法可能带来潜在风险，应确保unsafeOperation的安全性。
   */
  useEffect(() => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    unsafeOperation();
  }, []);
}