有時候某個js加載失敗會導致頁面報錯，不能正常展示 例如Something went wrong
如圖

錯誤示例

寫一個錯誤捕獲的組件

注意：這個組件只有在打包后才生效抚官，本地運行是不能捕獲到錯誤的

import { RedoOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import React, { Component } from 'react';
import './error.less';

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

  componentDidCatch(error, info) {
    // 你可以在這里處理錯誤信息，例如發(fā)送到服務器記錄
    console.error('ErrorBoundary caught an error', error, info);
    this.setState({ hasError: true });
  }
  refresh() {
    window.location.reload();
  }

  render() {
    if (this.state.hasError) {
      // 可以在這里渲染一個錯誤提示
      return (
        <>
          <div className="error-container">
            <h1 className="error-title">頁面出現(xiàn)錯誤</h1>
            <p className="error-message">
              很抱歉阶捆，資源加載失敗凌节，導致頁面無法正常顯示。
            </p>
            <div className="error-details">
              <p>描述: 資源加載失敗</p>
              <p>
                建議:
                請檢查網(wǎng)絡狀態(tài)并刷新重試洒试，如果問題依舊倍奢，請聯(lián)系我們的技術(shù)支持。
              </p>
              <p style={{ textAlign: 'center' }}>
                <Button
                  type="primary"
                  className="mr-20"
                  icon={<RedoOutlined />}
                  onClick={this.refresh}
                >
                  刷新重試
                </Button>
              </p>
            </div>
          </div>
        </>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

error.less文件

.error-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 10%);
  margin-top: 216px;

  p {
    padding: 10px;
  }
}

.error-title {
  color: #d9534f;
  font-size: 24px;
  margin-bottom: 10px;
}

.error-message {
  color: #333;
  font-size: 18px;
  margin-bottom: 20px;
}

.error-details {
  color: #777;
  font-size: 14px;
}

在全局組件外面用錯誤組件包裹住頁面

示例

效果