vf_react/src/hooks/useGlobalErrorHandler.js

// src/hooks/useGlobalErrorHandler.js
// 全局错误处理 Hook

import { useEffect } from 'react';
import { logger } from '../utils/logger';

/**
 * 全局错误处理 Hook
 * 捕获未处理的 Promise rejection 和全局错误
 *
 * @example
 * function App() {
 *   useGlobalErrorHandler();
 *   return <div>...</div>;
 * }
 */
export function useGlobalErrorHandler() {
    useEffect(() => {
        /**
         * 处理未捕获的 Promise rejection
         */
        const handleUnhandledRejection = (event) => {
            logger.error(
                'App',
                'unhandledRejection',
                event.reason instanceof Error ? event.reason : new Error(String(event.reason)),
                { promise: event.promise }
            );
            // 阻止默认的错误处理（防止崩溃）
            event.preventDefault();
        };

        /**
         * 处理全局错误
         */
        const handleError = (event) => {
            logger.error(
                'App',
                'globalError',
                event.error || new Error(event.message),
                {
                    filename: event.filename,
                    lineno: event.lineno,
                    colno: event.colno
                }
            );
            // 阻止默认的错误处理（防止崩溃）
            event.preventDefault();
        };

        // 注册事件监听器
        window.addEventListener('unhandledrejection', handleUnhandledRejection);
        window.addEventListener('error', handleError);

        // 清理函数
        return () => {
            window.removeEventListener('unhandledrejection', handleUnhandledRejection);
            window.removeEventListener('error', handleError);
        };
    }, []);
}