React.js应用整体崩溃时如何隐藏错误信息

核心实现：错误边界（Error Boundary） #

React 16及以上版本官方提供了错误边界组件能力，可捕获子组件树内的JavaScript错误，阻止错误冒泡导致应用整体崩溃，同时支持自定义崩溃后的展示内容、执行重定向逻辑，完全不会暴露默认的错误栈信息。

基础错误边界实现代码 #

目前仅支持类组件实现错误边界，示例如下：

import { Component } from 'react';
import { Navigate } from 'react-router-dom'; // 引入路由能力用于重定向

class AppErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      shouldRedirect: false
    };
  }

  // 捕获错误后更新状态，用于渲染兜底内容
  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 此处可将错误上报到内部日志系统，仅后台可见，不会暴露给前端用户
    console.error('应用运行错误：', error, info);
    // 如需3秒后自动跳转到错误页，可打开下方注释
    // setTimeout(() => {
    //   this.setState({ shouldRedirect: true })
    // }, 3000)
  }

  render() {
    // 触发重定向逻辑
    if (this.state.shouldRedirect) {
      return <Navigate to="/custom-error-page" replace />;
    }

    // 自定义崩溃后的展示内容，完全替代默认错误提示
    if (this.state.hasError) {
      return (
        <div style={{ padding: '3rem', textAlign: 'center' }}>
          <h2>页面暂时无法访问</h2>
          <p>我们正在排查问题，您可以尝试刷新页面或稍后再试</p>
          <button onClick={() => window.location.reload()}>刷新重试</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default AppErrorBoundary;

组件使用方式 #

在应用根节点外层包裹错误边界，即可覆盖整个应用的子组件错误捕获：

// 根组件App.jsx
import AppErrorBoundary from './AppErrorBoundary';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import CustomErrorPage from './CustomErrorPage'; // 自行实现的通用错误页
import Home from './Home';
// 其他业务页面引入...

function App() {
  return (
    <BrowserRouter>
      <AppErrorBoundary>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/custom-error-page" element={<CustomErrorPage />} />
          {/* 其他业务路由配置 */}
        </Routes>
      </AppErrorBoundary>
    </BrowserRouter>
  );
}

export default App;

注意事项 #

• 错误边界无法覆盖以下场景的错误，可配合try/catch额外处理：
  • 事件处理函数内部抛出的错误
  • 异步代码（setTimeout、接口请求回调等）抛出的错误
  • 错误边界组件自身抛出的错误
  • 服务端渲染阶段产生的错误
• React生产构建版本默认不会向用户暴露具体错误栈信息，开发环境的错误提示仅用于本地调试，打包上线后不会展示，配合错误边界可完全隐藏所有错误相关的敏感信息。
• 如需更灵活的调用方式，也可直接使用react-error-boundary开源封装库，支持hooks调用、重置状态等扩展能力。

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