22.02 / 외부 라이브러리로 인한 서비스 장애
이슈
어느 날 문의 메일이 왔다. 청천벽력 같은 버그 문의였다. 다급하게 사이트에 접속해서 몇 가지 확인을 해 보았고, 머릿속이 하얘졌다. 사진 제작 사이트인데 사진 제작이 안 되는건 서비스 마비 수준이다.
원인
이미지 제작 후 링크를 눌러 보았더니 나를 반겨준 건 이미지가 아닌 인코딩된 날 것 그대로의 문자열들이었다.
문제는 저 메일이 오기 전,후로 나는 아무런 코드 커밋도 하지 않았다. 그렇다면 범인은 외부에 있을 터, 의심되는 외부 라이브러리는 2가지였다.
구글 애널리틱스
카카오 지도
범위를 좁히는 건 생각보다 쉬웠다. 광고 차단 툴인 애드블록을 사용하고 들어가면 사이트가 정상 작동하는 것으로 보아, 프로그램 차단 대상인 애널리틱스가 범인인 것이 더 확실해졌다.
해결
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-SVR1PZCLDT'); // 문제의 대상, 삭제 처리함
gtag('config', 'UA-188506770-1');
</script>이리 저리 코드를 살펴보다가, 예전 애널리틱스와 연동되게 중복 코드를 써놓았던 부분을 발견했다. 요즘 애널리틱스 들어가면 계속 구 버전을 지원 종료 계획이니, 빨리 갈아타라고 메세지 나오던 부분이 거슬렸는데, 혹시 저게 원인인가 싶어서 저 부분만 코드를 삭제해봤다. 다행히 예상은 적중했고, 서비스는 다시 정상 작동 되었다.
고민
일단 외부 라이브러리는 최대한 서버에 사본을 떠놓고 불러오게 하고 있다. 하지만 구글이나 카카오에서 불러오는 라이브러리는 이 방식은 사실상 불가능해서 어떻게 할지 고민이다. 게다가 이렇게 클라이언트 단에서 요상한 에러가 나 버리면 서버 에러 로그도 전송이 안 되서, 미리미리 해당 라이브러리들의 주요 변경사항들을 체크하는 습관을 들여야겠다.
배운점
에러 발생의 소지는 생각보다 다양하다
외부 코드에 대한 맹신은 위험한 발상이다
외부 라이브러리 사용 시 변경 사항을 잘 확인, 가이드라인을 준수하자
Last updated