computer on desk

I’ve been using Angular every day for over a year, but have always been too intimidated by this error message—and the crazy list of information that comes along with it—to really dig into it and find out how to use it to my advantage.

Building a new product at Pedago, I see this error happen from time to time in production (possibly related to a user using an old browser), but never when developing locally. So I have the error message from our error logs, but I can’t reproduce it or debug it by making changes in the code.

After researching the issue, here’s what I found out on my own.

After the colon there are two brackets. (…’atchers fired in the last 5 iterations: [[{“msg’) The first bracket is the beginning of a json block. Copy from the first bracket to the end of the error and find a way to pretty-print that json. (Use your favorite code editor or an online json formatter.)

Now you have a pretty-printed array with 5 entries in it. Each entry represents an iteration in the digest cycle, i.e. one pass through all of the active watchers in your app, looking for changes. Angular will repeat iterations until it does one in which no watcher has a changed value, or until it hits 10 iterations, at which point it will error. That’s what happened in this case.

There were 10 iterations before the error, and 5 are included in the error message. Presumably that means there are 5 more iterations that happened earlier than what is included in the error message. The first entry in the error message is the 6th iteration, and the last entry in the message is the 10th iteration.

The entry for each iteration is also an array. In this case it is an array of objects, and each object represents a watcher whose value changed during this iteration. Each object will give you the text or the function that defines the watcher, the old value for the watcher before this iteration and the new value after this iteration.

Read it from top to bottom like a story, adding commentary based on what you know about your app. In my case, I was able to see how the changes in each iteration caused new watchers to be created, requiring yet another iteration. “In the 6th iteration, this watcher changed, causing this new stuff to be rendered on the page, creating new watchers which were assigned values in the 7th iteration, and then …” There was no infinite loop or anything. In fact, if Angular had been willing to do just 1 or 2 more iterations, it would have finished.

I hope this is helpful to anyone else experiencing this issue.


8 Comments

Shep · December 18, 2014 at 6:06 pm

We the same issue in production but cannot reproduce locally. The difference being that the watch array is empty. Looking all over for answers to this but doesn’t seem anyone gets an empty array. Any ideas?

Shep · December 18, 2014 at 6:06 pm

We the same issue in production but cannot reproduce locally. The difference being that the watch array is empty. Looking all over for answers to this but doesn’t seem anyone gets an empty array. Any ideas?

PatriciaBaf web traffic guru · January 14, 2015 at 4:40 pm

I love it whenever people get together and share thoughts. Great site, continue the good work!

PatriciaBaf web traffic guru · January 14, 2015 at 4:40 pm

I love it whenever people get together and share thoughts. Great site, continue the good work!

Nate · January 14, 2015 at 5:25 pm

I’m sorry, SHEP. That is a mystery to me as well. Not sure how you can get that error with an empty array.

Nate · January 14, 2015 at 5:25 pm

I’m sorry, SHEP. That is a mystery to me as well. Not sure how you can get that error with an empty array.

Oded Niv · April 12, 2016 at 6:50 am

If it’s really not due to an infinite loop, you can increase the maximum digest cycle Angular allows: https://docs.angularjs.org/api/ng/provider/$rootScopeProvider

Oded Niv · April 12, 2016 at 6:50 am

If it’s really not due to an infinite loop, you can increase the maximum digest cycle Angular allows: https://docs.angularjs.org/api/ng/provider/$rootScopeProvider

Leave a Reply

Related Posts

Careers

How Smartly Talent Works for Candidates

While Smartly is known for pioneering one-of-a-kind, online MBA & Executive MBA education programs, we also take pride in our budding career network, Smartly Talent. Smartly Talent is designed as an employer first career network, Read more…

Careers

Smartly MBA Student Spotlight: Hafeez Dhalla

This week, we chatted with biotech expert Hafeez Dhalla, who is in currently in our Fall 2016 class and about to graduate. We learned more about his MBA experience and what’s in store for him Read more…

Smartly

To our pioneer class: Congratulations on your graduation, MBAs!

After comprehensive academic study, extensive discourse in our case study discussions, and the completion of rigorous exams, they’ve done it – graduated from a new elite MBA program that’s the only mobile-first degree system. Smartly’s MBA Read more…