웹 이슈 / 디버깅 / HTTP 에러코드 / HAR 파일
이슈 발견시
브라우져에서
Inspect(개발자도구) 클릭후
Network 탭을 켜두고,
버튼 혹은 링크를 클릭할경우, 발생하는 Call들을 볼수가 있게 되는데,
이슈가 발생하는 상황을 재현해본다면,
네트워크 트레이스를 통해
응답코드를 분석해 볼수 있습니다.
정상 적인 Request (요청) 을 보내어 , 재대로 된 Response (응답) 을 받는 다면,
200 번대(Status) 가 뜰 것이고,
서버로 보낸 요청이 실패를 하는 경우엔
흔하게 400 , 500 의 상태 코드가 뜸
대게의 경우 400 번대 코드들은 서버에 보낸 요청이, 잘못된 경우를 나타내기에 , 프론트엔드에서 잘못하였을 다능성이 높고
500번대의 상태코드가 뜰 경우는 서버쪽에서 무언가 잘못된 경우에 발생하므로 , 백엔드에 문제일 경우가 많습니다.
200번 대의 코드는 요청에 대한 성공적인 응답을 받는 경우이므로
패스하도록하고
400번대 코드들의 몇가지 예시를 보자면,
400 - Bad Request
단순하게 클라이언트가 요청을 잘못 보냈음을 의미합니다.
401 - Unauthorized
인증되지않은 사용자가 인증이 필요한 자료를 요청하는 경우,
인증이 필요하다는 것을 나타냄
사용자가 누구인지 확인이 필요한 상황이며,
보통 로그인이 필요한 리소스에 접근할 때, 로그인 없이 접속 하려한 경우에 뜹니다.
403 - Forbidden
접근 금지된 리소스를 요청하였다는 것을 뜻함
403은 401(Unauthorized) 과는 다르게
사용자에게 초점이 맞추어져 있는 것이 아니고
이 리소스에 접근하는 것 자체가 불가능함을 의미합니다.
404 - Nor Found
말 그대로 요청한 리소스가 존재하지 않음을 의미합니다.
408 - Request Timeout
서버의 요청 대기가 시간을 초과 하였을때 발생
클라이언트와 서버가 연결되었지만,
본문(body)이 다 도착하지 않았음을 나타냄
429 - Too Many Requests
클라이언트가 일정시간 안에, 너무 많은 요청을 보냈을 경우 발생합니다.
이제 500번대 코드들의 예시를 보겠습니다.
500 - Internal Server Error
서버에 오류가 발생하여 요청을 수행할수 없음을 나타냄
이 경우 대부분 서버의 로그를 살펴보아야
원인을 찾을수 있습니다.
502 - Bad Gateway
백엔드 아키텍쳐가 제대로 동작하지 않은 상황을 의미합니다.
아무리 간단한 아키텍쳐라도, 백엔드는 보통 여러개의 어플리케이션이 복합적으로 돌아가게 됩니다.
그 백엔드 어플리케이션들과 프록시 서버 사이의 통로를 게이트 웨이라 부르는데,
백엔드 어플리케이션이 제대로 돌아가지 않을 경우
프록시 서버는 아무런 응답을 받을수 없으므로
이떄 502 라는 응답을 받게 되는 것입니다.
503 - Service Unavailable
서버가 요청을 처리할 준비가 되지 않았음을 의미합니다.
보통 서버가 오버로드 되었거나, 유지관리를 위해 다운되었을 떄 발생하는 일시적인 현상입니다.
504 - Gateway Timeout
프론트엔드의 408(Request Timeout)처럼 , 백엔드 아키텍쳐 내부에서 요청 대기가 시간을 초과하였을떄 발생합니다.
대부분 많이 볼 수 있는 에러 코드들은 이정도 일 것이고,
더 다양한 상태 코드들은 링크를 남겨놓을 테니 관심있으신분들은 한번 방문해보세요.
- HTTP STATUS CODES
https://ko.wikipedia.org/wiki/HTTP_%E...
https://restapitutorial.com/httpstatu...
HTTP 상태 코드는 이정도만 보도록 하고
그렇다면 , 이번엔 브라우저의 네트워킹 정보를 담고있는 HAR (HTTP Archive) 파일을 무엇인지 ,어떻게 생성하고 볼 수 있는지에 대해 알아보도록 하겠습니다.
HAR 파일을 만드는 이유는 여러가지가 있겠지만,
보통은 Performance 이슈르 분석할 때 가장 많이 사용합니다.
보틀넥, 페이지 랜더링 혹은 슬로우 로딩타임 이슈 등,
HAR파일 분석을 통해 어떠한 부분에서 이슈가 발생하였는지 확인할 수 있고,
더 빠르게 처리할 수는 없을지
코드를 Refactoring 할 수 있도록 하는 첫걸음이 됩니다.
퍼포먼스 이슈가 아닌, 또다른 HAR파일이 필요한 경우는 바로 특정환경에서만 발생하는 이슈를 분석할 때 입니다.
로컬어서 이슈를 재현하지 못할 때 커스터머환경에서만 에러가 발생할 떄에는 커스터머와 스크린쉐어 미팅을 하며 함께 디버깅을 해야할 떄도 간혹 있습니다.
이 경우에는 압박감과 스트레스도 있기에 정말 운이 좋기 전에는 , 제한된 시간 내에(미팅이 끝나기 전까지) 버그를 잡아내는 일은 사실 쉽지 않습니다.
결국 미팅하는 동안에 이슈의 원인을 찾지 못할 경우
HAR파일을 저장해 받아와서 팀원들과 함께 자세한 분석을 해볼 수 있습니다.
또한, 프론트엔드 이슈인줄 알았는데, 실제 이슈는 백엔드 App , 혹은 게이트웨이 문제였음을 HAR 파일을 통해 증명하기도 합니다.
그렇다면,
이렇게 여러모로 중요한 HAR파일을 어떻게 생성하는지 한 번 알아보겠습니다.
웹브라우저 개발자 모드에서 네크워크 탭에서
일단 지금 쌓여있는 Call 들을 Clear 해줍니다.(빨간불켜진거 확인하고, Preserve log 체크하기)
그리고
이슈를 재현해 본 후, Clear버튼의 옆쪽 혹은 하단에 위치한, 아래화살표(Export HAR)버튼을 누르시면,
지금 쌓여있는Call들을 포함한 HAR파일이 생성됩니다.
생각보다 간단하지요?
그럼 이렇게 생성된 HAR파일을 보는 방법은,
구글에서 HAR analyzer 로 검색을 하면,
구글에서 제공하는 온라인 뷰어로 가실 수 있습니다.
아까 다운로드 하였던 HAR파일을 이곳에서 선택한다면
디벨로퍼 툴즈에서 보던것처럼 Call들을 하나하나 분석해 보실 수 있습니다.
간혹, 회사에서 테크니컬 인터뷰시 ,
웹 이슈를 분석하는 상황에 대해 묻는다면,
이 정보는 큰 도움이 될 것이라 생각합니다.
그룹 , 혹은 개인 프로젝트를 진행해보며,
이슈를 만났을때, 한번쯤 오늘 알려드린 방법을 써서 분석해보는 것은 어떨까요 ^^
