google.script.run Callbacks Not Firing from HtmlService Dialog [406814758]

Assigned

Bug

Status Update

No update yet.

Description

al...@hosthub.com

created issue #1

Mar 27, 2025 08:03PM

Description When using google.script.run from an HtmlService modeless dialog (or sidebar) within Google Sheets to call a server-side Apps Script function, the registered callback handlers (withSuccessHandler and withFailureHandler) are not being invoked on the client side.

Extensive client-side logging confirms:

The google.script.run.MY_FUNCTION() call is initiated successfully without synchronous errors. Both .withSuccessHandler(handleSuccess) and .withFailureHandler(handleFailure) are registered immediately before the call. Browser network logs (XHR requests to /callback?..., Net state changes) indicate that the server is likely processing the request and sending a response. However, neither the handleSuccess function nor the handleFailure function is ever executed, according to client-side console logs. The client script effectively hangs waiting for a callback that never arrives. This issue persists even when:

The server-side function (getProgressStatus in the example) is simplified to return only a basic, hardcoded JavaScript object { completed: false, messages: ["Test..."], result: { test: true } }. This rules out problems with complex return types or server-side errors. The client-side HTML (ProgressDialog.html in the example) is reduced to a minimal implementation with extensive logging focused solely on the google.script.run call and its callbacks. The test is run in an Incognito/Private browser window, ruling out interference from browser extensions. This strongly suggests a potential bug or environmental issue within the Apps Script HtmlService execution environment or the google.script.run communication bridge itself, preventing the reliable delivery of callbacks to the client-side JavaScript.

Code Code.gs (Minimal Server Function):

// Function called by the client
function getProgressStatus() {
   const timestamp = new Date().toLocaleTimeString();
   Logger.log(`==== getProgressStatus (SUPER SIMPLE TEST) Called at ${timestamp} ====`);
   // Return a very basic, hardcoded object
   return { 
       completed: false, 
       messages: ["Server test response at " + timestamp], 
       result: { test: true } 
   };
}

// Function to show the dialog (called from menu or elsewhere)
function showMinimalDialog() {
  var html = HtmlService.createHtmlOutputFromFile('ProgressDialog') // Ensure filename matches
    .setWidth(500)
    .setHeight(450); 
  SpreadsheetApp.getUi().showModelessDialog(html, 'Callback Debugger');
}

// Minimal onOpen to add a menu item
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Debug')
    .addItem('Show Callback Debugger', 'showMinimalDialog')
    .addToUi();
}

ProgressDialog.html (Minimal Client with Verbose Logging):

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <title>Callback Debugger</title>
    <style>
        body { font-family: monospace; margin: 10px; font-size: 11px; }
        #status { margin-bottom: 10px; padding: 5px; border: 1px solid blue; background-color: #eef; min-height: 20px; font-weight: bold;}
        #log-container { border: 1px solid #ccc; padding: 5px; background-color: #f9f9f9; }
        #log { height: 350px; overflow-y: scroll; font-size: 10px; white-space: pre; font-family: monospace; }
        .log-entry { margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px dotted #eee; }
        .log-info { color: #333; }
        .log-success { color: green; }
        .log-warn { color: orange; }
        .log-error { color: red; font-weight: bold;}
    </style>
</head>
<body>
    <h3>Callback Debugger</h3>
    <div id="status">Client Initializing...</div>
    <div id="log-container">
        <strong>Client Log:</strong>
        <div id="log"></div>
    </div>

    <script>
        const logDiv = document.getElementById('log');
        const statusDiv = document.getElementById('status');
        const scriptLoadTime = new Date();
        let pollCount = 0;
        let pollingActive = true;
        let initialPollScheduled = false;

        // --- Central Logging Function ---
        function log(level, message) {
            const timestamp = new Date();
            const elapsed = ((timestamp - scriptLoadTime) / 1000).toFixed(3);
            const logMsg = `[${elapsed}s] (${level.toUpperCase()}) ${message}`;
            let consoleMethod = console.log;
            if (level === 'error') consoleMethod = console.error;
            if (level === 'warn') consoleMethod = console.warn;
            if (level === 'success') consoleMethod = console.info;
            consoleMethod(logMsg); // Log to browser console
            if (logDiv) { // Log to dialog area
                const logEntry = document.createElement('div');
                logEntry.textContent = logMsg;
                logEntry.className = `log-entry log-${level}`;
                logDiv.appendChild(logEntry);
                logDiv.scrollTop = logDiv.scrollHeight;
            } else { console.error("INTERNAL LOG ERROR: logDiv not found!"); }
        }

        log('info', "Client script parsing started.");

        // --- Callback Handlers ---
        function handleSuccess(status) {
            log('success', `----> SUCCESS Handler Executed (Poll #${pollCount}) <----`); // <<< THIS IS NEVER LOGGED
            try {
                log('info', `Raw Status Received: ${JSON.stringify(status)}`);
                if (statusDiv) statusDiv.textContent = `Success on Poll #${pollCount}`;
                if (status && status.completed) {
                    log('info', "Server reported COMPLETED.");
                    pollingActive = false;
                    if (statusDiv) statusDiv.textContent += ` - Completed. Result: ${JSON.stringify(status.result || {})}`;
                } else if (status && !status.completed) {
                    log('info', "Server reported NOT completed.");
                    if (pollingActive) {
                        log('info', "Scheduling next poll in 1500ms...");
                        setTimeout(pollServer, 1500);
                        log('info', "Next poll scheduled.");
                    } else { log('warn', "Polling was deactivated, not scheduling next poll."); }
                } else {
                    log('warn', "Invalid status object structure in success handler.");
                    if (statusDiv) statusDiv.textContent = "Invalid status object received.";
                    pollingActive = false;
                }
            } catch (e) { log('error', `!!! Error INSIDE handleSuccess: ${e.message} !!! Stack: ${e.stack}`); pollingActive = false; }
        }

        function handleFailure(error) {
            log('error', `!!!!> FAILURE Handler Executed (Poll #${pollCount}) <!!!!`); // <<< THIS IS NEVER LOGGED
            try {
                log('error', `Error details: ${JSON.stringify(error)}`);
                pollingActive = false;
                if (statusDiv) statusDiv.textContent = `SERVER CALL FAILED (Poll #${pollCount}): ${error.message}`;
            } catch (e) { log('error', `!!! Error INSIDE handleFailure: ${e.message} !!!`); }
        }

        // --- Polling Function ---
        function pollServer() {
            log('info', `Entering pollServer function. pollingActive=${pollingActive}`);
            if (!pollingActive) { log('warn', "pollServer called but pollingActive is false. Aborting."); return; }
            pollCount++;
            log('info', `Initiating poll #${pollCount}...`);
            if (statusDiv) statusDiv.textContent = `Polling Server (Attempt #${pollCount})...`;
            try {
                log('info', `Attempting to register handlers for poll #${pollCount}...`);
                const runner = google.script.run;
                runner.withSuccessHandler(handleSuccess);
                log('info', ` -> withSuccessHandler registered for poll #${pollCount}.`);
                runner.withFailureHandler(handleFailure);
                log('info', ` -> withFailureHandler registered for poll #${pollCount}.`);
                log('success', `Handlers registered successfully for poll #${pollCount}.`);
                log('info', `Attempting to call getProgressStatus for poll #${pollCount}...`);
                runner.getProgressStatus(); // <<<< THE CALL
                log('success', `google.script.run.getProgressStatus() call INITIATED for poll #${pollCount}. Waiting for callback...`);
            } catch (e) {
                log('error', `!!!!> ERROR during pollServer execution (Poll #${pollCount}): ${e} !!!! Stack: ${e.stack}`);
                if (statusDiv) statusDiv.textContent = `FATAL ERROR initiating server call: ${e.message}`;
                pollingActive = false;
            }
        }

        // --- Initialization ---
        log('info', "Adding DOMContentLoaded listener.");
        document.addEventListener('DOMContentLoaded', function() {
            log('info', `DOMContentLoaded Fired! document.readyState='${document.readyState}'`);
            if (statusDiv) statusDiv.textContent = "DOM Ready. Scheduling first poll...";
             else log('error', "Status div not found in DOMContentLoaded!");
            if (!initialPollScheduled) {
                initialPollScheduled = true;
                log('info', "Scheduling first poll timer (200ms)...");
                setTimeout(function() {
                    log('info', "Initial setTimeout Fired. Calling pollServer().");
                    try { if (pollingActive) { pollServer(); } else { log('warn', "Initial setTimeout fired, but pollingActive is now false."); } }
                    catch(e) { log('error', `!!! Error inside initial setTimeout callback: ${e}`); }
                }, 200);
                log('info', "Initial setTimeout scheduled.");
            } else { log('warn', "DOMContentLoaded fired but initial poll already scheduled? Skipping."); }
        });

        log('info', "Client script parsing finished.");
        if(statusDiv) statusDiv.textContent = "Client script loaded. Waiting for DOM ready...";
    </script>
</body>
</html>

Output Expected Output: The client-side logs (in the browser console and the dialog's log area) should show the poll being initiated, followed shortly by either: ----> SUCCESS Handler Executed... or !!!!> FAILURE Handler Executed...

Actual Output: The client-side logs show the poll being initiated successfully: [XX.XXXs] (SUCCESS) google.script.run.getProgressStatus() call INITIATED for poll #1. Waiting for callback... However, neither the success nor the failure handler log message ever appears. The script execution on the client effectively stops at this point, waiting indefinitely. Browser network logs may indicate that the server call completed, but the callback is never triggered in the JavaScript environment. (See attached screenshots/logs if possible - [You would attach your screenshots here]).

Steps

Create a new Google Apps Script project bound to a Google Sheet.
Paste the first code block into Code.gs.
Create an HTML file named ProgressDialog.html in the project.
Paste the second code block into ProgressDialog.html.
Save the project.
Reload the Google Sheet to ensure the onOpen trigger runs and creates the "Debug" menu.
Click "Debug" > "Show Callback Debugger".
Open the Browser Developer Console (F12) for the dialog window that appears.
Observe the logs in the Browser Console and within the dialog's "Client Log" area. Note that the log sequence stops after "...Waiting for callback..." and neither the success nor failure handler is ever logged as executing.
Confirm this behavior persists even when running the Sheet/Dialog in an Incognito/Private browser window.

Comments

jp...@google.com <jp...@google.com> #2Mar 27, 2025 08:10PM

Generated Metadata

Summary: There appears to be an issue with google.script.run callbacks not firing in HtmlService modeless dialogs or sidebars within Google Sheets. The success and failure handlers are not being invoked on the client side, even though the server-side function is likely processing the request and sending a response.
Tags:

Additional resources:

You can subscribe to this issue by clicking the star ⭐ button.

bl...@google.com <bl...@google.com> #3Mar 27, 2025 08:12PM

Assigned to jp...@google.com.

Automated by Blunderbuss job workspace-devrel-public-issue-tracker-blunderbuss-autoassigner for config assign for component 191640.

Issue 406814758

Description

Issue summary

Comments

jp...@google.com <jp...@google.com> #2Mar 27, 2025 08:10PM

bl...@google.com <bl...@google.com> #3Mar 27, 2025 08:12PM

Add comment

Issue metadata