How to debug TypeScript NS_BINDING_ABORTED for POST-Requests

Question

I got a simple functionality that calls my backend, via POST-Request. It uses the same wrapper function that is used everywhere in the project, just does "fetch" and is called in some async/await-manner.

body is just static stuff, some ID and two dates. pretty straightforward - the wrapper-function would fail if body weren't supplied at all or similar.

but the request "always" (well, there were one or two successfull tries in about 100 retries) fails with NS_BINDING_ABORTED

Google tells me that message means I had some cache hit and the request was canceled - but cache is disabled, Header-Vars should prevent it AND adding random stuff to the URL doesn't do shit. (sometimes that OPTIONS-call gets through, but POST itself fails still)

nearly all post-requests in that project are done with this exact same wrapper.

Anyone got some ideas where I could look to debug this?

Astonishing

btw: chrome cancels too, but sends the full body first, so I see requests incomming in my backend - no success for the request though, so it's not a browser-specific problem – Astonishing

Answer 1

Turns out my request wasn't cancelled due to a cache hit, but due to page reload.

The reload was caused by a form that was submitted after my onclick-event fired, but before my request had any chance to be completed.

Note: Always set that type-property on your buttons

Still no idea how to debug that in general, but in my case having the browser clearing it's network-tab and the reason for the next request beeing due to Initiator: document should have been a clue, meaning it's not done by some JS, but by some html functionality.

Further Reading:

• NS_BINDING_ABORTED Javascript window.location.replace()
• MDN Archive - Network Error Codes

Astonishing

Answer 2

We had a similar situation, but this was mostly happening on Firefox, though it did happen once on Chrome.

Our problem ended up being that a form was getting submitted at the same time we used fetch() in JS to hit our API and the refresh from the form submission was interfering with the fetch().

So, our solution was to add preventDefault() to the top of the function that hits the API and then add window.location.reload() to the end of that function so the page would still reload.

Morvin