google-apps-script google-sheets file-upload web-applications server-error

ScriptError: We're sorry, a server error occured. Please wait a bit and try again

I keep getting

ScriptError: We're sorry, a server error occured. Please wait a bit and try again.

whenever I try to run the following code:

macros.gs

/**   @OnlyCurrentDoc   */
// When the Sheet is opened, add the menu and create an item in the menu *** WORKING
function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Menu')
      .addItem('Send Confirmation Email', 'createSideBar')
      .addToUi();
}


// Creates the side bar from the Index.html file and displays it *** WORKING
function createSideBar() {
  var form = HtmlService.createTemplateFromFile('Index').evaluate().setTitle('Send Confirmation Email');
  SpreadsheetApp.getUi().showSidebar(form);
}


// Test function where I make a request to my site *** NOT WORKING
function testerr(formObject) {
  UrlFetchApp.fetch('https://webhook.site/...');
  return "Complete!";
}

Form.html

<form id="sendEmailForm" onsubmit="handleFormSubmit(this)">

    <div class="form-group">
        <label for="row_number">Row</label>
        <input class="form-control form-control-sm" type="number" id="row_number" name="row_number" required>
    </div>

    <div class="custom-file">
        <input type="file" class="custom-file-input" id="images_input" name="images_input" multiple required>
        <label class="custom-file-label" for="images_input">Select images...</label>
    </div> 

    <button id="submit-btn" type="submit" class="btn btn-primary btn-md btn-block">Submit</button>

</form>

JavaScript.html

<script>
    // Prevent forms from submitting. *** WORKING
    function preventFormSubmit() {
        console.log('Entered preventFormSubmit()...');
        
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', function (event) {
                event.preventDefault();
            });
        }
        
        console.log('Exited preventFormSubmit()...');
    }
    window.addEventListener('load', preventFormSubmit); // *** WORKING

    // *** NOT WORKING
    function handleFormSubmit(formObject) {
        console.log('Entered handleFormSubmit()...');
        
        google.script.run.withFailureHandler(updateButton).testerr(formObject);
        google.script.run.withSuccessHandler(updateButton).testerr(formObject);
        
        console.log('Exited handleFormSubmit()...');
    }

    // *** WORKING
    function updateButton(str) {
        document.getElementById('submit-btn').innerHTML = str;
    }
</script>

I simply want to create sidebar form that when submitted will make a request to a site. The only issue is when you click on submit, the ScriptError will show up. I've pinpointed where the error is being thrown: when handleFormSubmit() is called after hitting submit, this line google.script.run.withFailureHandler(updateButton).testerr(formObject) causes the error to be thrown.

I tried commenting all the lines out in the testerr() function and replacing them with a simple return "Complete!"; line. Still, the error persists.

Why is this happening? I can't figure out why, any help is appreciated!

Solution

I'm not sure if this will solve "all" the problems with your code, but...

Replace

google.script.run.withFailureHandler(updateButton).testerr(formObject);
google.script.run.withSuccessHandler(updateButton).testerr(formObject);

google.script.run
.withFailureHandler(updateButton)
.withSuccessHandler(updateButton)
.testerr(formObject);

The above because the original code is making two calls to the same server function. This could introduce some problems due to a "race condition" (any of the lines could finish before the other, and both will call the same client-side callback)

Maybe the combination of the new runtime(v8) and the use of input file="type" is causing problems. Try changing to the old runtime.