69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect } from 'react';
|
||
|
|
import { reportErrorToSlack } from '@/lib/error-reporting';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* ChunkLoadError 전역 감지 컴포넌트
|
||
|
|
*
|
||
|
|
* 배포 후 캐시된 구버전 JS 청크 로딩 실패를 감지하여 Slack으로 전송
|
||
|
|
* - window 'error' 이벤트: <script> 태그 로딩 실패
|
||
|
|
* - window 'unhandledrejection': dynamic import() 실패
|
||
|
|
*/
|
||
|
|
|
||
|
|
const CHUNK_ERROR_PATTERNS = [
|
||
|
|
'Loading chunk',
|
||
|
|
'ChunkLoadError',
|
||
|
|
'Failed to fetch dynamically imported module',
|
||
|
|
'error loading dynamically imported module',
|
||
|
|
];
|
||
|
|
|
||
|
|
function isChunkError(message: string): boolean {
|
||
|
|
return CHUNK_ERROR_PATTERNS.some((pattern) =>
|
||
|
|
message.toLowerCase().includes(pattern.toLowerCase())
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendReport(message: string, stack?: string) {
|
||
|
|
reportErrorToSlack({
|
||
|
|
errorType: 'CHUNK_LOAD_ERROR',
|
||
|
|
message,
|
||
|
|
pageUrl: window.location.href,
|
||
|
|
timestamp: new Date().toISOString(),
|
||
|
|
stack: stack?.slice(0, 500),
|
||
|
|
userAgent: navigator.userAgent,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ChunkErrorHandler() {
|
||
|
|
useEffect(() => {
|
||
|
|
function handleError(event: ErrorEvent) {
|
||
|
|
if (event.message && isChunkError(event.message)) {
|
||
|
|
sendReport(event.message, event.error?.stack);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleRejection(event: PromiseRejectionEvent) {
|
||
|
|
const reason = event.reason;
|
||
|
|
const message =
|
||
|
|
reason instanceof Error ? reason.message : String(reason ?? '');
|
||
|
|
if (isChunkError(message)) {
|
||
|
|
sendReport(
|
||
|
|
message,
|
||
|
|
reason instanceof Error ? reason.stack?.slice(0, 500) : undefined
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('error', handleError);
|
||
|
|
window.addEventListener('unhandledrejection', handleRejection);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener('error', handleError);
|
||
|
|
window.removeEventListener('unhandledrejection', handleRejection);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return null;
|
||
|
|
}
|