Error: SDK initialization timed out

cpoucb commented 4 months ago

Hi Team,

We're encountering an issue on Teams and Teams for Web where we get the following error message:

Error: SDK initialization timed out.

We simplified our code to get the minimum to reproduce the issue. We're able to reproduce it on different environments (including a sandbox). Here is our code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Microsoft Teams</title>
    <script src="https://res.cdn.office.net/teams-js/2.23.0/js/MicrosoftTeams.min.js"
            integrity="sha384-08XJvrutoSVYTA8PQeUgetTKn8B7JE73C5BdAfWnHZ5WnSFFQO6g1FGmSqxsrAzb"
            crossorigin="anonymous"></script>
</head>
<body>
    <p id="status"></p>

    <script type="text/javascript">
        microsoftTeams.app.initialize()
            .then(() => {
                document.getElementById("status").innerHTML = "Initialized";
                microsoftTeams.app.notifyAppLoaded();
                microsoftTeams.app.notifySuccess();
            })
            .catch((err) => document.getElementById("status").innerHTML = err);
    </script>
</body>
</html>

We uploaded that file in an Azure App Service and created a Website tab in Teams pointing to it. When opening the tab, we get the error message after about 5 seconds.

Any idea what we're doing wrong?

Thanks in advance for your help!

Nivedipa-MSFT commented 4 months ago

@cpoucb - Thanks for reporting your issue. We are checking this internally, we will update you soon.

AE-MS commented 4 months ago

Hi @cpoucb!

These types of issues can be tricky to troubleshoot. Can you enable client logging (instructions here) and send the logs to us to aid us in debugging the problem? Thanks!

cpoucb commented 4 months ago

Hi @AE-MS,

I must be doing something wrong because it looks like the logging is still not enabled even after following the instructions of the article to the letter.

When debugging the code, it seems it's skipping the "logger" lines of code.

I just see this in the console window:

Error: SDK initialization timed out. at nn (app.ts:55:7) at e.initialize (app.ts:767:12) at (index):14:28

Can that help?

Thanks in advance!

KangxuanYe commented 4 months ago

Hello @cpoucb,

It looks like you have followed steps 1 to 4 in the instruction document @AE-MS provided. However, could you please check whether Verbose option has been checked for logs? You should be able to see the same thing (a check next to Verbose) as screenshot provided below. Once verbose is checked and app is refreshed, you are supposed to see more logs start with colorful word teamsJs: ......... If you still cannot see similar logs I put in the screenshot, please do let us know.

SDK initialization timeout issue is very complicated and thus we would like to have more logs to investigate it. Thank you.

cpoucb commented 4 months ago

Hello @KangxuanYe,

My bad. It looks like I made a typo when setting the localStorage.debug value.

Here are the logs of teamsJs:

localStorage.debug = 'teamsJs.*';
'teamsJs.*'
app.ts:748 teamsJs:app teamsjs is being used from https://res.cdn.office.net/teams-js/2.23.0/js/MicrosoftTeams.min.js. Today, teamsjs can only be used from a single script or you may see undefined behavior. This log line is used to help detect cases where teamsjs is loaded multiple times -- it is always written. The presence of the log itself does not indicate a multi-load situation, but multiples of these log lines will. If you would like to use teamjs from more than one script at the same time, please open an issue at https://github.com/OfficeDev/microsoft-teams-library-js/issues +0ms
communication.ts:419 teamsJs:communication:sendMessageToParentHelper Message 0 information: {actionName: 'initialize', args: Array(3)}actionName: "initialize"args: Array(3)0: "2.23.0"1: 42: undefinedlength: 3[[Prototype]]: Array(0)[[Prototype]]: Object +0ms
communication.ts:392 teamsJs:communication:sendRequestToTargetWindowHelper Sending message 0 to parent via postMessage +0ms

Thank you!

KangxuanYe commented 4 months ago

Hello @cpoucb, thank you so much for helping us collect logs for debugging and investigating the issue.

Could you please elaborate more for us on this log to understand the situation you are facing? For example,

when did you capture this log? Was this piece of log captured when your app was trying to be loaded in tab?
Also, is this piece of log to be captured when the app failed to be loaded because of initialization timeout? If so, I and my team will be appreciated if you could post more logs. Everything displayed on console might be helpful to us (you could either paste logs directly into reply or drop a txt file here, but please be careful and do remove any personal/sensitive info in logs).
Are you still able to reproduce this initialization timeout issue?

Thanks again on helping us to investigate this issue.

cpoucb commented 4 months ago

Hello @KangxuanYe ,

This is the log that was captured when refreshing the app on teams.microsoft.com as mentioned in the documentation provided by @AE-MS.

This is all the log I have including the one I shared in an earlier post:

Error: SDK initialization timed out. at nn (app.ts:55:7) at e.initialize (app.ts:767:12) at (index):14:28

I'm still able to systematically reproduce the issue.

If that can help, in my first post, I detailed all the steps to reproduce the issue along with the code causing the issue.

Thank you for your help!

KangxuanYe commented 4 months ago

Hello @cpoucb, we really appreciate your time on this issue. Here is our update for your issue. We are going to investigate this issue and we will reach you again if we cannot reproduce the issue by our test app in our environment. We will share more detail and instruction for you by that time. Thanks again for helping us on investigating this.

RichieMcCaff commented 4 months ago

We started seeing this same error appear on mobile msTeams for both android and iOS since the last msteams update on May 20th. Unlike the above we don't see this on the web/desktop versions of the app.

We are currently on package version 2.21.0 of teamsjs so I'm unsure if it's related to the latest version. Eventually on opening and killing the teams app on repeat it will eventually successfully initialize.

KangxuanYe commented 4 months ago

Hi @cpoucb, thanks for your waiting. We would like to update our effort for investigating this issue with you and share our next steps to dig in and try to resolve issue for you.

We used Teams Tool Kit to generate a very basic static-tab demo app with your simplified code, which you said that your (team) could use for reproducing init timeout issue. We set the Teams-Js library specifically to V2.23.0 and then ran the code on Teams app. The demo app ran successfully in local and init timeout issue didn't show up after multiple attempts/reloads.

However, we do know one way that apps could fail on init timeout issue, which is that app is not hosted in host. For example, if you are on Teams in edge and your app is loaded, and then you click those three dots on top right of your app and then select Go to Website, the app will try to be loaded in a new web page/tab. Then, since app is not hosted in host (it's not in an iframe), i.e. Teams, it will cause init timeout issue. Though based on your description, your problem might don't fall into this scenario.

Thus, could you please share your app, or simplified code, in a zip file with us (please make sure it doesn't contain any sensitive information that you don't want to spread it out) so that we could take a deep look for testing and see if we can reproduce the issue within your app as you did? We will side load it to our Teams app and repeat the process as we did for initial investigation. Hopefully we could have more findings with your help.

We really appreciate your time and effort with us on this issue. Thank you.

KangxuanYe commented 4 months ago

Hello @RichieMcCaff, thanks for reporting that issue for us and we acknowledge that this is an issue we are investigating. This is an issue we had very recently and it might not be the same as this one. It might be easier for you to track our update/investigation for issues similar to yours through issue 2347.

Please let me know if it looks good to you and feel free to post questions there as well. Thanks again.

zaosoula commented 4 months ago

+1 same error here Screenshot 2024-06-05 at 15 47 21

HiltonGiesenow commented 4 months ago

I'm seeing this as well, but only in a specific situation. I have an app in the store, it's working fine in:

Desktop (latest version)
web (teams.microsoft.com) - 'old Teams'
web (teams.microsoft.com) - 'new Teams'

But it's failing on teams.microsoft.com, with this same error ("SDK initialization timed out").

In my case, I'm using an await, versus the then from the original question above, but it doesn't seem to be running async. I'm no TypeScript expert, but I wonder if this line shouldn't have an 'async' marker? https://github.com/OfficeDev/microsoft-teams-library-js/blob/release/2.23.0/packages/teams-js/src/public/app.ts#L765 . Probably line 50 as well...

KangxuanYe commented 4 months ago

Hello @HiltonGiesenow, thank you for reporting and diving deep into this issue. To better investigate this issue, could you please say more about But it's failing on teams.microsoft.com, with this same error ("SDK initialization timed out"). as you mention above saying you have an app in store and it works well on desktop, old Teams and new Teams? We are trying to understand:

which version of Teams it is failing on? Is it web or desktop? If it is web, is it old Teams or new Teams?
When did this failure happen? Is it happen when app is first loaded or it fails on auth window?
Can you still reproduce this timeout issue?
Since you said that you have the app in store, can you provide app to us (download or side load it) for testing?

I think you should use then, as shown from the original question above rather than await to make sure some code snippet is executed only when app is initialized successfully while not blocking other pieces of code.

KangxuanYe commented 4 months ago

+1 same error here

Hi @zaosoula , could you please say more about your timeout error? i.e.

Where does your app fail on? i.e., the version of teams, desktop or web?
When does this timeout issue happen? Is it happen when app is first loaded or it fails on auth window?
Can this timeout issue be reproduced constantly?

We will also be appreciated if you can provide your deployed app for us to be side load so that we can do more investigation. Thank you.

HiltonGiesenow commented 4 months ago

@KangxuanYe you can check out the "Quicklinks Shared Links" app. Apologies for the mixup in web addresses in my first post - I meant it's failing on teams.cloud.microsoft - the new site - and ONLY failing there - everywhere else is fine. It happens all the time, on first load (or basically whenever I call app.initialize.

cpoucb commented 4 months ago

Hi @KangxuanYe,

We didn't use Teams Tool Kit to generate any app. What we did is as follows:

Created an empty file named "index.html"
Copy pasted the code provided above
Uploaded it to an Azure App Service
Got the URL of that file on the Azure App Service (e.g.: https://xxx.azurewebsites.net)
Within the interface of Teams, we added a "Website" tab inside the "General" channel of a team
Copied the URL above inside that tab
Opened that tab
Saw the message "SDK initialization timed out" (from Teams client as well as Teams online)

Thank you for your help!

AE-MS commented 4 months ago

@KangxuanYe you can check out the "Quicklinks Shared Links" app. Apologies for the mixup in web addresses in my first post - I meant it's failing on teams.cloud.microsoft - the new site - and ONLY failing there - everywhere else is fine. It happens all the time, on first load (or basically whenever I call app.initialize.

Thanks for calling out that extra detail of the new site. What version of the teamsjs library are you using? Versions prior to 2.19.0 did not support the new *.cloud.microsoft domains so that would be one thing worth checking.

HiltonGiesenow commented 3 months ago

I'm on teamsjs 2.23.0 with manifestVersion 1.17 in the app package

KangxuanYe commented 3 months ago

@HiltonGiesenow, we really appreciate your clarification and this is super helpful for us to debug with a real app. We could confirm and reproduce this initialization timeout issue now and as you said, it only happens on Teams web R0 and we start investigate it now.

HiltonGiesenow commented 3 months ago

glad I could help, please keep me posted.

KangxuanYe commented 3 months ago

Hello @HiltonGiesenow, here are things we have done in sequence and we do find something. Please take a look.

Step 1. We click three dots ("View more app") in Teams sidebar, then "get more apps" button and search your App ("Quicklinks Shared Links"). Your app appears in our search results

Step 2. Once this app is added and displayed in app list, we click the icon and then open it.

Step 3. In this step, as you said, in Teams Web R0 (cloud.microsoft domain specifically), the app gets initialization timeout issue. Our investigation starts from here.

Step 4. We first enables client logging to get more logs and would like to know what can we have. (If you don't know how to enable client logging, please check instructions here). Also, screenshot in step3 has logs after we enable client logging.

Step 5. We took a look on logs sent from TeamsJs and clicked into log with initialize. The first argument, 2.5.0 in args list looks very suspicious to us. So we went to sources tab in Inspect elements and searched for it. Here is the result. It seems like main.e57296af.js file is the file of TJS converted from TypeScript and thus the version of variable indicates that the app is using TJS V2.5.0 (?)

We repeat this process in different rings and platforms. All of results show that the app we loaded is using TJS V2.5.0. Could you please let us know if there is anything wrong we did, i.e. using another url, so that we could land on the app using TJS 2.23.0?

(BTW, if you see TypeScript files (or let's say Teams-JS library package written in TypeScript) instead of JavaScript, you can click three dots here and then "settings" to disable JavaScript source maps.)

Thank you so much again for helping us. And we highly suggest you to raise another new issue specifically for your case, which might be easier for you to track and for us to help with since this thread mixes different types of issues.

KangxuanYe commented 3 months ago

Hi @KangxuanYe,

We didn't use Teams Tool Kit to generate any app. What we did is as follows:

Created an empty file named "index.html"

Copy pasted the code provided above

Uploaded it to an Azure App Service

Got the URL of that file on the Azure App Service (e.g.: https://xxx.azurewebsites.net)

Within the interface of Teams, we added a "Website" tab inside the "General" channel of a team

Copied the URL above inside that tab

Opened that tab

Saw the message "SDK initialization timed out" (from Teams client as well as Teams online)

Thank you for your help!

Hi @cpoucb, thank you so much for posting your steps here. It gives us more information so that we have better understanding on your progress now.

You mentioned in step 4 to step 6 that, the url of app is fetched from Azure App Service and then the Url is added into a "website" tab in channel. From my best knowledge on Teams, ("website") tab in channel is equivalent to a page in browser, thus what "website" tab does is to take a url and load a page. There is no communication between Teams-JS library and host SDKs (if you put your app's url there), thus, SDK request (message) for initialization sent from Teams-JS library will go nowhere and no one responses it. Host SDKs are designed and supposed to be used for(with) apps hosted in host. Webpage is not the target to be served by host SDKs. That's the reason why your app initialization times out.

Please let us know your thoughts and feel free to talk more about what you want to do, i.e. testing app in Teams, publish app or something else, so that we could better help and give more guidance. Thanks again for your patience!

HiltonGiesenow commented 3 months ago

oh, that was totally the problem - thank you! This was an CI/CD issue our side because only the package had changed, no -actual- code had changed for this release. Resolved (you should see it working fine now your side)

FedWiebe commented 2 months ago

I reported the same error here and a Microsoft colleague told me to mention it here as well.

The SDK initializes fine in almost all scenarios. It only times out when I run Teams in a browser and our add-in opens a popup window for authentication purposes. In the popup window, we try to initialize the SDK and it always timesout.

The same scenario works in the Teams app and it also works fine in our dev environment. Even when we run our dev environment add-in in Teams in a browser it works. It only fails in a browser with our production environment Teams add-in.

We run version 2.21.0.

Attached you will find the logs that I collected. www.federated.directory-1720527947948.log

Most interesting line from that log: main.d9d721ee65197729.js:1 teamsJs:validateOrigin Origin https://federated.directory/ is invalid because it is not an origin approved by this library or included in the call to app.initialize.Origins approved by this library: (38) ['teams.microsoft.com', 'teams.microsoft.us', 'gov.teams.microsoft.us', 'dod.teams.microsoft.us', 'int.teams.microsoft.com', 'outlook.office.com', 'outlook-sdf.office.com', 'outlook.office365.com', 'outlook-sdf.office365.com', 'outlook.live.com', 'outlook-sdf.live.com', 'teams.live.com', 'local.teams.live.com', 'local.teams.live.com:8080', 'local.teams.office.com', 'local.teams.office.com:8080', 'devspaces.skype.com', '*.www.office.com', 'www.office.com', 'word.office.com', 'excel.office.com', 'powerpoint.office.com', 'www.officeppe.com', '*.www.microsoft365.com', 'www.microsoft365.com', 'bing.com', 'edgeservices.bing.com', 'www.bing.com', 'www.staging-bing-int.com', 'teams.cloud.microsoft', 'outlook.cloud.microsoft', 'm365.cloud.microsoft', 'copilot.microsoft.com', 'windows.msn.com', 'fa000000125.resources.office.net', 'fa000000129.resources.office.net', 'fa000000124.resources.office.net', 'fa000000128.resources.office.net']Origins included in app.initialize: [] +0ms

aniketrai commented 2 months ago

Any updates on this? This is affecting us badly. Our clients are not able to proceed with authentication when using Teams in browser.

AE-MS commented 2 months ago

Any updates on this? This is affecting us badly. Our clients are not able to proceed with authentication when using Teams in browser.

Hi @aniketrai , can you clarify the details of your issue? There are unfortunately multiple different issues being reported in this thread so it's difficult to help you specifically since your experience might be due to any number of different scenarios. Can you please let us know what scenario it is that's failing for you, and collect logs, please instructions here.

Thanks!

jadahiya-MSFT commented 2 months ago

I reported the same error here and a Microsoft colleague told me to mention it here as well.

The SDK initializes fine in almost all scenarios. It only times out when I run Teams in a browser and our add-in opens a popup window for authentication purposes. In the popup window, we try to initialize the SDK and it always timesout.

The same scenario works in the Teams app and it also works fine in our dev environment. Even when we run our dev environment add-in in Teams in a browser it works. It only fails in a browser with our production environment Teams add-in.

We run version 2.21.0.

Hi @FedWiebe, I am looking into this further for you. Something that could be useful for me is to see how app.initialize is being called, would you be able to share that code snippet? I see in the link you currently do the following and just wanted to make sure if that is the case

await microsoftTeams.app.initialize();

FedWiebe commented 2 months ago

@jadahiya-MSFT thanks for your support 👍

This is it. We use the same code to initialize it when our app is embedded and in the fat client of Teams and in those cases it works.

 // Initialize the Microsoft Teams SDK only once
  async initialize(): Promise<void> {
    if (!this.initialized) {
      try {
        await microsoftTeams.app.initialize();
        this.initialized = true;
      } catch (error) {
        console.log(
          `MicrosoftTeamService: Error initializing Teams SDK`,
          error
        );
        throw error;
      }
    }
    return;
  }

jadahiya-MSFT commented 2 months ago

@FedWiebe

Thanks for sharing the snippet. If you were to do the following, do you still run into the same issue?

try {
        await microsoftTeams.app.initialize(['https://federated.directory']);
        this.initialized = true;
      } catch (error) {

FedWiebe commented 2 months ago

@jadahiya-MSFT thanks for the tip. I haven't included the URL yet in the 'initialize', but maybe we already found a solution. We updated our manifest and user www.federated.directory now everywhere. We had a mix of https://federated.directory and https://www.federated.directory in the manifest before. This seems to have solved it for now, but we are testing it thoroughly now.

microsoft-github-policy-service[bot] commented 2 months ago

Tell us about your experience!

Hi cpoucb! We have closed this issue in our system, but we would love to hear your feedback. To let us know how we did, simply use one of the following emoji icons: :thumbsup: for resolved, :thumbsdown: for unresolved, or :heart: for a great experience on this message. Please use the link for more detailed feedback.

Best regards, Teams Platform

xar commented 2 months ago

Hello, we are experiencing very similar error in our app - we have very simple Tab application deployed that worked last month absolutely well

We're using @microsoft/teams-js version 2.25.0 (we tried updating, but no luck)
Our main very simple auth / MS Teams integration hook here: https://gist.github.com/xar/fca77246add11cd9748881d154afdab6

But even with this very simple scenario we get Error: SDK initialization timed out without any suggestions around how to resolve it.

KangxuanYe commented 2 months ago

Hello, we are experiencing very similar error in our app - we have very simple Tab application deployed that worked last month absolutely well

We're using @microsoft/teams-js version 2.25.0 (we tried updating, but no luck)

Our main very simple auth / MS Teams integration hook here: https://gist.github.com/xar/fca77246add11cd9748881d154afdab6

But even with this very simple scenario we get Error: SDK initialization timed out without any suggestions around how to resolve it.

@xar could you please submit a new ticket to us? This thread is closed. I am gonna investigating, tracking and answering your questions under your new ticket. Thanks.

KangxuanYe commented 2 months ago

Hello developers, who click into this thread and try to report issue,

This ticket is closed because this thread was mainly tracking the issue @cpoucb raised when he saw SDK initialization timed out. Error. For his issue, we think that he was not using an appropriate way to load the app.

As for @HiltonGiesenow, he was having the same error because a version of Teams-Js Library, which is not what he wanted, is used.

Another conversation with @FedWiebe showed us that if an incomplete domain list is provided or invalid domain is used, the same error will be returned to App. (In his case, the domain he would like to use wasn't added into the list by accident.)

For people under this ticket who had conversations with us, we have established the problem and resolutions. And we are working on improving our code to provide more clear error messages to developers if the same scenarios happen.

Therefore, if you run into the issue, please check if you are publishing the app in an appropriate way (mostly side load app), using the version of Teams-Js library that you would like to have and passing the domain you want to access to the domain list. If all of those above cannot help you, please feel free to go to our issue page and click green "new issue" button in the top right side of page to open a new GitHub issue to us for tracking.

Thank you

OfficeDev / microsoft-teams-library-js

Error: SDK initialization timed out #2342

Tell us about your experience!