import React, { Component } from 'react';

// 定義一個(gè)錯(cuò)誤邊界組件，繼承自 React.Component
class ErrorBoundary extends Component {
    // 構(gòu)造函數(shù)，初始化狀態(tài)
    constructor(props) {
        super(props);
        // 定義一個(gè) state 變量 hasError，用于標(biāo)記是否發(fā)生錯(cuò)誤
        this.state = { hasError: false };
    }

    // 靜態(tài)方法，當(dāng)子組件拋出錯(cuò)誤時(shí)會(huì)被調(diào)用
    static getDerivedStateFromError(error) {
        // 更新 state 中的 hasError 為 true，表示發(fā)生了錯(cuò)誤
        return { hasError: true };
    }

    // 當(dāng)錯(cuò)誤發(fā)生時(shí)會(huì)調(diào)用這個(gè)方法，可以在這里進(jìn)行錯(cuò)誤日志記錄等操作
    componentDidCatch(error, errorInfo) {
        // 這里可以添加代碼將錯(cuò)誤信息發(fā)送到服務(wù)器進(jìn)行日志記錄
        console.log('錯(cuò)誤信息:', error);
        console.log('錯(cuò)誤詳情:', errorInfo);
    }

    // 渲染方法
    render() {
        // 如果 hasError 為 true，說(shuō)明發(fā)生了錯(cuò)誤，渲染備用的 UI
        if (this.state.hasError) {
            return <div>哎呀，這里好像出了點(diǎn)問(wèn)題，請(qǐng)稍后再試！</div>;
        }
        // 如果沒(méi)有錯(cuò)誤，正常渲染子組件
        return this.props.children;
    }
}

export default ErrorBoundary;

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

// 定義一個(gè)可能會(huì)出錯(cuò)的組件
const ProblematicComponent = () => {
    // 模擬一個(gè)錯(cuò)誤，這里會(huì)拋出一個(gè)未定義變量的錯(cuò)誤
    throw new Error('哎呀，我出錯(cuò)啦！');
    return <div>這是一個(gè)可能會(huì)出錯(cuò)的組件</div>;
};

const App = () => {
    return (
        <div>
            <h1>我的 React 應(yīng)用</h1>
            {/* 使用錯(cuò)誤邊界組件包裹可能會(huì)出錯(cuò)的組件 */}
            <ErrorBoundary>
                <ProblematicComponent />
            </ErrorBoundary>
        </div>
    );
};

export default App;

import React from 'react';

???????const MyComponent = () => {
    try {
        // 模擬一個(gè)會(huì)拋出錯(cuò)誤的操作
        const result = 1 / 0; // 這里會(huì)拋出除零錯(cuò)誤
        return <div>結(jié)果: {result}</div>;
    } catch (error) {
        return <div>出錯(cuò)啦: {error.message}</div>;
    }
};

export default MyComponent;

import React, { useEffect, useState } from 'react';

const MyAsyncComponent = () => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data');
                if (!response.ok) {
                    throw new Error('網(wǎng)絡(luò)請(qǐng)求失敗');
                }
                const jsonData = await response.json();
                setData(jsonData);
            } catch (err) {
                setError(err.message);
            }
        };

        fetchData();
    }, []);

    if (error) {
        return <div>出錯(cuò)啦: {error}</div>;
    }

    if (data) {
        return <div>數(shù)據(jù): {JSON.stringify(data)}</div>;
    }

    return <div>加載中...</div>;
};

export default MyAsyncComponent;

window.onerror = function (message, source, lineno, colno, error) {
    console.log('全局錯(cuò)誤捕獲:', message);
    // 可以在這里添加代碼將錯(cuò)誤信息發(fā)送到服務(wù)器進(jìn)行日志記錄
    return true; // 返回 true 可以阻止錯(cuò)誤冒泡
};

import ReactDOM from 'react-dom/client';
import App from './App';

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

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

window.addEventListener('error', (event) => {
    console.log('React 錯(cuò)誤捕獲:', event.message);
    // 可以在這里添加代碼將錯(cuò)誤信息發(fā)送到服務(wù)器進(jìn)行日志記錄
});

import React from 'react';

const MyComponent = () => {
    const handleClick = () => {
        try {
            // 可能會(huì)出錯(cuò)的代碼
            throw new Error('事件處理出錯(cuò)');
        } catch (error) {
            console.log('捕獲到事件處理中的錯(cuò)誤:', error.message);
        }
    };

    return (
        <button onClick={handleClick}>點(diǎn)擊我</button>
    );
};

export default MyComponent;

import React, { Component } from 'react';

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

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        console.log('錯(cuò)誤信息:', error);
        console.log('錯(cuò)誤詳情:', errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return <div>哎呀，這里好像出了點(diǎn)問(wèn)題，請(qǐng)稍后再試！</div>;
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

import React, { useEffect, useState } from 'react';

const MyAsyncComponent = () => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data');
                if (!response.ok) {
                    throw new Error('請(qǐng)求失敗');
                }
                const jsonData = await response.json();
                setData(jsonData);
            } catch (err) {
                setError(err.message);
            }
        };

        fetchData();
    }, []);

    if (error) {
        return <div>錯(cuò)誤: {error}</div>;
    }

    if (data) {
        return <div>數(shù)據(jù): {JSON.stringify(data)}</div>;
    }

    return <div>加載中...</div>;
};

export default MyAsyncComponent;

// 在入口文件中添加
window.onerror = function (message, source, lineno, colno, error) {
    console.log('全局錯(cuò)誤捕獲:', message);
    // 可添加代碼將錯(cuò)誤信息發(fā)送到服務(wù)器
    return true; 
};

window.addEventListener('error', (event) => {
    console.log('全局錯(cuò)誤捕獲:', event.message);
    // 可添加代碼將錯(cuò)誤信息發(fā)送到服務(wù)器
});

import ReactDOM from 'react-dom/client';
import App from './App';

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

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

window.addEventListener('error', (event) => {
    console.log('React 錯(cuò)誤捕獲:', event.message);
    // 可添加代碼將錯(cuò)誤信息發(fā)送到服務(wù)器
});

import React, { useEffect } from 'react';

const MyEffectComponent = () => {
    useEffect(() => {
        const cleanup = () => {
            try {
                // 模擬清理時(shí)可能出錯(cuò)的操作
                throw new Error('清理出錯(cuò)');
            } catch (error) {
                console.log('清理副作用時(shí)出錯(cuò):', error.message);
            }
        };

        return cleanup;
    }, []);

    return <div>組件內(nèi)容</div>;
};

export default MyEffectComponent;