Posts tagged Ionic 3

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory Fix

0

A few days ago our Ionic Framework 3 CI build stopped working when it tried to run the following command:

ionic build --prod

The error we were getting is the following:

Running app-scripts build: --prod
[12:36:35][Step 6/9] [12:36:35]  build prod started ... 
[12:36:35][Step 6/9] [12:36:35]  clean started ... 
[12:36:35][Step 6/9] [12:36:35]  clean finished in 2 ms 
[12:36:35][Step 6/9] [12:36:35]  copy started ... 
[12:36:36][Step 6/9] [12:36:36]  deeplinks started ... 
[12:36:36][Step 6/9] [12:36:36]  deeplinks finished in 639 ms 
[12:36:36][Step 6/9] [12:36:36]  ngc started ... 
[12:37:08][Step 6/9] [12:37:08]  ngc finished in 31.51 s 
[12:37:08][Step 6/9] [12:37:08]  preprocess started ... 
[12:37:08][Step 6/9] [12:37:08]  preprocess finished in 1 ms 
[12:37:08][Step 6/9] [12:37:08]  webpack started ... 
[12:37:09][Step 6/9] [12:37:09]  copy finished in 33.89 s 
[12:39:45][Step 6/9] 
[12:39:45][Step 6/9] FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
[12:39:45][Step 6/9] <--- Last few GCs --->
[12:39:45][Step 6/9]  1: node::Abort() [/usr/local/bin/node]
[12:39:45][Step 6/9] 
[12:39:45][Step 6/9] [10324:0x102801e00]   188080 ms: Mark-sweep 1413.3 (1493.9) -> 1413.3 (1477.9) MB, 3984.8 / 0.0 ms  (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 3985 ms) last resort GC in old space requested
[12:39:45][Step 6/9]  2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]
[12:39:45][Step 6/9] [10324:0x102801e00]   192147 ms: Mark-sweep 1413.3 (1477.9) -> 1413.3 (1477.9) MB, 4066.9 / 0.0 ms  last resort GC in old space requested
[12:39:45][Step 6/9]  3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
[12:39:45][Step 6/9] 
[12:39:45][Step 6/9] 
[12:39:45][Step 6/9]  4: v8::internal::Factory::NewStruct(v8::internal::InstanceType) [/usr/local/bin/node]
[12:39:45][Step 6/9] <--- JS stacktrace --->
[12:39:45][Step 6/9] 
[12:39:45][Step 6/9] ==== JS stack trace =========================================
[12:39:45][Step 6/9]  5: v8::internal::Factory::NewTuple3(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
[12:39:45][Step 6/9] 
[12:39:45][Step 6/9] Security context: 0x1c8c95225ee1 <JSObject>
[12:39:45][Step 6/9]  6: v8::internal::LoadIC::UpdateCaches(v8::internal::LookupIterator*) [/usr/local/bin/node]
[12:39:45][Step 6/9]  7: v8::internal::LoadIC::Load(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Name>) [/usr/local/bin/node]
[12:39:45][Step 6/9]     1: typeToTypeNodeHelper(aka typeToTypeNodeHelper) [/Users/mobile/Documents/buildAgent2/work/c6414cd03cae74de/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:~25875] [pc=0x169143ccb562](this=0x1c8ca3682311 <undefined>,type=0x1c8cb0e03f71 <TypeObject map = 0x1c8c588e4181>,context=0x1c8cb768bcb9 <Object map = 0x1c8c5888d151>)
[12:39:45][Step 6/9]  8: v8::internal::Runtime_LoadIC_Miss(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
[12:39:45][Step 6/9]     2: mapToTypeNodes(aka mapT...
[12:39:45][Step 6/9]  9: 0x16914338463d

Funny thing is, we made almost no changes to our app or our build process. So for the last 3 days, we’ve spent hours upon hours trying to figure out why our build was failing, backing out changes one by one to see which one caused the problem.

With no luck.

We updated node, npm, ionic and other packages to try and see if that was an issue was. Then we started to peg the versions of our npm packages and found the issue firebase. About a week ago Firebase released version 4.13.1, we confirmed that our package.json spec was not tied to a specific version:

{
"dependencies": {
"firebase": "^4.6.1",
.....
}
}

Unfortunately, that carrot (^) meant that npm would install any 4.x version of Firebase even if we were just trying to use 4.6.1. We removed the carrot and rebuilt without any issue. For more information on the special characters in the npm version strings visit the official documentation https://docs.npmjs.com/misc/semver.

If you’re encountering the FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory check to ensure your not using or accidentally using firebase 4.13.1 and switch to a lower version. You can force that lower version by only including the version number i.e. “4.6.1” in the string defined in your package.json file.

If you’re a First Responder, or know one, check out Resgrid which is a SaaS product utilizing Microsoft Azure, providing free logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search & rescue, CERT, public safety, security and disaster relief organizations.

The Best Phone for Ionic Framework Development

I have found the one phone that every mobile developer should have on their desks. So what is this remarkable device and why should you add another one one to the many of devices any good mobile developer already has? Well let me dive into that, but first, let me show you the glory that is the BLU Grand XL.

smartphone-blu-grand-xl-dual-sim-3g-tela-5-5-hd-cpu-4core-c-m--8mp-5mp-pretoThis puppy is about the size of an iPhone 6/7 Plus, and a little bit thicker and a noticeable amount heavier. The one I picked up is running the latest. at the time, version of Android 7 (which is why I stumbled across this gem). I picked mine up for $100 unlocked at BestBuy but I have been seeing them show up for less online as well.

The screen, device feel and size all make it a pretty decent device to have to pick up and set down all the time. The screen is fairly responsive so that doesn’t complicate any testing and it easily hooks into Windows and MacOS out of the box for USB debugging and deployments.

But the magic occurs when you look at the device specs and start testing your apps on it.


Category Value

CPU

Mediatek MT6580 Quad-core 1.3Ghz
RAM 1GB
Storage 8GB
Network

3G (GSM/HSPA)

Don’t be fooled, that quad core 1.3Ghz processor is not as powerful as it sounds. For the most part it seems to run Android 7 ok, but there isn’t much left over for apps. But there is where the magic occurs for us developers, that processor and amount of RAM is almost the perfect modern day worst case performance scenario. Here at Resgrid we’ve been developing against the Ionic Framework since around 2014’ish and developing on the hybrid stack mean performance is a big concern, but also something that can be difficult to really test and gauge.

Us developers usually have pretty good phones, which means our apps usually run very well. But what are your users using? Prepaid phones and now phones like the BLU Grand XL are out there and very affordable. A lot of people out there using phones a few years old and a lot of people have gotten off the “upgrade every year or 2” train.

Because of the nature of the Resgrid app, targeting emergency management and first responders, we have a pretty high target in terms of performance (our goal is a usable app within 3 seconds), but given the fact that we are at the mercy of the device and browser on that device it can be a difficult target to hit across the board.

But if you can get your app working well on the BLU Grand XL, it’s going to work well on so many other devices. When we first loaded our app on that puppy (in prod mode with aot) it took almost 18 seconds to be fully usable. Because of this we implemented lazy loading, removed plugins and packages and so far have that time down to 12 seconds and still have a way to go.

If you’re a First Responder or know one check out Resgrid which is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search and rescue, CERT, public safety, disaster relief organizations.

Go to Top