Navigation Aborted

[elucidsoft]

I want to post this here because I spent 3 weeks (no exaggeration) on trying to find a needle in a haystack in my app. It's a rather large code base with complex routing and lots of reactive stuff happening in the background.

If you are getting Navigation Aborted errors randomly and can't figure out why, this is most likely what's happening. It may not be exactly what my use case is but something similar.

In my application, the user is able to add an item on a form, they click save, the data is submitted to the backend. On the backend, we send out websock notifications to all clients (including the user who submitted the item) and it shows up in their "Notifications" in the top navbar. This is a typical UI you see all over the place on the web. When the user clicks save, when it's done posting the data to the backend it also uses goto to navigate back to the list of items.

What I was seeing is that in some rare circumstances the navigation was getting aborted leaving the user staring at the form they just saved, and nothing was happening. No errors occurred, nothing. So why did was this happening? Well turns out when we get a notification from the socket, we update a store, the component in the TopNavbar watches this store and updates it's UI when it gets an update. This caused a DOM update while navigating, thus a Navigation Abortion occurred.

This fix was easy, we queue up any socket notifications during navigation, and replay them after navigation is completed and we avoid this issue. One thing I am going to suggest as an issue however, that would of made finding this issue SO much easier is to bubble up the Navigation Aborted error to the client. I was only able to see it by digging through the call stack with Chrome in debug mode, it does not bubble it. It also doesn't show an explanation as to why the navigation was aborted (that would also be very helpful).

Putting this here so other people can find this on google searches.