How to handle errors when using multiple components

Question

I've got a component which goes out and makes an http request to get some data. The response could include errors from the request which I want to display within my application using a seperate error component/service/view.

I've got my components housed in my app.component.html view like:

<div>
    <app-error *ngIf="// check if endpoint returned errors, if yes, show"></app-error>
    <app-endpoint></app-endpoint>
</div>

I'm unsure how to get data from the endpoint component (where the errors will enter my application) into the error component and view.

For examples sake, this is logically what I'd want to happen when the EndpointComponent tries to get data:

endpoint.component.ts

export class EndpointComponent 
{
    constructor(private errorService: ErrorService){ }

    getData(){
        this.endpointService.get().subscribe(
            response => checkError(response) // check and push to my error component if it exists)
...

error.service.ts

export class ErrorService 
{
    public pushErrors(error: string) {

        // In here would be the code to push this error
        // to error.component.ts / error.component.html
    }
...

error.component.html

<div class="alert alert-danger">
    <ul *ngFor="let error of errors">
        <li>{{error}}</li>
    </ul>
</div>

I'm unsure how to fill my error view with the error sent back within my endpoint component. Since this view would only ever be populated if errors exist within my other components response, I'm not sure how we tell our application to fill the elements with the error data.

I don't understand the question. Your solution looks valid to me. ErrorComponent shows as soon as there are some errors to display, and it shows a list of these errors. Isn't it what it's supposed to do? — Nuno Sousa
– Nuno Sousa, Commented Jan 7, 2019 at 20:28
Ahhh i got it. In error.component.ts you need to import the private error service and then subscribe to an observable, who emits the errors. — Nuno Sousa
– Nuno Sousa, Commented Jan 7, 2019 at 20:30
Or even just do this.errors=this.errorService.errors as long as it is an object it would be shared (so it would show updates) — Nuno Sousa
– Nuno Sousa, Commented Jan 7, 2019 at 20:32

nircraft · Accepted Answer · 2019-01-07 20:41:11Z

2

I think what you want is to subscribe to the error service errorin your error component.

I would prefer to do it using a BehaviorSubject.

Ex, in Error service define the error as a behaviourSubject and subscribe to it in the ErrorComponent. As soon as a new Error is pushed you will get the error in the component.

private errorObj = null;
    public errorList: BehaviorSubject<any> = new BehaviorSubject<any>(this.errorObj);

    pushError(value: any) {
        this.errorList.next(value);
    }`

Now in the component subscribe to errorBanner. Ex: this.errorService.errorBanner.subscribe( err => {this.showError = true;})

Now in the Error Component HTML. Use showError to display the errors recived from errorService.

Please Note that in this case ErrorComponent will always show the latest error seen in the app.

answered Jan 7, 2019 at 20:41

nircraft

8,5085 gold badges33 silver badges46 bronze badges

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

1 Comment

Nuno Sousa Over a year ago

You should use the next for the entire list of errors, not just one, that way you can next([]), to clear everything, else this requires too much decoupling on the other side.

Nuno Sousa · Accepted Answer · 2019-01-07 20:52:39Z

1

The observable pattern in the other answer is the perhaps the best and more angular thematic way to do it.

But it's perfectly fine just to share an errors object between the service and the component ( the service works like a global wrapper here, but it's also permissible according to the angular team).

error.service.ts

export class ErrorService 
{
    public errorList;
    public pushErrors(errors: string[]) {

        //I refactored this for plural 
        this.errorList.push(...errors);
    }
    public clearErrors(){
       this.errorList.splice(0,this.errorList.length) // we remove like this so that there is no reassignment
    }

error.component.ts

public error;
constructor(private errorService: ErrorService){
    this.errors = errorService.errorList
}

Whenever some component pushes something into the ErrorService, the ErrorComponent will be notified of the change, because a variable it is watching has changed

answered Jan 7, 2019 at 20:52

Nuno Sousa

8927 silver badges16 bronze badges

3 Comments

expenguin Over a year ago

This is exactly what I was looking for. Thank you!

nircraft Over a year ago

In this case though, once the component is rendered, do you think it will get the new errorList? Since the component is already rendered and constructor call is complete. How will it get the new Error?

Nuno Sousa Over a year ago

I use this pattern in my own apps. It works. But yes the ErrorComponent must be constructed after the service. And it will update as long as you never reassign. If you must reassign the array for map filter purposes wrap it in an object and it will still work. It works because of how angular zones introduce getters in template objects to notify angular of changes.

Collectives™ on Stack Overflow

How to handle errors when using multiple components

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related