프론트엔드 개발을 위한 클라이언트 측 로깅
이 안내서에는 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('예상치 못한 일이 발생했습니다...');
}
}
오류를 로깅하는 방법
~/lib/logger 모듈의 도움을 받아 로깅
GitLab에서 런타임 오류를 일관되게 로깅할 수 있는 ~/lib/logger 모듈이 있습니다. 이 모듈에서 logError를 가져와서 console.error를 사용하는 것과 마찬가지로 사용하세요. 실제 Error 객체를 전달하여 스택 추적 및 기타 세부 정보를 로그에 캡처하세요.
// 1. 로거 모듈을 가져옵니다.
import { logError } from '~/lib/logger';
export const doThing = () => {
return foo()
.then(() => {
// ...
})
.catch(e => {
// 2. `logError`를 `console.error`처럼 사용하세요.
logError('일 중에 예상치 못한 오류가 발생했습니다', e);
// 최종 사용자에게 어떤 문제가 발생했는지 안내해도 되고 안내하지 않아도 됩니다.
showThingFailed();
});
};
프론트엔드 관측과의 관련
클라이언트 측 로깅은 프론트엔드 관측과 밀접한 관련이 있습니다. 예기치 못한 오류는 모니터링 시스템에서 관찰되기를 원하므로 사용자에게 빠르게 대응할 수 있습니다. 여러 이유로 모든 로그를 모니터링 시스템으로 보내는 것은 현실적으로 불가능합니다. ~/lib/logger를 사용하는 것을 꺼리지 마세요. 그러나 ~/lib/logger로 전달되는 메시지를 모니터링 시스템으로 실제로 전송할 것인지 고려해야 합니다.
일관된 로깅 모듈은 다양한 입구 지점에서 이러한 부작용을 일관되게 제어하는 데 도움이 됩니다.
도움말