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:
61
src/hooks/useGlobalErrorHandler.js
Normal file
61
src/hooks/useGlobalErrorHandler.js
Normal 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);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user