Catch/Prevent Page Change When Hitting Breakpoint: Firefox

Question

I'm having an issue where AJAX requests that are not completed are triggering some kind of error that is caught by my global error handler when using Firefox.

The result is that for a split second before the page changes, an alert appears saying "we had trouble communicating with the server". This is harmless, since the page is changing, but it is annoying and I want to identify what the message is and avoid it in Firefox.

Since the issue only appears when Firefox aborts these in flight AJAX requests, I need to break on the page in the browser before the new one reloads.

I'm using Firefox 66.0.3.

According to Mozilla's webdocs, it is not yet possible to break on a DOM event in the "new debugger", like it is in Chrome devtools:

I have error handling code that I can attach a breakpoint to. Unfortunately though, any breakpoint (or debugger statement) does not prevent the page from changing so I can't actually debug.

Is there any way for a breakpoint to catch before a page change so I can investigate the stack/console?

Answer 1

So this isn't the "perfect" solution, but it is "a" solution.

What I did in order to find the necessary information I needed to debug was to persist the log in the console.

I then modified our scripts to log various variables and/or the stack to the console so that I could debug the state of the request and the browser that caused the issue to present.

For what its worth, what was happening is that in closing down an AJAX request when a user navigates from the page, in Firefox the jQuery ajaxError handler is called, and the statusText argument is set to "error".

To prevent the handler from throwing an erroneous "error communicating with the server" popup, I check if the request's status is set to 0 still (unsent/loading).

And no, I'm not sure why Chrome doesn't trigger the ajax error handler but Firefox does.