Minified React error 파헤치기

React 프로덕션 환경에서 오류가 발생하면, 번들 크기를 줄이기 위해 오류 메시지를 React 공식 웹 사이트로 관리한다. 참고로 이 위키에서 나는 오류다. 이것도 해결해야 하지만… 문득 이 오류가 어떻게 관리되는지 궁금해졌다.

에러 코드?

React의 에러 코드는 스크립트에 의해 자동으로 수집, 생성되어 관리된다. json으로 구성되어 있어 React 웹이 아니더라도 모든 에러를 확인할 수 있다. 에러 코드를 자동으로 수집, 관리하는 시스템을 Error Code System이라고 부르는 듯하다.

React 저장소의 scripts/error-codes/codes.json 를 참고.

React Error Code System

Introducing React's Error Code System – React Blog

This blog site has been archived. Go to react.dev/blog to see the recent posts. Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of…

https://ko.legacy.reactjs.org/blog/2016/07/11/introducing-reacts-error-code-system.html

일일히 오류 코드를 관리하는 번거로움을 막기 위해, React 팀은 일반적인 오류 관리를 사용하지만, 프로덕션 빌드 타임에 오류를 치환하는 시스템를 사용한다. 이 시스템은 React 버전 15.2.0 때 도입되었다.

이 시스템은 다음과 같이 동작한다.

1. 오류 메시지 수집: 스크립트가 React 소스 코드의 모든 에러 호출을 수집하여 JSON 파일로 저장.

2. Babel 변환: 빌드 시 Babel이 이 JSON 파일을 사용하여 에러 호출을 오류 ID 참조로 재작성.

3. 코드 최적화: 에러를  if (...) throw  형태로 변환하여 성능을 향상시키고 오류 메시지를 제거.

이렇게 프로덕션에서 오류 메세지를 표시하면서도 번들 사이즈를 감소시키는 방식이다.

과거에는

https://github.com/facebook/react/blob/5d3b12bb3bd6a092cf00ede07b8255a8399c2e58/src/vendor/core/invariant.js

Error Code System이 도입되기 이전에도 프로덕션에서 오류 메시지를 보여주진 않았던 것으로 보인다. 다만 위 시스템과 같은 구현이 되어 있지 않았기 때문에, 그냥 오류를 안보여주는 듯 하다.