회사에서 겪은 mui 관련 트러블 슈팅

문제

• MUI를 이용해 사내 서비스의 설정창 Dialog를 개발했습니다.
• 그런데 간헐적으로 Dialog가 열릴 때마다 화면이 화이트 아웃나는 문제가 발생했습니다.
• 이는 서비스에 매우 크리티컬한 이슈였습니다.

에러 메시지

Cannot read properties of null (reading 'pulsate')라는 에러로그가 출력됐습니다.

구글에 검색한 결과 Mui의 button이 mount되지 않았는데 ref에 접근하려고 해서 발생하는 에러라는 것을 알 수 있었습니다.

하지만 개발한 설정 Dialog에서 ref를 사용하는 코드는 단 한 줄도 없었기 때문에 오랜 시간동안 서칭을 진행했습니다.

해결

여러 깃허브 이슈들을 찾아 해매던 중 이 이슈를 발견했습니다.

버튼에 autoFucus 속성을 true로 설정했을 때 같은 에러가 발생했다는 이슈였는데 설정 다이얼로그를 만들 때 예제에 있던 대로 IconButton에 autofocus 속성을 준 것이 생각났습니다.

이 속성을 제거한 결과 해당 이슈를 해결할 수 있었습니다.

요약

• mui를 이용해 설정 Dialog을 개발했는데 간헐적으로 화이트 아웃 나는 이슈 발생
• mui 깃허브 이슈를 뒤진 결과 autofucus 속성이 문제일 수 있다는 깃허브 이슈 발견
• autoFocus 속성 제거해서 이슈 해결

소감

라이브러리 관련 이슈는 깃허브 이슈를 뒤지면 생각보다 금방 해결할 수 있음을 알 수 있었습니다.