클라이언트 측 로깅을 위한 프론트엔드 개발
이 가이드는 GitLab 프론트엔드 개발을 위한 클라이언트 측 로깅의 모범 사례를 포함하고 있습니다.
브라우저 콘솔에 로그를 남겨야 하는 경우
우리는 불필요하게 브라우저 콘솔에 로그를 남기고 싶지 않습니다. 지나치게 시끄러운 콘솔 로그는 읽거나, 구문 분석하거나, 처리하기가 쉽지 않습니다. 우리는 시스템에서 의도하지 않은 이벤트에 대한 가시성을 제공하고 싶습니다. 런타임 중에 가능하지만 예상치 못한 예외가 발생하면 이 예외의 세부 정보를 기록하고 싶습니다. 이러한 로그는 문제를 진단하는 기여자 또는 문제를 제기하는 최종 사용자에게 상당히 유용한 컨텍스트를 제공할 수 있습니다.
catch(e)가 존재할 때마다, 그리고 e가 예상치 못한 것일 때, 세부 정보를 로그에 기록하십시오.
오류를 예상하지 못하게 만드는 요소는 무엇인가요?
때때로 잡힌 예외는 표준 작업의 일부일 수 있습니다. 예를 들어, 타사 라이브러리는 특정 입력에 따라 예외를 던질 수 있습니다. 우리가 이러한 예외를 우아하게 처리할 수 있다면, 이는 예상되는 것입니다. 시끄럽게 로그를 남기지 마십시오.
예를 들어:
try {
// 여기서는 사용자 입력을 기반으로 메서드를 호출합니다.
// `doAThing`은 입력이 유효하지 않은 경우 예외를 던질 것입니다.
const userInput = getUserInput();
doAThing(userInput);
} catch (e) {
if (e instanceof FooSyntaxError) {
// `FooSyntaxError`를 처리하기 위해 우리는 사용자에게 입력을 변경하라고 지시할 필요가 있습니다.
// 이는 예상치 못한 것이 아니며 표준 작업의 일부입니다.
setUserMessage(`더 나은 코드를 작성해 보세요. ${e.message}`);
} else {
// 우리는 `e`가 무엇인지 확실치 않으므로 예상치 못한 나쁜 일이 발생했습니다...
logError(e);
setUserMessage('예상치 못한 일이 발생했습니다...');
}
}
오류를 기록하는 방법
우리는 GitLab에서 런타임 오류를 일관되게 기록하는 방법을 캡슐화한 유용한 ~/lib/logger 모듈을 가지고 있습니다. 이 모듈에서 logError를 가져오고, 일반적으로 console.error와 같은 방식으로 사용하십시오. 실제 Error 객체를 전달하여 스택 추적 및 기타 세부 정보를 로그에 포함시킬 수 있습니다:
// 1. 로거 모듈을 가져옵니다.
import { logError } from '~/lib/logger';
export const doThing = () => {
return foo()
.then(() => {
// ...
})
.catch(e => {
// 2. `console.error`처럼 `logError`를 사용하십시오.
logError('작업을 수행하는 동안 예상치 못한 오류가 발생했습니다', e);
// 우리는 최종 사용자에게 나쁜 일이 발생했음을 알리고 싶을 수도 있고, 그렇지 않을 수도 있습니다.
showThingFailed();
});
};
프론트엔드 관측성과의 관계
클라이언트 측 로깅은 프론트엔드 관측성과 강하게 연결되어 있습니다. 우리는 예상치 못한 오류가 모니터링 시스템에 의해 관찰되기를 원하므로 사용자 측 문제에 신속하게 대응할 수 있습니다. 여러 가지 이유로 인해 모든 로그를 모니터링 시스템으로 전송하는 것은 불가능합니다. ~/lib/logger를 사용하는 것을 주저하지 마십시오. 그러나 실제로 모니터링 시스템으로 전송되는 메시지를 제어하는 것을 고려하십시오.
일관된 로깅 모듈은 다양한 진입점에서 이러한 부작용을 일관되게 제어하는 데 도움이 됩니다.
도움말