"JS heap out of memory" 에러 해결 - 'aws-sdk' 패키지

- 사건의 발단

2022/02/07일날 밤에 코딩하다가 팀 프로젝트 프론트엔드 CI가 얼마 전부터 계속 x표시가 떠 오류 해결하기 위해서 오류를 탐색하였다...

오류는 다음과 같았다.

Run yarn build
Creating an optimized production build...

<--- Last few GCs --->

[1755:0x4b23b10]    94514 ms: Scavenge (reduce) 2040.3 (2051.1) -> 2039.4 (2052.1) MB, 4.3 / 0.0 ms  (average mu = 0.150, current mu = 0.015) allocation failure 
[1755:0x4b23b10]    96266 ms: Mark-sweep (reduce) 2040.8 (2051.6) -> 2039.0 (2052.6) MB, 1737.1 / 1.6 ms  (average mu = 0.103, current mu = 0.053) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa38a30 node::Abort() [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
 2: 0x96e0af node::FatalError(char const*, char const*) [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
 3: 0xbb7ebe v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
 4: 0xbb8237 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
 5: 0xd74445  [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
 6: 0xd74fcf  [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
 7: 0xd82e0b v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
 8: 0xd869cc v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
 9: 0xd550ab v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
10: 0x109d68f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]
11: 0x14467f9  [/opt/hostedtoolcache/node/14.18.3/x64/bin/node]

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
자바스크립트의 힙 메모리의 사용량 초과로 인한 오류가 발생한것이다.
근데 이상하게도 로컬 환경에서 빌드를 하면 잘되는?? 기이한 현상이 발생하여 놀랄 노자를 금치 못했다...

결국 이 문제를 해결 할 수 있는 방법을 탐색하기 위해서 일단 해당 오류를 구글링했다. (아...구글님이시여)

나를 포함한 비슷한 경험을 하신 분이 몇 분계셨었다.
그 중 참고를 했던 블로그를 아래에 링크로 남겨보려한다.

IT 잡동사니님의 블로그
https://ajh322.tistory.com/241

-nahyunbak님의 블로그
https://velog.io/@nahyunbak/Next.js-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%ED%95%B4%EA%B2%B0-FATAL-ERROR-Ineffective-mark-compacts-near-heap-limit-Allocation-failed-JavaScript-heap-out-of-memory



잡동사니님의 블로그에는 메모리를 늘여주든, 알아서 메모리 누수 원인 발생 코드를 알아서 찾아야하는 솔루션을 제공해주셨고, nahyunbak님께서는 구글 개발자 도구를 통한 메모리 누수 탐색 방법을 알려주셨다.

하지만 nahyunbak님의 솔루션인 개발자도구를 통한 메모리 누수는 찾을 수 없었다.
로컬 환경에서 측정한 리액트의 메모리 사용량이 23MB였기때문이었다.

구글 크롬 웹앱 메모리 사용량 측정 탭

어디서 부터 잘못된건지 찾기위한 솔루션이 없을까 싶어 결국 알아서 찾는 솔루션을 선택하여 깃허브로 들어갔다.

CD 오류

프로젝트는 Github Actions를 이용하여 CD환경을 만들었다.
여기서 자동화 배포에 성공한 CD의 다음부터 해당 오류가 발생했으므로 해당 깃의 기록을 파해쳐보려고 diff를 확인하고 매번 CD를 돌려본 결과.

aws-sdk의 s3를 이용한 이미지 업로드 부분에서 오류가 발생하였다.
이 문제를 해결 해보려고 코드를 이리저리 만지다가 반복적인 에러 출력에 절망감이 쏟아져왔었다.
하여 aws-sdk의 heap out of memory를 키워드로 검색해보니 해결 솔루션이 여기 있었다.

https://github.com/aws/aws-sdk-js/issues/2683

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory · Issue #2683 · aws/a

이것을 보고 왜 힙메모리 부족 오류가 났을까 생각해보았는데 짐작한 결과는 다음과 같다.

"aws-sdk의 패키지는 엄청 크다. 이것을 한번에 import함과 빌드 시 웹팩이 번들링 할 때 앱이 너무 무거우므로 번들링 때 힙 메모리 초과 발생에러를 발생하였다."
는 짐작을 가졌다.

사실 이게 맞는 지는 모르겠다... 그냥 단지 추측일 뿐이다. 그래서 좀 더 원인을 알아보고 다음 번에 포스팅을 할 기회가 있었으면 좋겠다.

그러면 위 문제를해결 할 수 있는 솔루션은 무엇일까?

- 솔루션

솔루션은 참으로 간단했다.

오류코드

솔루션 코드

처럼 바꾸어주니 메모리 에러가 일어나지 않고 정상적으로 CD가 완료되었다. (나는 s3만 이용하므로 s3만 따로 import해주었다.)

- 후기

이번 오류는 특히나 처음 겪어보는 오류라서 너무 당황하였다.
CI/CD도 아직 익숙치 않아서 많이 부족한데 이러한 오류가 일어나니 어찌 할 바를 몰랐으나, 일단 해결되었으니 다행이다.
내일은 위 오류에 대해서 알아보고, 위 오류를 알기위해서 웹팩에서 번들링을 오류코드처럼 작성하면 어느 범위까지 번들링하게 되는지 알아보아야겠다.