Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: SDK initialization timed out #2342

Open
cpoucb opened this issue May 28, 2024 · 31 comments
Open

Error: SDK initialization timed out #2342

cpoucb opened this issue May 28, 2024 · 31 comments
Assignees

Comments

@cpoucb
Copy link

cpoucb commented May 28, 2024

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
Copy link

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

@Nivedipa-MSFT Nivedipa-MSFT self-assigned this May 28, 2024
@AE-MS AE-MS assigned KangxuanYe and unassigned Nivedipa-MSFT May 28, 2024
@AE-MS
Copy link
Contributor

AE-MS commented May 28, 2024

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
Copy link
Author

cpoucb commented May 29, 2024

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

image

Can that help?

Thanks in advance!

@KangxuanYe
Copy link
Contributor

KangxuanYe commented May 29, 2024

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.

Screenshot 2024-05-29 at 11 42 28 AM

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

@cpoucb
Copy link
Author

cpoucb commented May 30, 2024

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
Copy link
Contributor

KangxuanYe commented May 31, 2024

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
Copy link
Author

cpoucb commented Jun 3, 2024

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
Copy link
Contributor

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
Copy link

RichieMcCaff commented Jun 4, 2024

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

zaosoula commented Jun 5, 2024

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

@HiltonGiesenow
Copy link

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

  1. Desktop (latest version)
  2. web (teams.microsoft.com) - 'old Teams'
  3. 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
Copy link
Contributor

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:

  1. which version of Teams it is failing on? Is it web or desktop? If it is web, is it old Teams or new Teams?
  2. When did this failure happen? Is it happen when app is first loaded or it fails on auth window?
  3. Can you still reproduce this timeout issue?
  4. 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
Copy link
Contributor

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

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

  1. Where does your app fail on? i.e., the version of teams, desktop or web?
  2. When does this timeout issue happen? Is it happen when app is first loaded or it fails on auth window?
  3. 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
Copy link

@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
Copy link
Author

cpoucb commented Jun 7, 2024

Hi @KangxuanYe,

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

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

Thank you for your help!

@AE-MS
Copy link
Contributor

AE-MS commented Jun 7, 2024

@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
Copy link

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

@KangxuanYe
Copy link
Contributor

@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
Copy link

glad I could help, please keep me posted.

@KangxuanYe
Copy link
Contributor

KangxuanYe commented Jun 10, 2024

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

Screenshot 2024-06-10 at 3 29 47 PM

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

Screenshot 2024-06-10 at 3 29 47 PM

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.

Screenshot 2024-06-10 at 3 36 30 PM

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 (?)

Screenshot 2024-06-10 at 3 43 03 PM Screenshot 2024-06-10 at 3 58 48 PM

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.)

Screenshot 2024-06-10 at 3 43 32 PM

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
Copy link
Contributor

KangxuanYe commented Jun 10, 2024

Hi @KangxuanYe,

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

  1. Created an empty file named "index.html"
  2. Copy pasted the code provided above
  3. Uploaded it to an Azure App Service
  4. Got the URL of that file on the Azure App Service (e.g.: https://xxx.azurewebsites.net)
  5. Within the interface of Teams, we added a "Website" tab inside the "General" channel of a team
  6. Copied the URL above inside that tab
  7. Opened that tab
  8. 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
Copy link

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
Copy link

FedWiebe commented Jul 9, 2024

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
Copy link

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
Copy link
Contributor

AE-MS commented Jul 11, 2024

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
Copy link
Contributor

jadahiya-MSFT commented Jul 11, 2024

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
Copy link

FedWiebe commented Jul 11, 2024

@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
Copy link
Contributor

@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
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants