소개
Out of memory(OOM)란?
Javascript는 가비지 컬렉션(garbage collection a.k.a GC)을 통해 메모리를 관리하고 이를 통해 사용자가 메모리 영역에 대하여 관심을 가지지 않도록 하지만, Memory leakage가 발생하는 경우는 다릅니다. 어떠한 이유로 할당된 메모리 영역이 Clean up되지 않고 잔여하게 되면서 메모리 용량 부족 상태를 만들고 이를 Out of memory 라고 말합니다.
Nuxt.js로 개발한 서비스에서 OOM 문제가 발생했습니다. FE 쪽이 아니라 Server 측에서 발생하는 Memory Leakage를 확인하기 위한 내용 정리와 해당 이슈를 수정해 나가는 과정을 정리하려고 합니다.
서버 Inspecter 동작 방법
Nuxt.js로 개발한 프로젝트를 빌드하고, 아래의 스크립트로 동작시키면 빌드된 패키지 기준으로 Nuxt.js. 서버를 구동합니다.
node --inspect node_modules/nuxt/bin/nuxt start
chrome://inspect 로 이동하면 아래와 같은 화면에서 inspecter를 통해 서버의 메모리 사용 등을 확인할 수 있습니다.
Memory leakage 확인
Inspector 로 이동하여 memory 탭을 확인하면 아래와 같은 화면을 확인할 수 있습니다.
- Heap Snapshot은 Heap 메모리 영역에 할당된 정보를 캡쳐하여 확인합니다.
- Allocation instrumentation on timeline은 일정 시간 동안 할당되는 메모리와 Clean up 과정을 차트로 표현합니다.
1. Using Allocation
위의 이미지에서 Allocation instrumentation on timeline 을 클릭하고 Record를 시작합니다.
이후, 시간에 대하여 메모리가 할당된 정보를 차트로 그립니다. 회색으로 표현된 부분은 Clean up 된, 메모리 색상이 있는 영역은 아직 메모리가 할당된 영역입니다.
또한, 차트 영역을 클릭하면 특정 시간대에 따른 메모리 할당 정보를 조회할 수 있습니다. 할당된 정보를 통해 메모리가 Clean up 되지 않는 부분을 찾아냅니다.
2. Using Heapsnapshot
다른 방법으로는 Heap Snapshot을 통해 두 Heap 메모리 영역의 스냅샷을 비교하여 메모리에 할당된 정보를 통해 찾는 방법입니다.
탭 상단의 Summary를 Comparison으로 변경하고 비교할 Snapshot을 선택합니다.
위와 같은 다양한 정보에서 불필요하게 많이 존재하는 정보 등을 찾아내어 원인으로 추정합니다.
수정 후
저의 경우 nuxt.js의 created() 메서드에 선언된 setSocket() 함수가 문제였습니다. created를 beforeMount() 메서드로 변경하자 해당 이슈는 사라졌습니다. 아래의 이미지를 확인하면 대부분의 할당된 Memory가 clean up 되는 것을 확인할 수 있습니다.
결과적으로,
이외에도 특정 상황들에 대하여 여전히 GC가 정상적으로 동작하지 않아서 OOM이 발생할 가능성이 있지만, 현재와 같이 빈번하게 발생하지는 않을 것 같습니다. 추가적인 수정 사항을 확인하면서 별도의 특이점이 있다면 관련 포스트를 추가 작성하고자 합니다.
