Excel Online only : code execution is stuck on `context.sync()`

[SharonCKC]

Provide required information needed to triage your issue

When executing code for the worksheets.onChanged event handler, code execution is stuck on context.sync() and doesn't continue. This can only be observed in Excel on the web; no issue was found in Excel PC and Excel Mac.

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: Office on the web
• Host [Excel, Word, PowerPoint, etc.]: Excel
• Browser (if using Office on the web): Edge, Chrome

Expected behavior

Code should continue to execute after context.sync() is run.

Current behavior

Code execution is stuck on context.sync().

Steps to reproduce

1. Paste the code snippet below in ScriptLab
2. Click the button to run the onChanged event listener.
3. Open the console
4. Insert/delete a random row/column. We expect "try" to be printed in the console, then after context.sync() is run, "done" should be printed in the console.

   console.log("try");
   await context.sync();
   console.log("done");

5. Observe that "try" is printed on the console, but "done" is not printed.

Provide additional details

Code snippet below:

name: Basic API call (TypeScript)
description: Performs a basic Excel API call using TypeScript.
host: EXCEL
api_set: {}
script:
  content: |
    $("#run").on("click", () => tryCatch(run));

    async function run() {
      await Excel.run(async (context) => {
        context.workbook.worksheets.onChanged.add(async () => {
          await test();
        });
      });
    }

    async function test() {
      await Excel.run(async (context) => {
        console.log("try");
        await context.sync();
        console.log("done");
      });
    }

    /** Default helper for invoking an action and handling errors. */
    async function tryCatch(callback) {
      try {
        await callback();
      } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
      }
    }
  language: typescript
template:
  content: "<section class=\"ms-font-m\">\n\t<p class=\"ms-font-m\">This sample demonstrates basic Excel API calls.</p>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n\t<p class=\"ms-font-m\">Click to start listening to worksheet onChanged event</b>.</p>\n\t<button id=\"run\" class=\"ms-Button\">\n        <span class=\"ms-Button-label\">Run event listener</span>\n    </button>\n</section>"
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

  core-js@2.4.1/client/core.min.js
  @types/core-js

  jquery@3.1.1
  @types/jquery@3.3.1

[shanshanzheng-dev]

Hi @SharonCKC Thanks for reaching us. But I can repro your issue on Excel online. You can see this video:

https://github.com/user-attachments/assets/c6532637-6284-4ed3-93ee-3fa8f20a8654

Do you have a big dataset in your workbook? Or could you share your test workbook to help us repro this issue? Thanks.

[SharonCKC]

Hello @shanshanzheng-dev, thank you for investigating. No I don't have a big dataset in the workbook. Here's another fresh workbook that I shared, and here's a screenshot of the issue:

https://github.com/user-attachments/assets/b90a2bcb-e219-4c67-a318-951ca985908e

[shanshanzheng-dev]

Hi @SharonCKC Thanks for providing this doc link and video, I can repro this issue. We'll take a look and report back if we have a suggestion for you. Thanks.

[SharonCKC]

Hello @shanshanzheng-dev, I still see the bug (only in Excel on the browser) which is causing our add-in not to be able to detect a new column. Just wanted to follow up if there's anything that can be done at this time?

[SiruiSun-MSFT]

Hi @SharonCKC, Thanks for your patience! However, this issue seems more complex than we expected. We are still under investigation and fix. please stay tuned. Will update here when we have any progress. Thanks again!

[SiruiSun-MSFT]

Hi @SharonCKC, As I mentioned before, this issue is under the deeply investigation and fix. However, these days, we find a workaround for this case, which may somehow help you out first. Could you add a Delaying by setTimeout using await? Here is the sample code:

async function test() { await Excel.run(async (context) => { console.log("try"); await new Promise((resolve) => setTimeout(resolve, 100)); await context.sync(); console.log("done"); }); }

We've done the first test on our machine, and this seems to be a workaround. If you are struggling on this issue, please try the above method. Hope this will work well! Thanks for your patience again!