search

OfficeDev / office-js

A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official "evergreen" Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
https://learn.microsoft.com/javascript/api/overview
Other
673 stars 95 forks source link

Internet Headers are not deleted if there is a delay between internetHeaders.setAsync and internetHeaders.removeAsync #2753

Open jackdawHome opened 2 years ago

jackdawHome commented 2 years ago

Provide required information needed to triage your issue

Your Environment

Expected behavior

Internet Headers specified in the removeAsync function should be removed from the item headers.

Current behavior

I set three internet headers, then introduce some delay and then removed one of the headers and sent the message. The received message contained all three headers. This behavior is observed in the Outlook on web client. Desktop Outlook client works correctly. The same happens when you have a delay between series of operations ((addAsync, removeAsync), delay , (addAsync, removeAsync))

Steps to reproduce

I used the code provided on https://docs.microsoft.com/en-us/office/dev/add-ins/outlook/internet-headers in an Outlook Add-in

  1. Add delay 30_000 between the functions setCustomHeaders() and removeSelectedCustomHeaders()
  2. Compose the message, run add-in, send the message using Outlook on the web.
  3. Check the headers in the received message and find all three headers: x-preferred-fruit: orange x-preferred-vegetable: broccoli x-best-vegetable: spinach
  4. Repeat the same steps in the Outlook desktop and observe the result. The message contains two headers: x-preferred-fruit: orange x-preferred-vegetable: broccoli

Link to live example(s)

Office.onReady((info) => {
  if (info.host === Office.HostType.Outlook) {
    document.getElementById("sideload-msg").style.display = "none";
    document.getElementById("app-body").style.display = "flex";
    document.getElementById("run").onclick = run;
  }
});

export async function run() {
  document.getElementById("myDiv").innerText = "Working with headers...";
  setCustomHeaders();
}
function setCustomHeaders() {
  Office.context.mailbox.item.internetHeaders.setAsync(
    { "x-preferred-fruit": "orange", "x-preferred-vegetable": "broccoli", "x-best-vegetable": "spinach" },
    setCallback
  );
}

function setCallback(asyncResult) {
  if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
    console.log("Successfully set headers");
    getSelectedCustomHeaders();
  } else {
    console.log("Error setting headers: " + JSON.stringify(asyncResult.error));
  }
}

// Get custom internet headers.
function getSelectedCustomHeaders() {
  Office.context.mailbox.item.internetHeaders.getAsync(
    ["x-preferred-fruit", "x-preferred-vegetable", "x-best-vegetable", "x-nonexistent-header"],
    getCallback
  );
}

function getCallback(asyncResult) {
  setTimeout(() => {
    if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
      console.log("Selected headers: " + JSON.stringify(asyncResult.value));
      removeSelectedCustomHeaders();
    } else {
      console.log("Error getting selected headers: " + JSON.stringify(asyncResult.error));
    }
  }, 30000);

}
function getSelectedCustomHeadersRemove() {
  Office.context.mailbox.item.internetHeaders.getAsync(
    ["x-preferred-fruit", "x-preferred-vegetable", "x-best-vegetable", "x-nonexistent-header"],
    getCallbackRemove
  );
}
function getCallbackRemove(asyncResult) {
  setTimeout(() => {
    if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
      console.log("Selected headers: " + JSON.stringify(asyncResult.value));
    } else {
      console.log("Error getting selected headers: " + JSON.stringify(asyncResult.error));
    }
  }, 10);
}

// Remove custom internet headers.
function removeSelectedCustomHeaders() {
  Office.context.mailbox.item.internetHeaders.removeAsync(
    ["x-best-vegetable", "x-nonexistent-header"],
    removeCallback);
}

function removeCallback(asyncResult) {
  if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
    console.log("Successfully removed selected headers");
    getSelectedCustomHeadersRemove();
  } else {
    console.log("Error removing selected headers: " + JSON.stringify(asyncResult.error));
  }
}

Provide additional details

  1. The issue is observed in Outlook on the web. Outlook desktop works as expected.
  2. Delay should be at least 30 sec

Context

I'm working on the Outlook add-in where I set up custom internet headers based on an option selected by user. If user changes the option I remove the header set up previously and set the new one. When I check the received message I found all the headers instead of a single one reflecting the user's final choice.

Useful logs

the log messages looks fine

Successfully set headers
Selected headers: {"x-preferred-fruit":"orange","x-preferred-vegetable":"broccoli","x-best-vegetable":"spinach"}
Successfully removed selected headers
Selected headers: {"x-preferred-fruit":"orange","x-preferred-vegetable":"broccoli"}

Received message heades:

Accept-Language: en-US
Content-Language: en-US
X-MS-Has-Attach: 
X-MS-TNEF-Correlator: 
msip_labels: 
x-preferred-fruit: orange
x-preferred-vegetable: broccoli
x-best-vegetable: spinach

Thank you for taking the time to report an issue. Our triage team will respond to you in less than 72 hours. Normally, response time is <10 hours Monday through Friday. We do not triage on weekends.

exextoc commented 2 years ago

Hi @jackdawHome: We don't have a solid repro at this point so we will investigate/add more detailed error logs to find the problem and fix it. If you can identify a user condition or have a solid repro, please feel free to comment here again that will help our investigation and get sooner to the issue.

jackdawHome commented 2 years ago

Hi @exextoc, thank you for looking into the issue. When you are saying "We don't have a solid repro" does it mean you could reproduce the issue at least once? The issue is intermittent by its nature. In my environment it starts to manifest itself when the delay reached 30000. Maybe it is different in yours. I will see if there is any other way to reproduce it.

jackdawHome commented 2 years ago

Hi @exextoc, I have the steps to reproduce the issue. In the Add-in I created two buttons. The first button adds three headers. The second button removes one of the headers.

  1. Compose a message and run the add-in.
  2. Click "Add Headers" button, which will add three headers.
  3. Save message as a draft.
  4. Click "Remove some headers" button, which will remove one of the headers.
  5. Send the message.
  6. Check the headers of the received message and you will see all three headers in place.

If you repeat the steps without saving the draft (step 3) the received message will have two headers.

Here is the code: taskpane.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contoso Task Pane Add-in</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

    <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>

    <!-- Template styles -->
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-m ms-welcome ms-Fabric">
    <header class="ms-welcome__header ms-bgColor-neutralLighter">
        <img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
        <h1 class="ms-font-su">Welcome</h1>
    </header>
    <section id="sideload-msg" class="ms-welcome__main">
        <h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
    </section>
    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2>
        <ul class="ms-List ms-welcome__features">
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--Ribbon ms-font-xl"></i>
                <span class="ms-font-m">Achieve more with Office integration</span>
            </li>
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--Unlock ms-font-xl"></i>
                <span class="ms-font-m">Unlock features and functionality</span>
            </li>
            <li class="ms-ListItem">
                <i class="ms-Icon ms-Icon--Design ms-font-xl"></i>
                <span class="ms-font-m">Create and visualize like a pro</span>
            </li>
        </ul>
        <div role="button" id="run1" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
            <span class="ms-Button-label">Add headers</span>
        </div>
        <div role="button" id="run2" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
            <span class="ms-Button-label">Remove some headers</span>
        </div>
        <div id="myDiv"></div>
        <div id="myDiv1"></div>
    </main>
</body>

</html>

taskpane.ts

/*
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

/* global document, Office */

Office.onReady((info) => {
  if (info.host === Office.HostType.Outlook) {
    document.getElementById("sideload-msg").style.display = "none";
    document.getElementById("app-body").style.display = "flex";
    document.getElementById("run1").onclick = run;
    document.getElementById("run2").onclick = run2;
  }
});

export async function run() {
  setCustomHeaders();
}
export async function run2() {
  removeSelectedCustomHeaders();
  document.getElementById("myDiv").innerText = "Done!";
}
function setCustomHeaders() {
  Office.context.mailbox.item.internetHeaders.setAsync(
    { "x-preferred-fruit": "orange", "x-preferred-vegetable": "broccoli", "x-best-vegetable": "spinach" },
    setCallback
  );
}
function setCallback(asyncResult) {
  if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
    console.log("Successfully set headers");
    getSelectedCustomHeaders();
  } else {
    console.log("Error setting headers: " + JSON.stringify(asyncResult.error));
  }
}
// Get custom internet headers.
function getSelectedCustomHeaders() {
  Office.context.mailbox.item.internetHeaders.getAsync(
    ["x-preferred-fruit", "x-preferred-vegetable", "x-best-vegetable", "x-nonexistent-header"],
    getCallback
  );
}
function getCallback(asyncResult) {
  if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
    console.log("Selected headers: " + JSON.stringify(asyncResult.value));
  } else {
    console.log("Error getting selected headers: " + JSON.stringify(asyncResult.error));
  }
}
// Remove custom internet headers.
function removeSelectedCustomHeaders() {
  Office.context.mailbox.item.internetHeaders.removeAsync(
    ["x-best-vegetable", "x-nonexistent-header"],
    removeCallback);
}
function removeCallback(asyncResult) {
  if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
    console.log("Successfully removed selected headers");
    //getSelectedCustomHeadersRemove();
    getSelectedCustomHeaders();
  } else {
    console.log("Error removing selected headers: " + JSON.stringify(asyncResult.error));
  }
}
cut2run commented 2 years ago

@exextoc We posted the requested solid reproduction a week ago per your request. Is there any news? Did you have a chance to try the steps we have provided with? I believe we should not open yet another "fresh" ticket to get your attention to this matter, do we?

cut2run commented 2 years ago

I am not sure what is going on over there, maybe @exextoc is on vacation or something, would it be appropriate to as someone else to look at the issue, don't you think @Wenjun-Gong ? Yet another 2 days nothing going on. For example the last Outlook related tickets are taken by @JuaneloJuanelo and I know he is a very experienced developer and definitely able to crack the case in an hour or two. Would you be able to change the assignment?

exextoc commented 2 years ago

@cut2run , sorry about the delay. We are investigating this issue and will get back to you at the earliest.

exextoc commented 2 years ago

Hey all, thanks for your patience. We are able to consistently reproduce this issue thanks to your reproduction steps. We have added this fix to our backlog. However, there are no timelines to share at this point.

Internal tracking ID: 168397

cut2run commented 7 months ago

@exextoc Do you have any information on the Internal tracking ID: 168397 you have mentioned? Is it still in backlog? Thanks