React project crashes with many allocation failures on Heroku but runs on local dev

Question

My React calendar app works well on a local development build but it gives many allocation failures when it's deployed to Heroku.

Here is the error from the Heroku logs:

2021-08-29T06:50:16.143215+00:00 app[web.1]: <--- Last few GCs --->
2021-08-29T06:50:16.143216+00:00 app[web.1]: 
2021-08-29T06:50:16.143232+00:00 app[web.1]: [29:0x59b3ba0]    23626 ms: Mark-sweep (reduce) 253.6 (257.1) -> 251.9 (258.6) MB, 22.3 / 0.0 ms  (+ 868.9 ms in 46 steps since start of marking, biggest step 759.6 ms, walltime since start of marking 919 ms) (average mu = 0.240, current mu = 0.080) alloc[29:0x59b3ba0]    23886 ms: Mark-sweep (reduce) 253.0 (257.6) -> 252.4 (258.1) MB, 255.2 / 0.0 ms  (average mu = 0.193, current mu = 0.018) allocation failure scavenge might not succeed
2021-08-29T06:50:16.143232+00:00 app[web.1]: 
2021-08-29T06:50:16.143233+00:00 app[web.1]: 
2021-08-29T06:50:16.143233+00:00 app[web.1]: <--- JS stacktrace --->
2021-08-29T06:50:16.143233+00:00 app[web.1]: 
2021-08-29T06:50:16.143238+00:00 app[web.1]: FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
2021-08-29T06:50:16.143807+00:00 app[web.1]:  1: 0xa25510 node::Abort() [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.144226+00:00 app[web.1]:  2: 0x9664d3 node::FatalError(char const*, char const*) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.144703+00:00 app[web.1]:  3: 0xb9a8be v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.145191+00:00 app[web.1]:  4: 0xb9ac37 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.145733+00:00 app[web.1]:  5: 0xd56ca5  [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.146333+00:00 app[web.1]:  6: 0xd8763e v8::internal::EvacuateNewSpaceVisitor::Visit(v8::internal::HeapObject, int) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.146849+00:00 app[web.1]:  7: 0xd93676 v8::internal::FullEvacuator::RawEvacuatePage(v8::internal::MemoryChunk*, long*) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.147462+00:00 app[web.1]:  8: 0xd7f80f v8::internal::Evacuator::EvacuatePage(v8::internal::MemoryChunk*) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.148027+00:00 app[web.1]:  9: 0xd7fa88 v8::internal::PageEvacuationTask::RunInParallel(v8::internal::ItemParallelJob::Task::Runner) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.148593+00:00 app[web.1]: 10: 0xd72369 v8::internal::ItemParallelJob::Run() [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.149156+00:00 app[web.1]: 11: 0xd955d0 void v8::internal::MarkCompactCollectorBase::CreateAndExecuteEvacuationTasks<v8::internal::FullEvacuator, v8::internal::MarkCompactCollector>(v8::internal::MarkCompactCollector*, v8::internal::ItemParallelJob*, v8::internal::MigrationObserver*, long) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.149712+00:00 app[web.1]: 12: 0xd95e6c v8::internal::MarkCompactCollector::EvacuatePagesInParallel() [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.150265+00:00 app[web.1]: 13: 0xd96035 v8::internal::MarkCompactCollector::Evacuate() [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.150813+00:00 app[web.1]: 14: 0xda8031 v8::internal::MarkCompactCollector::CollectGarbage() [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.151369+00:00 app[web.1]: 15: 0xd642f8 v8::internal::Heap::MarkCompact() [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.151930+00:00 app[web.1]: 16: 0xd65de8 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.152498+00:00 app[web.1]: 17: 0xd6922c v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.153042+00:00 app[web.1]: 18: 0xd3790b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.153673+00:00 app[web.1]: 19: 0x107fbef v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.154370+00:00 app[web.1]: 20: 0x1426919  [/app/.heroku/node/bin/node]
2021-08-29T06:50:16.182810+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-08-29T06:50:16.182987+00:00 app[web.1]: npm ERR! errno 1
2021-08-29T06:50:16.186047+00:00 app[web.1]: npm ERR! [email protected] start: `react-scripts start`
2021-08-29T06:50:16.186119+00:00 app[web.1]: npm ERR! Exit status 1
2021-08-29T06:50:16.186179+00:00 app[web.1]: npm ERR! 
2021-08-29T06:50:16.186220+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2021-08-29T06:50:16.186261+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

My project code is available at: https://github.com/innext/meetingSchedulerReact.git

Answer 1

The problem was with the way Heroku deploy react app. Normally, when running a client-side react app to be served we first build then serve the build.

In this case, Heroku does not know how to build react app and it thus assumes it is a Node.js app.

To resolve this, you will have to change the build pack in Heroku which is located on the Settings tab under the Buildpack section. This is the react build pack https://github.com/mars/create-react-app-buildpack.git. Copy and paste then re-deploy. Can also search for more react build pack if that's not working.

If you do not like the trouble and want someone who handles things for you automatically, you can use a platform like Netlify which handles all of this for you by default.