최근 업무 중 원인을 알 수 없는 에러가 있었다. 정확한 원인을 알 수 없던 이유는 1. 에러가 간헐적으로 발생했고, 2. 특정 PC에서만 발생해서 같은 환경(브라우저 버전, 네트워크 등)의 다른 PC에서는 재현이 되지 않았다.
프론트 이슈일 확률은 거의 없어보였지만 그렇다고 원인을 특정할 수도 없었다. 원인을 파악하려고 하다보니 다양한 로그를 확인하게 됐는데, 처음 알게 된 것들이 많아 기록한다.
개발자 도구의 네트워크 탭
웹 개발자라면 익숙할 그 친구다. 우클릭을 해보면 평소에 사용하는 헤더 말고도 다양한 옵션이 있다. 이번 에러의 경우 네트워크 요청이 stalled 상태로 지속되다가 끝나는 현상이 있었는데, TCP 연결이 최대 갯수를 초과한 것인지 의심이 되어 'Connection ID' 옵션을 사용해봤다.
HAR
가장 아래 버튼을 클릭하면 지금 보고 있는 네트워크탭의 데이터를 json 형태로 저장할 수 있다. har(설명: 위키피티아)이라는 확장자를 가지는데, 웬만한 모던 브라우저에서 지원된다.
크롬과 엣지의 경우 네트워크 탭에 파일을 드롭하면 모든 정보를 그대로 볼 수 있다. 다른 사람의 PC에서 에러가 발생한 경우에 해당 파일을 저장해서 달라고 하면 아주 유용하다.
net-export
주소창에 chrome://net-export (엣지에서는 edge://net-export)를 입력하면 위와 같은 화면이 나온다. 버튼을 누르면 해당 시점부터 디테일한 네트워크 로그(SSL 연결, 소켓 연결 등)를 남길 수 있다. 해당 탭에서 다시 버튼(Stop)을 누르면 중단된다.
기록된 파일은 별도의 뷰어(링크)로 확인하는게 편하다. events 탭이 시간순으로 모든 이벤트를 확인할 수 있어서 가장 유용했다.
media-internals
이번에 겪은 에러 중 하나가 '[Intervention] Blocked attempt to create a web media player as there are too many webmediaplayers already in existence'라는 메시지와 함께 오디오 플레이어가 비활성화되는 이슈였다.
주소창에 chrome://media-internals (엣지에서는 edge://media-internals)를 입력하면 WebMediaPlayer들의 상태를 확인할 수 있다. WebMediaPlayer는 비디오나 오디오를 재생할 때 브라우저에서 내부적으로 사용되는 것으로 pause, play, suspended, destroyed 등의 상태를 가진다.
성능상의 이유로 이 WebMediaPlayer의 최대 갯수는 제한되어 있다고 한다(관련 링크). destroyed 상태가 아니면 모두 갯수에 포함되는 듯하다. 그런데 실제로는 화면에 활성화된 audio element의 갯수와 무관하게 에러가 특정 시간 주기로 발생해서 정확한 원인을 파악하는 것이 어려웠다.
다른 페이지로 넘어갈 때 기존 페이지의 WebMediaPlayer들이 destroyed 되지 않고 메모리에 남는 경우가 있는게 아닐까 추측해봤지만, 테스트 결과 재현은 되지 않았다.
결국 정확한 원인은 찾지 못하고, audio를 다 듣고나서 코드상에서 WebMediaPlayer들이 destroyed 되도록 처리해주는 방식을 우선 적용해두었다. (관련 링크)
'개발' 카테고리의 다른 글
| 쿼리 키(React Query Key)를 체계적으로 사용하기 (0) | 2023.12.17 |
|---|---|
| React에서 UI 컴포넌트와 결합된 코드를 다루는 패턴들 (1) | 2023.11.03 |
| 모바일 크로스 브라우징 경험기 (0) | 2023.02.21 |
| 2022년 회고 (1) | 2023.01.06 |
| 브라우저 최소화 상태에서 웹소켓 끊김 현상 (0) | 2022.12.07 |
