Angular/Angular2 data binding not working after catching Javascript error using custom errorhandler

Question

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>

Community · Accepted Answer · 2017-05-23 12:32:30Z

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

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 16, 2017 at 9:49

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Fitzsimons Over a year ago

Worked for me. Added the ApplicationRef into my component and triggered the change detection manually when toggling my detailed error

Julian · Accepted Answer · 2017-03-15 17:24:16Z

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.

answered Mar 15, 2017 at 17:24

Julian

6093 silver badges7 bronze badges

1 Comment

Steve Fitzsimons Over a year ago

Currently my boolean is not inside an object. I added some code to shed some light

Collectives™ on Stack Overflow

Angular/Angular2 data binding not working after catching Javascript error using custom errorhandler

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related