HAR 파일로 디버깅하기

Tech
2025-02-15

배경

로컬에서 재현되지 않는 이슈를 만나면 어떻게 접근해야 할지 막막할 때가 있습니다. 이슈가 어떤 환경에서 발생하는지만 알아도 원인 파악에 큰 도움이 됩니다. 이처럼 특정 환경에서만 발생하는 재현이 어려운 이슈를 해결하고자 할 때 HAR 파일이 필요합니다. 많은 기업이 이슈 해결을 위해 HAR 파일 제출을 요청하고 있고, 이를 안내하는 가이드도 쉽게 찾아볼 수 있습니다. 예를 들어 링크드인에는 HAR 파일에 대한 FAQ 페이지가 따로 존재합니다.

이 글에서는 HAR 파일이 무엇인지, 이를 활용해 어떻게 이슈를 분석할 수 있는지 알아보겠습니다.

HAR(HTTP Archive) 파일이란?

네트워크 탭의 HTTP 통신에 대한 모든 정보가 JSON 형식으로 저장된 파일로 .har 확장자를 가집니다.

생성 방법

HAR 파일은 브라우저의 네트워크 탭에서 쉽게 생성할 수 있습니다.

  1. 오류가 발생하는 페이지에서 개발자 도구를 열고 네트워크 탭으로 이동합니다.
  2. 페이지를 새로고침한 뒤 오류 상황을 재현합니다.
  3. 모든 요청이 완료되면 스크린샷처럼 export 버튼을 클릭하고 파일을 저장합니다.

포함된 정보

HAR 파일이 캡처하는 스냅샷에는 다음과 같은 정보가 포함됩니다.

  • Complete Request and Response Headers (HTTP request methods, status codes, cookies)
  • Payload Content
  • Timing Information (DNS lookup, connection time, SSL handshake, content download)

주의할 점

HAR 파일에는 브라우저에서 수행한 모든 요청이 기록되기 때문에 당연히 쿠키나 인증 토큰도 포함됩니다. 따라서 HAR 파일을 공유할 때는 주의가 필요합니다. 실제로 Okta에서 문제 해결을 위해 고객에게 HAR 파일을 요청했는데, 이 파일이 해커에 의해 악용된 사례도 있었습니다. 공유하기 전에 텍스트 에디터로 파일을 열어 내용을 확인하거나, Cloudflare HAR File Sanitizer를 통해 민감한 정보를 제거할 것을 권장합니다.

Choose File 버튼을 클릭해 HAR 파일 업로드 시, 제거할 항목 선택해 다운로드 가능

HAR 파일로 이슈 분석하기

(1) Chrome 브라우저 Network 탭에서 Import HAR file

스크린샷에 표시된 import 버튼을 클릭합니다. HAR 파일을 선택하면, 해당 파일의 요청 및 응답 데이터가 네트워크 탭에 로드됩니다. 이렇게 하면 특정 이슈가 발생하는 환경과 동일한 정보를 확인할 수 있습니다.

(2) Google Admin Toolbox HAR Analyzer 사용

Google Admin Toolbox HAR Analyzer에 HAR 파일을 업로드합니다. 분석 결과를 통해 요청 및 응답의 세부 사항을 확인하고, 성능 문제나 오류를 파악할 수 있습니다. HTTP 상태 코드로 필터링도 가능합니다.

마치며

HAR 파일은 네트워크 요청을 분석하고 디버깅하는 데 유용한 도구입니다. 이슈 제보자로부터 HAR 파일을 받을 수 있는 상황이라면 이를 활용해 보는 것도 좋은 방법이라고 생각합니다. 또한 팀원들과의 소통 시에도 HAR 파일을 공유하면 협업에 도움이 될 것입니다. HAR 파일을 활용해 더 효율적으로 문제를 해결할 수 있기를 바랍니다.