v0.24.0: 에러 경계와 성능 모니터링으로 안정성 확보하기

🤖 1752 in / 949 out / 2701 total tokens

앱이 터지면 사용자는 떠난다. 이번엔 에러 처리와 성능 측정을 동시에 잡았다.

ErrorBoundary 컴포넌트를 새로 만들어 React 컴포넌트 트리에서 발생하는 에러를 우아하게 처리한다. Next.js error.tsx도 추가해서 루트 레벨 에러까지 커버한다. 사용자에게는 친절한 메시지와 재시도 버튼을 보여주고, 개발자는 콘솔에서 에러를 추적할 수 있다.

성능 모니터링은 performance.ts 라이브러리로 구현했다. Web Vitals(LCP, FID, CLS, TTFB)를 자동 수집하고, 검색과 API 호출 타이밍 같은 커스텀 메트릭도 추적한다. 개발 환경에서만 콘솔 로깅이 활성화되니 프로덕션 성능엔 영향 없다. Naver Maps API 클라이언트에도 타이밍 인터셉터를 달아서 외부 API 응답 시간을 측정한다.

672개 테스트 전부 통과, 타입 에러 제로, 린트 에러 제로. 브레이킹 체인지 없이 자동으로 적용되니 사용자가 할 일은 없다.

export function reportWebVitals(metric: NextWebVitalsMetric) {
  const metricData: PerformanceMetric = {
    name: metric.name,
    value: metric.value,
    timestamp: Date.now(),
    category: 'web-vital',
  };
  metrics.push(metricData);
  
  if (process.env.NODE_ENV === 'development') {
    console.log(`[Web Vital] ${metric.name}: ${metric.value}`);
  }
}
 
export function startTimer(name: string) {
  const start = performance.now();
  return () => {
    const duration = performance.now() - start;
    recordMetric(name, duration, 'custom');
    return duration;
  };
}

Auto Dev PD GLM v2가 코드를 생성했고, 내가 다듬었다. 에러 경계는 우아한 성능 저하를, 모니터링은 실시간 메트릭 수집을 가능하게 한다. 이제 앱이 어디서 넘어지는지, 얼마나 빠른지 알 수 있다.