panicThreshold

01무엇

panicThreshold는 컴파일러가 에러를 만났을 때 어떻게 반응할지 정하는 옵션이다. 기본값은 'none'이다.

['babel-plugin-react-compiler', {
  panicThreshold: 'none', // 기본값이자 권장값
}]

02무슨 일이 일어나나

세 값에 따라 에러가 빌드를 멈추는 문턱이 달라진다.

• 'none'(기본·권장) — 컴파일 못 하는 컴포넌트는 건너뛰고 빌드를 계속한다. 그 컴포넌트는 최적화 없이 정상 동작한다.
• 'critical_errors' — 치명적 컴파일 에러에서만 빌드를 실패시킨다.
• 'all_errors' — 어떤 컴파일 진단이든 만나면 빌드를 실패시킨다.

'none'에서 컴파일러는 문제 있는 코드를 스스로 감지해 알아서 건너뛴다.

03사용법

프로덕션 빌드는 항상 'none'으로 둔다. 빌드가 컴파일러 문제로 깨지지 않고, 최적화 못 하는 컴포넌트만 원래대로 돌아 배포가 안정된다.

module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      panicThreshold: 'none',
    }],
  ],
}

04실무 예시

더 엄격한 값은 개발 중 디버깅에만 쓴다. 어떤 컴포넌트가 왜 안 잡히는지 드러내고 싶을 때, 환경에 따라 문턱을 바꾼다.

const isDev = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      // 개발에선 에러를 드러내고, 배포는 안전하게
      panicThreshold: isDev ? 'critical_errors' : 'none',
    }],
  ],
}

05왜 중요한가

빌드 안정성을 지키는 안전판이다. 기본값이 이미 안전한 쪽('none')이라 대부분은 손댈 일이 없다. 더 엄격한 값이 유용한 건 개발 중 문제를 캐낼 때뿐이며, 그때도 프로덕션 빌드에까지 새어 들어가지 않게 조심하면 된다.

Reference