SHARE

EDUCATION

How do I read the AngularJS message: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations

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.


SHARE

Trending now

EDUCATIONFebruary 26, 2024
Quantic Approved for Full, Five-year Accreditation Renewal; Plans to Pursue More Degrees

February 27, 2024 Quantic School of Business & Technology (“Quantic”), first accredited as a degree-granting institution in the United States in 2020, has received approval for full renewal of its accreditation. Quantic’s accrediting body, the Distance Education Accrediting Commission (DEAC), reviewed findings from a site visit with Quantic leadership in 2023 and voted to renew …

MBAAugust 11, 2022
Women MBA Grads On The Rise: Reasons To Join Them Post-Covid

The pandemic changed so much of how we live life—from how we shop for our groceries and everyday supplies, to how we attend worship services and school classes.  Every aspect of our lives, it seems, looks a bit different now than it did in the time before the spring of 2020. One thing that significantly …

MBAAugust 5, 2022
The Rising Number of Women in Business School Explained

A harsh reality concerning the business world is that women face many disadvantages in their effort to bridge the gender gap. Despite making up slightly more than half the population, women rarely appear on the list of top business leaders. This disparity likely traces its roots to the smaller proportion of women in business schools …

Ready to jump start your career?

Start learning with Quantic.