Observable.subscribe not always execute http request

Question

I'm trying write angular app to send sliced file to backend.

What I'm doing with file:

1. Cut multiple files to array (every slice have 1MB)

 const array = [];
            for (let i = 0; i < this.File.file.size; i += 1048576) {
              array.push(this.File.file.slice(i, i + 1048576));
            }

2. For every file call fuction UploadAllSlices()

private UploadAllSlices() {
    let sliceNumber = 0;
    const fileUploadSub: Subject<void> = new Subject();

    const chunkObserver = new Observable(observer => {
      const chunkUploadSub: Subscription = fileUploadSub.subscribe(
        _ => {        
          this.uploadFile(sliceNumber).subscribe((chunkReponse: any) => {
                // my logic here
           },
        e => {
          console.log('ERROR', e);
        }
      );
        sliceNumber++;
      fileUploadSub.next();
    });
    }).pipe(
      takeUntil(this.pause$),
      retry(1000)
    );
  }

3. Function uploadFile (using inside UploadAllSlices())

private uploadFile (index: number) {
    const formData = new FormData();

    formData.append(); // other data not important 
    formData.append(); // other data not important 
    formData.append('SliceContent', this.File.array[index]);
   
    return this.http.patch(URL , formData).pipe(
      retry(1000),
      takeUntil(this.pause$)
    );
  }

When i upload 1-3 files everything work perfect. But when i try upload 10-15 files in one time some files randomly stuck. ( sometimes all files are uploaded, sometimes 1-2 files stuck, sometimes 5 files stuck its very randomly)

for those files that stuck this.http.patch is not being executed so I can't get response and make my logic here:

  this.uploadFile(sliceNumber).subscribe((chunkReponse: any) => {
                // logic here
           }

Any idea why it's stuck randomly, and why subscribe doesn't send http.patch to backend?

Answer 1

You arent handling errors.

return this.http.patch(URL , formData).pipe(
  retry(1000),
  takeUntil(this.pause$),
  catchError(() => of(null))
);

OR

this.uploadFile(sliceNumber).subscribe(
  (chunkReponse: any) => { /* logic here */ },
  (err) => console.log('oops', err);
);

If an Observable stream errors without the error being handled it will fall over and never emit again (although HTTP Observables only emit once and then complete - unless they error). Note that the null from of(null) will be passed to the success block, which is why you only need one of these 2 approaches. In your case, the 2nd one is probably more appropriate since it will give more info about the HTTP error.

Your browser debug console network tab should also give more info on the HTTP errors.

I'm wondering in my head what browser restrictions there are on uploading 15 1MB HTTP requests consecutively. Maybe a browser restriction is causing failure. Also check to see if your server is receiving these requests and, if so, what response it gives.