프론트엔드 개발을 위한 클라이언트 측 로깅
이 안내서에는 GitLab 프론트엔드 개발을 위한 클라이언트 측 로깅의 최상의 관행이 포함되어 있습니다.
브라우저 콘솔에 로깅해야 하는 시기
우리는 브라우저 콘솔에 불필요하게 로그를 남기고 싶지 않습니다. 지나치게 시끄러운 콘솔 로그는 읽거나 구문 분석하기, 또는 처리하기 쉽지 않습니다. 그러나 시스템 내에서 의도하지 않은 이벤트에 대한 가시성을 제공하고 싶습니다. 실행 시 예상치 못한 예외가 발생하면 해당 예외의 세부 정보를 로깅하고 싶습니다. 이러한 로그는 문제를 진단하는 기여자들이 문제를 해결하거나 문제를 생성하는 최종 사용자들에게 유용한 맥락을 제공할 수 있습니다.
catch(e)가 있고 e가 예상치 못한 것이라면 세부 정보를 로그로 기록하세요.
에러를 예상치 못하게 만드는 것은 무엇인가요?
가끔씩 잡힌 예외는 표준 작업의 일부일 수 있습니다. 예를 들어, 외부 라이브러리는 특정 입력에 기반하여 예외를 발생시킬 수 있습니다. 만약 이러한 예외를 안정적으로 처리할 수 있다면 예상할 수 있는 예외입니다. 시끄럽게 로깅하지 마세요.
예:
javascript
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를 import하고, 일반적으로 console.error를 사용하는 대로 사용하세요. 실제 Error 객체를 전달하여 스택 추적과 기타 세부 정보가 로그에 캡처되도록 합니다.
// 1. logger 모듈을 import합니다.
import { logError } from '~/lib/logger';
export const doThing = () => {
return foo()
.then(() => {
// ...
})
.catch(e => {
// 2. `console.error`를 사용하는 대로 `logError`를 사용합니다.
logError('일 중에 예상치 못한 오류가 발생했습니다', e);
// 사용자에게 나쁜 일이 발생했다고 표시할 지 여부를 결정할 수 있습니다.
showThingFailed();
});
};
프론트엔드 관측과의 관련
클라이언트 측 로깅은 프론트엔드 관측과 밀접한 관련이 있습니다. 예상치 못한 오류가 모니터링 시스템에서 관측되기를 원하며, 이를 통해 사용자가 직면한 문제에 신속하게 대응할 수 있습니다. 여러 이유로 모든 로그를 모니터링 시스템에 보내는 것은 불가능합니다. ~/lib/logger를 사용하는 것을 꺼리지 말고, 어떤 메시지가 실제로 모니터링 시스템으로 전송되는지를 제어하는 것을 고려해보세요.
일관된 로깅 모듈을 사용하면 다양한 진입 지점에서 이러한 부작용을 일관되게 제어할 수 있습니다.
도움말