61. 자바스크립트 에러 로깅과 모니터링 (Error Logging and Monitoring)

에러 로깅과 모니터링 (Error Logging and Monitoring)

자바스크립트 애플리케이션에서 에러는 언제든 발생할 수 있다. 에러 로깅과 모니터링을 잘하면 문제를 빠르게 파악하고, 사용자 경험을 개선할 수 있다. 이번에는 에러를 기록하고 추적하는 방법을 기본부터 심화까지 코드와 함께 자세히 풀어보려고 한다.

에러를 체계적으로 관리하면 코드 안정성이 높아지고, 문제 해결이 쉬워진다. 단계별로 하나씩 살펴보자.

기본적인 에러 로깅

가장 간단한 방법은 console.error로 에러를 기록하는 것이다:

try {
    let data = JSON.parse("잘못된 JSON");
    console.log(data);
} catch (error) {
    console.error("에러 발생: ", error);
}
// "에러 발생: " SyntaxError: Unexpected token � in JSON at position 0

console.error로 에러 메시지와 객체를 출력했다. 개발 중에는 유용하지만, 운영 환경에서는 더 체계적인 로깅이 필요하다.

1. 에러 객체 상세 기록

에러의 세부 정보를 기록하면 디버깅이 쉬워진다:

function logError(error) {
    const errorDetails = {
        message: error.message,
        stack: error.stack,
        time: new Date().toISOString()
    };
    console.error("에러 상세: ", errorDetails);
}

try {
    throw new Error("테스트 에러");
} catch (error) {
    logError(error);
}
// "에러 상세: " { message: "테스트 에러", stack: "...", time: "2025-03-19T..." }

메시지, 스택 트레이스, 발생 시간을 객체로 만들어 기록했다. 문제의 원인을 추적하기 좋아진다.

2. 비동기 에러 로깅

비동기 작업에서도 에러를 기록할 수 있다:

async function fetchData() {
    const response = await fetch("https://invalid.url");
    return response.json();
}

async function process() {
    try {
        await fetchData();
    } catch (error) {
        const log = {
            message: error.message,
            stack: error.stack,
            time: new Date().toISOString()
        };
        console.error("비동기 에러: ", log);
    }
}

process();
// "비동기 에러: " { message: "Failed to fetch", stack: "...", time: "2025-03-19T..." }

try-catch로 비동기 에러를 잡고 상세 로그를 남겼다.

3. 서버로 에러 전송

운영 환경에서는 에러를 서버로 보내 모니터링할 수 있다:

function sendErrorToServer(error) {
    const log = {
        message: error.message,
        stack: error.stack,
        time: new Date().toISOString(),
        userAgent: navigator.userAgent
    };
    fetch("https://your-api.com/error", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(log)
    }).catch(err => console.error("전송 실패: ", err));
}

try {
    throw new Error("운영 에러");
} catch (error) {
    sendErrorToServer(error);
}

fetch로 에러를 서버로 보내고, 사용자 정보도 추가했다. 서버에서 이를 저장하면 실시간 모니터링이 가능하다.

4. window.onerror로 전역 에러 잡기

처리되지 않은 에러를 전역적으로 잡을 수 있다:

window.onerror = function (message, source, lineno, colno, error) {
    const log = {
        message,
        source,
        line: lineno,
        column: colno,
        stack: error ? error.stack : "없음",
        time: new Date().toISOString()
    };
    console.error("전역 에러: ", log);
    return true; // 기본 에러 표시 방지
};

throw new Error("전역 테스트");
// "전역 에러: " { message: "전역 테스트", source: "...", line: ..., column: ..., stack: "...", time: "2025-03-19T..." }

window.onerror로 잡히지 않은 에러를 기록하고, 기본 에러 팝업을 막았다.

5. 모니터링 시스템 연동

Sentry 같은 외부 서비스와 연동하면 더 강력해진다:

// Sentry 초기화 (가정)
Sentry.init({ dsn: "https://your-dsn@sentry.io" });

function logWithSentry(error) {
    Sentry.captureException(error, {
        extra: {
            userAgent: navigator.userAgent,
            time: new Date().toISOString()
        }
    });
}

try {
    throw new Error("Sentry 테스트");
} catch (error) {
    logWithSentry(error);
}

Sentry로 에러를 전송하고 추가 데이터를 붙였다. 대시보드에서 실시간으로 확인할 수 있다.

6. 커스텀 에러 로깅

커스텀 에러 클래스로 구체적인 로깅을 할 수 있다:

class ValidationError extends Error {
    constructor(message, field) {
        super(message);
        this.name = "ValidationError";
        this.field = field;
    }
}

function logCustomError(error) {
    const log = {
        name: error.name,
        message: error.message,
        field: error.field || "없음",
        stack: error.stack,
        time: new Date().toISOString()
    };
    console.error("커스텀 에러: ", log);
}

try {
    throw new ValidationError("잘못된 입력", "email");
} catch (error) {
    logCustomError(error);
}
// "커스텀 에러: " { name: "ValidationError", message: "잘못된 입력", field: "email", stack: "...", time: "2025-03-19T..." }

커스텀 속성을 추가해서 에러의 맥락을 더 풍부하게 기록했다.

7. 모니터링 알림 설정

중요 에러 발생 시 알림을 받을 수 있다:

async function notifyError(error) {
    const log = {
        message: error.message,
        stack: error.stack,
        time: new Date().toISOString()
    };
    await fetch("https://your-api.com/notify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ log, level: "critical" })
    });
}

try {
    throw new Error("심각한 에러");
} catch (error) {
    notifyError(error);
}

서버로 에러를 보내고, 이를 슬랙이나 이메일로 알림 설정할 수 있다.

8. 성능과 가독성에 미치는 영향

에러 로깅과 모니터링이 개발에 어떤 영향을 주는지 보자:

- 성능: 로깅과 전송은 약간의 오버헤드를 추가하지만, 문제 발견 속도를 높인다.

- 가독성: 체계적인 로그는 코드 상태를 이해하기 쉽게 한다.

서버 전송으로 실시간 추적을 하고, 커스텀 로그로 세부 정보를 강화하는 점이 핵심이다.

마무리

에러 로깅과 모니터링은 단순히 콘솔 출력에서 시작해서 서버 연동, 전역 관리, 외부 서비스 활용까지 확장된다. 이를 통해 문제를 사전에 감지하고, 안정적인 애플리케이션을 유지할 수 있다.