logger

01무엇

logger는 컴파일 중 일어나는 이벤트를 받아 원하는 대로 기록하게 하는 옵션이다. 기본값은 null이다.

logEvent(filename, event) 하나를 가진 객체를 넘긴다.

['babel-plugin-react-compiler', {
  logger: {
    logEvent(filename, event) {
      console.log(`[Compiler] ${event.kind}: ${filename}`)
    },
  },
}]

02무슨 일이 일어나나

컴파일러가 함수를 하나씩 처리하면서, 그 결과를 이벤트로 넘겨준다. logEvent의 첫 인자는 파일 이름(string | null), 둘째 인자는 이벤트 객체다.

이벤트 객체의 kind가 종류를 가리킨다.

• CompileSuccess — 함수가 컴파일됨
• CompileError — 에러로 컴파일이 건너뛰어짐
• CompileDiagnostic — 치명적이지 않은 진단 정보
• CompileSkip — 다른 이유로 건너뜀
• PipelineError — 예기치 못한 컴파일 오류
• Timing — 성능 측정 정보

CompileError일 때 event.detail에는 reason, 선택적으로 description·loc(start: { line, column })·suggestions가 담긴다.

03사용법

어떤 컴포넌트가 컴파일되고 어떤 게 빠졌는지 집계할 때 쓴다. 종류별로 세어 보는 식이다.

const stats = { ok: 0, skipped: 0 }

module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      logger: {
        logEvent(filename, event) {
          if (event.kind === 'CompileSuccess') stats.ok++
          if (event.kind === 'CompileSkip' || event.kind === 'CompileError') {
            stats.skipped++
          }
        },
      },
    }],
  ],
}

04실무 예시

컴파일러를 처음 들일 때 "얼마나 잡히고 얼마나 빠지나"를 눈으로 확인하고 싶을 때가 있다. 빠진 함수와 이유를 파일별로 찍어 두면 이름 규칙이나 규칙 위반을 손보는 실마리가 된다.

logger: {
  logEvent(filename, event) {
    if (event.kind === 'CompileError') {
      console.warn(`건너뜀: ${filename} — ${event.detail?.reason}`)
    }
  },
}

05왜 중요한가

없어도 컴파일러는 잘 돈다. 도입 초기에 커버리지를 파악하거나 빌드 파이프라인에 진단을 심을 때만 필요한, 있으면 편한 관측 도구다. 대부분의 프로젝트는 손대지 않으며, ESLint 플러그인이나 React DevTools로도 충분한 경우가 많다.

Reference