Put request on Edge and Firefox triggers 'Network error'

Describe the bug On Edge and Firefox I want to upload a file to google cloud. When I follow their instructions in order to put the file by chunks, it works fine on chrome latest version, but fails silently on Edge and Firefox.

On Edge the following happens :

• We prepare a PUT request with the correct headers Content-Type and Content-Range
• The request is send with the first chunk of bytes as payload
• When the request should be valid and we then proceed to the next chunk of data, the request silently errored (no catch triggered)
• Because we use axios-retry, the request is send again, still failing silently.

On Firefox the following happens :

• We prepare a PUT request with the correct headers Content-Type and Content-Range
• The request is send with the first chunk of bytes as payload
• When the request should be valid and we then proceed to the next chunk of data, the request silently errored (no catch triggered) and we have to wait for the gcloud timeout (5min)
• Because we use axios-retry, the request is send again, still failing silently.

To Reproduce

import baseAxios from 'axios';
import axiosRetry from 'axios-retry';
import reader from '@/libs/FileReader';

const axios = baseAxios.create();
axiosRetry(axios, {
    retries: 5,
    retryDelay: (retryCount = 0) => (
        (2 ** retryCount) * 1000
    ),
});

function hex2bin(hex: string) {
    const bytes = [];

    for (let x = 0; x < (hex.length - 1); x += 2) {
        bytes.push(parseInt(hex.substring(x, x + 2), 16));
    }

    return String.fromCharCode(...bytes);
}

function uploadChunk(file: File, chunkSize: number, index: number, uploadUrl: string) {
    const start = index * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const blob = file.slice(start, end);

    const headers = {
        'Content-Type': file.type,
        'Content-Range': `bytes ${start}-${end - 1}/${file.size}`,
    };

    const validateStatus = (status: number) => (
        [200, 201, 308].indexOf(status) > -1
    );

    return reader.readChunk(blob).then((chunk: string | ArrayBuffer) => {
        try {
            return axios.put(uploadUrl, chunk, {
                headers,
                validateStatus,
            }).then(() => {
                // Works fine on Chrome and IE11 but not Edge and Firefox
                console.log('RES');
                return;
            }).catch((e) => {
                // Nothing printed here on Firefox and Edge
                console.info('ERR: ', e);
            });
        } catch (e) {
            // Nothing printed here on Firefox and Edge
            console.log('CATCH: ', e);
        }
    });
}

export async function upload(
    file: File,
    hash: string,
    signedUrl: string,
    onProgress: (percentage: number) => void,
) {
    // min 256KB, max 2MB
    const chunkSize = (file.size < 2097152) ? 262144 : 2097152;
    const chunks = Math.ceil(file.size / chunkSize);

    const headers = {
        'Content-Type': file.type,
        'Content-MD5': btoa(hex2bin(hash)),
        'x-goog-resumable': 'start',
    };

    const result = await axios.post(signedUrl, null, { headers }); // Works fine
    const uploadUrl = result.headers.location;

    return initChunkUpload(chunks, chunkSize, onProgress, file, uploadUrl);
}

function initChunkUpload(
    chunks: number,
    chunkSize: number,
    onProgress: (percentage: number) => void,
    file: File,
    uploadUrl: string,
) {
    let currentChunk = 0;

    return new Promise((resolve, reject) => {
        const next = () => {
            uploadChunk(file, chunkSize, currentChunk, uploadUrl)
                .then(() => {
                    currentChunk += 1;
                    onProgress(Math.floor((currentChunk / chunks) * 100));

                    if (currentChunk < chunks) {
                        return next();
                    }
                    return resolve();
                })
                .catch(reject);
        };
        next();
    });
}

Expected behavior The PUT request should at least not fail silently and I should be able to send chunks of my file to google cloud.

Environment:

• Axios Version: 0.19.0
• OS: MacOS Mojave 10.14.6 (18G103) & Windows 10 Family 18362.356
• Browser: Edge 44.18362.329.0 & Firefox 70.0 (64 bit)
• Additional Library Versions: vue 2.6.10 & webpack 4.28.4 & axios-retry 3.1.2

Additional context/Screenshots

Observations

• While debugging, I have found that the request might success depending on the media. I believe the weight of the data chunk to influence the behavior, making the bug a bit random.
• On Firefox, the silent error is cath in the xhr.js here
• On Edge and Firefox, when replacing axios put method by a fetch, it does work:

return fetch(uploadUrl,
       {
            method: 'PUT',
            headers,
            body: chunk,
        }).then(() => {
            // Works on Edge and FF
            console.log('RES');
            return;
        }).catch((e) => {
            console.info('ERR: ', e);
        });

EDGE screenshot

Firefox screenshot

[jasonsaayman]

Closing in favour of #2103

[nayanbhana]

I have this issue right now on Microsoft Edge, no clue how to fix it