RangeError: Maximum call stack size exceeded Error

[IsmailZD]

Hi,

I got this error recently where the animation won't start to due to a stack limit breached. This only occurs on Google Chrome. I have browser tested it on all major browsers such as Safari, IE, Firefox and Edge. Everything seemed fine.

Source code

function init() {

  canvas = document.getElementById("verticalSlideshow");

  anim_container = document.getElementById("vertical_container");

  dom_overlay_container = document.getElementById("vertical_overlay_container");

  images = images||{};

  ss = ss||{};

  var loader = new createjs.LoadQueue(false);

  loader.addEventListener("fileload", handleFileLoad);

  loader.addEventListener("complete", handleComplete);

  loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt) { 

  if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

}

function handleComplete(evt) {

  //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

  var queue = evt.target;

  var ssMetadata = lib.ssMetadata;

  for(i=0; i<ssMetadata.length; i++) {

    console.log("Image Names: "+ queue.getResult(ssMetadata.name));

    ss[ssMetadata.name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata.name)], "frames": ssMetadata.frames} )

  }

  exportRoot = new lib.CombinedExpanded_RainLeafAni(); //ERROR TRIGGERS HERE

From what I gather that it is a recursive function constantly being called and Google Chrome has a limited stack memory compared to other browsers.

I initially developed this in Adobe Animate 2017 version, I updated yesterday and the 2018 exported the same source files with a small tweek. No luck.

Full Error Log

rainleaf.slideshow.init.js?oxjymg:26 Uncaught RangeError: Maximum call stack size exceeded

    at handleComplete (rainleaf.slideshow.init.js?oxjymg:26)

    at a.b._dispatchEvent (createjs-2015.11.26.min.js?oxjymg:formatted:210)

    at a.b.dispatchEvent (createjs-2015.11.26.min.js?oxjymg:formatted:171)

    at a.b._sendComplete (createjs-2015.11.26.min.js?oxjymg:formatted:5389)

    at a.b._loadNext (createjs-2015.11.26.min.js?oxjymg:formatted:6159)

    at a.b._processFinishedLoad (createjs-2015.11.26.min.js?oxjymg:formatted:6263)

    at a.b._handleFileComplete (createjs-2015.11.26.min.js?oxjymg:formatted:6212)

    at createjs-2015.11.26.min.js?oxjymg:formatted:127

    at a.b._dispatchEvent (createjs-2015.11.26.min.js?oxjymg:formatted:210)

    at a.b.dispatchEvent (createjs-2015.11.26.min.js?oxjymg:formatted:171)

If anyone could help me with this that would be great.

Thanks

[UDESCO]

Looks like an error due to incorrect HTML Template.

Goto your Publish Settings, Advanced Tab,

Click on 'Use Default' button under Template section and then press OK.

Now when you Test your movie does it play fine?

[IsmailZD]

Hi Nipun,

I am already using the default settings whilst exporting.

Just a note, this bug never existed, it functioned well on my website, however now on the latest Google Chrome it never executes.

Is it possible to look further on this ?

Thanks,

Ismail

[UDESCO]

Can you upload your fla file somewhere and share the link to have a look at it.

Also can you confirm if your file used to publish fine from a previous version of Animate and doesn't publish correctly now?

Does it work on other browsers than Chrome?

[IsmailZD]

Hi Nipun,

It was working fine from the 2017 version now the 2018 has few changes. The Animation runs on all browsers except Chrome because Chrome has a different stack limit and lowest compared to other browsers.

At the end I found a temp solution is to render the animation as a Video and display it in HTML5 tag with no controls...etc.

Thanks,

Ismail

[UDESCO]

Hi Ismail,

Thanks for providing more details. I haven't encountered such an issue before. It'll be great if you can share your FLA file with us for investigation.

[Xavier F]

Same problem, only with Chrome on Windows 10,

on chrome osx High sierra > OK
Safari osx > OK
Microsoft Edge windows 10 > ok

same news about this problem ?
there is an update of Animate CC 2018 to export clean HTML code who work on all browser on all platform .

thank's for your review

[albertd9194959 · Accepted solution]

Same issue here, after the update to 2018, receiving the same issue.

Edit: After some trouble shooting, my problem was tween lengths.

I had two tweens that where really long, broke those up into smaller tweened layers and  issue fixed.

[markp8938076]

This solution will not work for me, I want to have longer tweens for easy editing.

[markp8938076]

Hey alberdt

You're not completely wrong.

I hit this error when using large tweens because the Javascript code puts each tween change on the same line.  I had a longer animation (2 min) with 4000 frames and an object moving throughout.  The JS code had a line that was over 120,000 characters long.  In simple terms Chrome (and other browsers) can't handle that much code on the same line.  If you break up your tweens like you suggested the code also breaks them up into different lines.  The Adobe team can easily fix this problem by checking how many frames a tween has then simply used multiple lines in the Javascript code.

[jefryarch]

This error is almost always means you have a problem with recursion in JavaScript code, as there isn't any other way in JavaScript to consume lots of stack. Sometimes calling a recursive function over and over again, causes the browser to send you Maximum call stack size exceeded error message as the memory that can be allocated for your use is not unlimited. It's possible to cause infinite recursion in a fully promisified code, too. That can happen if the promises in a chain don't actually perform any asynchronous execution , in which case control never really returns to the event loop, even though the code otherwise appears to be asynchronous. That's when it's useful to wrap your recursive function call into a -

• setTimeout
• setImmediate or
• process.nextTick

Also, you can localize the issue by setting a breakpoint on RangeError type of exception , and then adjust the code appropriately. Moreover, you can managed to find the point that was causing the error by check the error details in the Chrome dev toolbar console , this will give you the functions in the call stack, and guide you towards the recursion that's causing the error.

[jeffc96039282]

Same thing happened to me, randomly. Deleting the top camera layer worked for me, it must've added itself accidentally. Before I figured that out it, it also worked to delete entire chunks from the timeline, although undo'ing all the way back in time didn't work for some reason. Now I also save a ton of versions as I go, at every checkpoint that I get something working, and I keep notes of what is happening in each version. Kind of a pain but way easier than losing hours of work, lesson learned the hard way.

[Lehi5EF3]

I experienced this error for first time in my life. It was about making an animation "how to draw step by step a rectangle" where all 4 lines have had its layers and mask layers. All 4 lines are "animated like pen draw it". During development all previews in Chrome was w/o issue but near the end of the project the new preview doesn't show in Chrome! By checking console I saw there error message:

Maximum call stack size exceeded at handleComplete (Drawrectangle.html:53)- Source code stopped at line:

exportRoot = new lib.Drawrectangle(); Tried to change something in my animation (there is no JS code) but no score.

Then, I gave up. probably my way of animation creation seemed to Animate too complicated (9 layers, 2 mask layers, 1 additional camera)... Same error in Edge but Firefox works as charm!  Next week I'll try some better access... if no score, I'll give up finally and try another solution. 

[ronb99363116]

Yes, I too just experienced this error. I followed the answer here and it does work. For further information:

I had a mask tween for a line reveal and a car motion tween to follow that line. The tweens were 1137 frames long. Boom it didn't work. But it did on Chrome V79, just not Chrome V92.  Initially I just added keyframes to split the tween but that did not work. I then copied the layers, renamed them and then had half the tween on one layer and the other half on another layer. I did that for both the car and the mask and that worked.

I don't know exactly what the tween length limitation is but I can now guess it is somewhere between (no pun intended!) 600 and 1137 frames.

Hope this helps.

Ron