URL in report refer to our page error URL instead of the original error context URL (Angular 8)

[Eric Gagnon]

Hello,

We use a custom global error handler, if we have a unhandled error we then go to our technical error page.

In the report, the error is reported to have occured in URL corresponding to our technical error page

Message
Uncaught SyntaxError: Unexpected token in JSON at position 40
URL
https://xxxx/technical-error-page

As the error is comming from a parsing of url params in our search page, we would expect the url to be that page, as in this simulated exemple

Message
Uncaught SyntaxError: Unexpected token in JSON at position 40
URL
https://xxxx/search?params=xyz

We do use rollbar before changing route to our technical error page.

    this.rollbar.error(error.originalError || error);
    router.navigate(['/technical-error-page']);

I suspect that the url is collected later (notifier?) and likely in a postponed process but I'm not familiar with the code base.

Is there a simple / safe way to make sure the errror is collecting the right url? (delayed frame or timer for our navigate?) we can do a few attemp to fix it but will gladely take any hint!

Maybe it's a bug that could be fixed in the library?

Great product btw!

Thanks,

Eric

[Walt Jones]

@eric-gagnon Apologies for the late reply.

Assuming router.navigate sets window.location.href, it will cause a page reload in the browser. Rollbar.js doesn't handle the error message asynchronously by the time request.url is set, but it does do so by the time the API request is sent. What is happening in the example code is the page is reloaded before the API request to Rollbar is made. The Rollbar message is never sent.

Since you are seeing a Rollbar message with the new URL, it leads me to expect that this code path executes again after the page reload. At this point, the current URL will now be identical to what you set in router.navigate, there will be no page reload, and the message will be sent successfully with the new URL.

The following code will generate two messages: One with the undecorated URL, and the second with '#foo'.

rollbar.error('test error location');
rollbar.client.wait(function () {
  window.location.href = '#foo';
});

Without the wait, the first message is generated with the correct URL, but never sent.

rollbar.error('test error location');
window.location.href = '#foo';

If I've made any wrong assumptions about how your code is set up, let me know.

[Eric Gagnon]

Hello,

In our case, the event is sent but the url refer to the new (virtual page) context. Adding a frame / delay wait before navigating should probably solve that problem without much visible impact to the user of the application. I didn't work much myself on the issue but I'll check with my collegue to make sure things are working as expected.

We had another issue but it was more on Angular side (routing get brokend if we raise a error (for and invalid parameter) during routing). The quick fix was to assign location.href to go to error page but effectively that was swallowing rollbar error along the way!

I'll check "rollbar.client.wait", it does look like the pattern we should use...

Eric

[Walt Jones]

Closing. Reopen if you continue to see an issue here.

[Eric Gagnon]

Thank you for the help, still working on it.

rollbar.client.wait definively helped but we have to solidify our code, and error mangement overall, as multiple errors can get in meanwhile.

We still had weird display issue after the navigate but it does look that it's an issue with Angular, using "zones" seem to be helping (see angular/angular#15946).

[Eric Gagnon]

All seem to be good now, we get the url of the error page, thanks again!