Salesforce LWC - Multiple Apex Callout Imperatively Fails

Question

I am trying to make multiple callout to Apex imperatively from a FOR loop. But strangely, only first 6 transaction are getting successful. Rest all are failing. There is no mention of any such limits of number of callout from LWC to Apex in Developer Document.

Reason to follow this approach is each callout will follow a new set of Apex limits.

import { LightningElement, api, wire, track } from 'lwc';
import insertRecords from '@salesforce/apex/FileUploaderXCtrl.insertRecords';

export default class FileUploadExample extends LightningElement {

    file;
    filename;
    filecontent;
    output = [];
    buttonVisible = false;
    position = 0;

    get acceptedFormats() {
        return ['.csv'];
    }

    uploadFiles(event) {
        console.log('Hey! No of Callouts: ----------->' + this.output.length);
        for (let index = 0; index < this.output.length; index++) {
            console.log('Making Callouts Now! Watch Out --------');
            insertRecords({ jsonObjInput: this.output[index] })
            .then(() => { console.log('*******\n\nHurray! Its Working....\n\n********'); })
            .catch((error) => { console.log('Go Home...'); });
            
        }
    }

    handleUploadFinished(event) {
        if (event.target.files.length > 0) {
            this.filename = event.target.files[0].name;
            this.file = event.target.files[0];
            var reader = new FileReader();
            var jsonObj = [];
            reader.readAsText(this.file, "UTF-8");
            reader.onload = (evt) => {
                console.log('File Name: ----------->' + this.filename);
                this.filecontent = evt.target.result;
                let rows = this.filecontent.split('\n');
                let header = rows[0].split(',');
                rows.shift();
                console.log('Header: ----------->' + header);
                rows.forEach(element => {
                    let data = element.split(',');
                    let obj = {};
                    for (let index = 0; index < header.length; index++) {
                        obj[header[index].trim()] = data[index].trim();
                    }
                    jsonObj.push(obj);
                });
                let result = new Array(Math.ceil(jsonObj.length / 10000)).fill().map(_ => jsonObj.splice(0, 10000));
                result.forEach(element => {
                    this.output.push(JSON.stringify(element));
                });
                console.log('Apex Input Parameter: ----------->' + this.output);
                console.log('No of Callouts: ----------->' + this.output.length);
            }
            reader.onloadend = (evt) => {
                this.buttonVisible = true;
            }
            reader.onerror = (evt) => {
                if (evt.target.error.name == "NotReadableError") {
                    console.log('An Error Occured Reading this File!!');
                    alert('An Error Occured Reading this File!!');
                }
            }
        }
    }

}

Answer 1

There are couple of good write-ups on stackexchange already on this. This is known as boxcarring and lwc does a boxcarring due to browsers ability to limit number of calls in parallel.

https://salesforce.stackexchange.com/questions/263382/how-to-turn-boxcarring-off-for-lwc-imperative-apex-method-calls?atw=1

https://salesforce.stackexchange.com/questions/293025/boxcaring-is-removed-from-lwc-components

You should review them to under why salesforce does boxcarring in lwc.

In short, you can choose to go asynchronous with promises to avoid these or the other workaround would be setTimeout.

Both of these will not provide a great user experience and instead, you should explore other alternative methods for achieving this that includes below

• Use Bulk API v2.0 for all data operations
• Built UI interface on something like Heroku and use python or Node to do the processing than using apex to do a resource-intensive job.