Show more details with the ExpressionChangedAfterItHasBeenCheckedError warning

[leocaseiro]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

The current warning message ExpressionChangedAfterItHasBeenCheckedError is telling us what are the values before and after the change detection, but there aren't enough information to help to debug.

We are never sure what object or property is referring to. Also, the lines are not always reliable.

In some cases, we use an array of objects and messages like so are provided:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: 
Expression has changed after it was checked. 
Previous value: 'undefined'. Current value: '[object Object],[object Object]'.
    at viewDebugError (errors.ts:30)
    at expressionChangedAfterItHasBeenCheckedError (errors.ts:29)
    at checkBindingNoChanges (util.ts:145)
    at checkNoChangesNodeInline (view.ts:477)
    at checkNoChangesNode (view.ts:568)
    at debugCheckNoChangesNode (services.ts:557)
    at debugCheckDirectivesFn (services.ts:466)
    at Object.View_App_0._co [as updateDirectives] (App.html:7)
    at Object.debugUpdateDirectives [as updateDirectives] (services.ts:443)
    at checkNoChangesView (view.ts:378)

I can see the file name is (App.html:7), so I presume is something in my template, but it's not clear what it is. Also, note that my bug should be on line 2 (<div *ngIf="testObject">), and not on line 7 as mentioned by angular.

Expected behavior

Perhaps, it would be nice adding to the warning message the property/object that has changed its value.

I would expect the warning message being something like so, instead:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: 
Expression has changed after it was checked. 
Previous testObject value: 'undefined'. Current testObject value: '[{a: 1, b: 2}, {a: 3, b: 4}]'.

PS: note the testObject key from my App class, also the values from object as string.

In that case, it would be easier to debug that the object is testObject;

Minimal reproduction of the problem with instructions

This plunker can give an example of the context provided by angular. http://plnkr.co/edit/mX6REf9oidrVeURCvTZG?p=preview

This plunker is a fork from @adrienboulle from #14748 (comment)

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div *ngIf="testObject">
          Object exists
      </div>
      <div class="image-container"
       [ngStyle]="{
         'height': getHeightPx()
       }">
        <img alt="image" style="height: 100%" [src]="getUrl()"/>
        
      </div>
    </div>
  `,
})
export class App implements AfterViewInit {
  img: Image;
  isLoaded: boolean = false;
  testObject: any;

  constructor(private elementRef: ElementRef) {}

  public ngAfterViewInit(): void {
    this.img = this.elementRef.nativeElement.querySelector('img');
    this.isLoaded = true
    
    this.testObject = [{a: 1, b: 2}, {a: 3, b: 4}];
  }

  public getUrl(): string {
    return 'https://angular.io/resources/images/logos/angular2/angular.png';
  }
  
  public getHeightPx(): string {
    if (!this.isLoaded)
      return '0px';

    return '100px';
  }
}

If you comment line 33: // this.testObject = [{a: 1, b: 2}, {a: 3, b: 4}];, you will end up with another bug with the same issue, but now, referring to the getHeightPx() method which was pointed by @adrienboulle on the issue #14748.

App.html:9 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: 
Expression has changed after it was checked. Previous value: '0px'. Current value: '100px'.

In that case, it's much easier to debug. The line 9 is correct.
Also, because of its values ('0px' and '100px'), it is easier to find the property. However, the message error could have the missing getHeightPx() method which would make the debugging easier.

What is the motivation / use case for changing the behavior?

Make it easier to debug this popular error #18129 #17887 #17572 #15464 #14748 and many other issues.

Environment

Angular version: 4.3.6

[victornoel]

For the record, there was an issue (#17887) but it was closed without explanation... I hope this one will be resolved instead :)

[ocombe]

Ah that's perfect, I was about to open an issue for the same problem. It'd be a great help for devs to have more info in this error message

[crowmagnumb]

+1 for fixing this. This error is hard to find and this would help immensely. I hacked the core.es5.js file and added the following line ...

function expressionChangedAfterItHasBeenCheckedError(context, oldValue, currValue, isFirstCheck) {
    console.log(oldValue, currValue);
    ...
}

... and I was able to find the source of the error right away.

[leocaseiro]

As a complement of @crowmagnumb solution, I've added some more info:

function expressionChangedAfterItHasBeenCheckedError(context, oldValue, currValue, isFirstCheck) {
    console.group('expressionChangedAfterItHasBeenCheckedError');
    console.log('context', context);
    console.log('oldValue', oldValue);
    console.log('currValue', currValue);
    console.log('isFirstCheck', isFirstCheck);
    console.groupEnd();
 ...
}

PS: the file is on node_modules/@angular/core/@angular/core.es5.js:8405

Update, since Angular 5.0.0, the path is node_modules/@angular/core/esm5/core.js:9485

[slawojstanislawski]

Currently when I need more information about it, in the mentioned file (node_modules@angular\core\esm5\core.js) at the very beginning of the expressionChangedAfterItHasBeenCheckedError function I tend to add this line: oldValue = JSON.stringify(oldValue) - that way the old value is in the red console error message, for quicker lookup in the logs. I wonder why it's not implemented this way, perhaps some apps bind to enormous objects, so a huge log could be cumbersome, but I believe it's more of an exception than a rule.

[alexzuza]

Currently i created online editor where i can catch such kind of errors
https://medium.com/@a.yurich.zuev/catch-angular-template-errors-like-a-pro-or-how-i-create-angular-demo-e98694977911

[pkozlowski-opensource]

A simpler reproduce scenario: https://stackblitz.com/edit/angular-ivy-zzuuml?file=src%2Fapp%2Fapp.component.ts

The good news is that, starting with ivy, we've got a stack trace that points to the exact place in the template where the "culprit" binding is:

Still, we could do better and include more info in the error. This would require changes to the compiled output, though (probably only in the dev mode) as we don't have access to the expression "source" when a binding is evaluated.

For now checking the stack trace is the best way of debugging this error.

[AndrewKushnir]

Closing this ticket in favor of #34454.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}