📉 Silent Failures: 클라이언트 사이드 에러 모니터링 부재

Why Wrong?

How to Fix?

// index.js 또는 애플리케이션 진입점

console.log("애플리케이션 시작.");

function fetchData() {
  // 데이터를 가져오는 시뮬레이션 코드
  // 의도치 않게 null이 되는 경우가 있다고 가정합니다.
  const config = null; 
  
  // config가 null일 때 속성에 접근하면 TypeError가 발생합니다.
  // 이 에러는 전역적으로 처리되지 않으면 브라우저 콘솔에만 표시되고, 개발자는 알 수 없습니다.
  console.log(config.apiUrl); // Uncaught TypeError: Cannot read properties of null (reading 'apiUrl')
}

function performAsyncTask() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 비동기 작업 중 실패가 발생했지만, catch()로 처리되지 않은 경우
            reject(new Error("데이터베이스 연결 실패!")); // Unhandled Promise Rejection
        }, 500);
    });
}

// 페이지 로드 후 특정 시점에 실행되는 함수들
setTimeout(fetchData, 1000);
performAsyncTask();

console.log("애플리케이션이 실행 중입니다. 만약 에러가 발생해도 개발자는 알기 어렵습니다.");

// index.js 또는 애플리케이션 진입점

console.log("애플리케이션 시작.");

// 1. 전역 JavaScript 에러 핸들러 (동기 에러 처리)
// 'message', 'source', 'lineno', 'colno', 'error' 객체를 인자로 받습니다.
window.onerror = function(message, source, lineno, colno, error) {
  console.error('--- 전역 JS 에러 감지 (window.onerror) ---');
  console.error('메시지:', message);
  console.error('소스:', source);
  console.error('위치:', lineno, '줄,', colno, '컬럼');
  console.error('에러 객체:', error); // 에러 스택 트레이스 등 상세 정보
  
  // 여기에 실제 에러 모니터링 서비스(예: Sentry.captureException(error))로 에러를 전송하는 로직 추가
  
  // true를 반환하면 브라우저의 기본 에러 처리(콘솔 출력, 에러 심볼 표시 등)를 막습니다.
  return true; 
};

// 2. 전역 Unhandled Promise Rejection 핸들러 (비동기 에러 처리)
// 'event' 객체는 'reason' 속성을 통해 거부된 Promise의 값을 가집니다.
window.addEventListener('unhandledrejection', function(event) {
  console.error('--- 전역 Promise 거부 감지 (unhandledrejection) ---');
  console.error('거부 사유:', event.reason); // 주로 Error 객체이거나 Promise.reject()로 전달된 값
  
  // 여기에 실제 에러 모니터링 서비스(예: Sentry.captureException(event.reason))로 프로미스 거부를 전송하는 로직 추가
  
  // event.preventDefault()를 호출하여 브라우저의 기본 동작(콘솔 경고)을 방지합니다.
  event.preventDefault();
});


function fetchData() {
  const config = null; 
  console.log(config.apiUrl); // 이 에러는 window.onerror에 의해 감지됩니다.
}

function performAsyncTask() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error("데이터베이스 연결 실패!")); // 이 거부는 unhandledrejection에 의해 감지됩니다.
        }, 500);
    });
}

setTimeout(fetchData, 1000);
performAsyncTask();

console.log("애플리케이션이 실행 중입니다. 이제 발생한 에러를 전역적으로 감지할 수 있습니다.");

/*
React 애플리케이션의 경우, 컴포넌트 렌더링 단계에서 발생하는 에러를 잡기 위해
'Error Boundary' 컴포넌트를 사용하여 특정 UI 부분의 에러를 격리하고 폴백 UI를 제공할 수 있습니다.

예시:
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("React Error Boundary Caught:", error, errorInfo);
    // 여기에 Sentry 등 에러 모니터링 서비스로 에러를 전송하는 로직 추가
    this.setState({ error, errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <YourPotentiallyBuggyComponent />
    </ErrorBoundary>
  );
}
*/

You Might Also Like