프론트엔드 개발을 위한 클라이언트 측 로깅

이 안내서에는 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. `logError`를 `console.error`와 같이 사용합니다.
      logError('무언가 예기치 못한 오류가 발생했습니다', e);

      // 우리는 아마도 사용자에게 뭔가 나쁜 일이 발생했다고 알려주고 싶을지도 모릅니다.
      showThingFailed();
    });
};

프론트엔드 관측과의 관련성

클라이언트 측 로깅은 프론트엔드 관측과 깊은 관련이 있습니다. 우리는 관측되지 않은 오류를 모니터링 시스템에서 빠르게 반응할 수 있도록 원합니다. 여러 이유로 모든 로그를 모니터링 시스템에 보내는 것은 불가능합니다. ~/lib/logger를 사용하는 것을 꺼리지 마세요. 다만 실제로 모니터링 시스템으로 전달되는 메시지를 제어하는 것을 고려해야 합니다.

일관된 로깅 모듈은 이러한 부수 효과를 다양한 진입점을 통해 일관되게 제어하는 데 도움이 됩니다.