Standard way to handle bugs in the function passed to subscribe in angular

Angular 18 - I ran into our custom error handler logging the 2nd exception that occurred rather than the primary which is the cause of the 2nd one.

we have an init method like so

this._proposalSvc.proposalXref$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((response: FetchProposalXrefResponse) => {
this.xrefResponse = response;

if (
this.xrefResponse.outline.trainingFormat ===
ClassFormatEnumDto.MULTI_DAY
) {
this.isMultiDay = true;
}

this.statusInfo = new StatusInfo();
this.statusInfo.projectName = response.outline?.projectName;
this.statusInfo.stage = response.courseStage;
this.statusInfo.hasCredits = true;
this.statusInfo.creditsLeft = response?.customerCreditsLeft;

this.statusInfo.avatar = new AvatarInfo();
this.statusInfo.avatar.chatId = response.proposalXref?.xrefId;
this.statusInfo.avatar.link = response?.otherParty?.avatar;
this.statusInfo.avatar.firstName =
response?.otherParty?.firstName;
this.statusInfo.avatar.lastName =
response?.otherParty?.lastName;

this.calculateIfAvailable();
});


If an exception is thrown at the end, the custom error handler pops up. If thrown in the beginning of the method, then angular tries to render and that fails based on required things in the page (we tried going all optional as a practice but something always gets missed . I hit yet another one today where our original error/stacktrace was hidden by the 2ndary rendering failure making debugging near impossible and very time consuming.

for now I moved calculateIfAvailable() to the bottom which was the issue. now that it throws after things are setup, it pops up our custom error handler when it has a bug. this keeps happening though so ->

Is there a way to catch and redirect to a bug page instead to completely throw away the angular rendering process which may have a 2ndary bug covering up the primary? The hard part is my custom error handler does NOT receive the primary error and instead received the 2ndary error(very annoying - it would be better if it received BOTH or PRIMARY). I spent a bunch of time and finally found moving the exception up and down in that subscribe method is what was breaking things and hiding the original exception.

Now that I know what is going on though, I am at a loss as how to receive the primary(first) exception when angular then fails the render after and sends me the render exception. Is there some hook so I can least record the primary for later use when I receive the secondary one so it is at least reported to our cloud logging?

Ideally if I can receive the primary and know there was a render failure, I can then throw the user to a brand new page I know will render instead of saying on the current broken rendering page. Any other ideas/solutions appreciatedd as the ones are above are just ideas on where to go next if even possible?

I tried the above and didn't think of anything else yet.

Continue reading...