[whatwg/fetch] Using multipart/form-data with multer occasionally causes React app to crash and refresh (#677)

I am having a frustrating bug that I can't pin down - my entire React application is refreshing with a The development server has disconnected. Refresh the page if necessary. - This is occurring after I send a multipart/form-data fetch request to my API from the client. Something is wrong with the fetch request - it is causing the entire CRA app to reset, flushing the state.

The path to this bug is through a simple form that should allow the user to upload a new item to the database, as well as attaching an image through a file type input. The JSON data is used to create a new DB entry, the API handles the file upload using the multer library, and the filepath of the image is appended to the DB entry so an image can be loaded dynamically upon React DOM render.

Something is really going wrong with the fetch request. About 50% of the time it will proceed without a problem. However, something is inherently problematic about using FormData as the Body of a multipart/form-data fetch request. To test, I have repeatedly submitted this upload form. It can work 10 or 20 times. Then, for no reason, the dev server will reset, the page will go blank and reload. There is no change in the CRA terminal.

The behavior of the requests is strange as well - a successful request will be logged with a status code
i.e. POST /storeItem 200 14.994 ms - 281
Yet a failed request will lack a status code in the network tab and in the API terminal
i.e. POST /images/marketplace-item - - ms - -

Here is a gist of some code to reproduce the issue:

https://gist.github.com/Mikhail-MM/5c843ef8c77cf6d534c09f536ab0c06a

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/fetch/issues/677