1

I'm using Angular 2.4.9 and have implemented a custom error handler which just catches all errors and navigates to an error route to display the message.

I have a toggle button to show/hide a detailed message which is bound to a boolean (also tried a boolean within an object i.e. object.showError) All works correctly if im catching Http errors and throwing an error myself. However if I encounter an Angular error such as ViewWrappedError the databinding refuses to work. (click) evets still function and the boolean is toggled from true to false its just the changes are not reflected on the page.

Am I missing something to get this to work?

import { Component } from '@angular/core';
import { ErrorService } from './error.service';
import { Error } from './index';

@Component({
  moduleId: module.id,
  selector: 'error',
  templateUrl: 'error.component.html',
  styleUrls: ['error.component.css']
})

export class ErrorComponent {

  public error: Error;
  public showDetailedError: boolean;

  constructor(private errorService: ErrorService) {
    this.showDetailedError = false;
    this.error = this.errorService.getError();
  }
}

HTML Template

<div class="error-container">
  <h1>Sorry, something went wrong.</h1>
  <p class="error-message">An error occurred while processing your request.  Details on this error can be found below.</p>
</div>
  <p *ngIf="!showDetailedError" (click)="showDetailedError = !showDetailedError" class="info-icon">Click for detailed description</p>
</div>
Steve Fitzsimons
  • 3,754
  • 7
  • 27
  • 66

2 Answers2

0

Its hard to pinpoint the problem without any code but i think object.showError is most likely your problem.

Angular change detection know about the components attributes but not inside complex objects, especially when it lives inside array objects. Trying move that flag out or bind it using a getter function.

Julian
  • 609
  • 3
  • 7
0

You can try to invoke change detection:

@Injectable()
class MyExceptionHandler implements ExceptionHandler {
  constructor(private appRef:ApplicationRef) {}
  call(error, stackTrace = null, reason = null) {
    // do something with the exception
    this.appRef.tick();
  }
}

When an exception happens during change detection, Angular doesn't continue change detection after the ErrorHandler handles it. Invoking it explicitly might help. I haven't tried myself though.
I don't think it's considered safe to continue working with the application after an exception. The custom error handler is mostly a way to report exceptions (for example in a server log) so that you can fix the cause in your source.

See also Angular 2: Custom ExceptionHandler Change Detection Lag

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Worked for me. Added the ApplicationRef into my component and triggered the change detection manually when toggling my detailed error – Steve Fitzsimons Mar 16 '17 at 11:23