feat: 提取全局错误处理为自定义 Hook

- 创建 useGlobalErrorHandler Hook (61行)
- 封装 Promise rejection 和全局错误的捕获逻辑
- 统一使用 logger 记录错误信息

优势:
- 错误处理逻辑可复用
- App.js 减少 30+ 行代码
- 便于单独测试和维护

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-10-30 14:56:30 +08:00
parent 941b8368ab
commit 9cd7cf8714

View File

@@ -0,0 +1,61 @@
// 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);
};
}, []);
}