There was a problem reaching this app | Static Tabs Application fails to initialize.

Ahmad AHSAN 0

I'm developing simple Tab application for my search engine, my idea is to just add an iframe in hello.html and set the source to my URL.

here is my markup - hello.html:

<html>

<head>

<script src="..../teams-js/2.22.0/..." ></script>

<script src=".../teamsapp.js?v=1.0.1"></script>

<title>My App</title></head>

<body>

<iframe src="https://chat.web.com">

<script>

microsoftTeams.appInitialization.notifySuccess();

</script>

</body>

</html>

here is my teamsapp.js (function () {

"use strict";

// Call the initialize API first

microsoftTeams.app.initialize().then(function () {

});

})();

and here is my manifest.json

{

"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",

"manifestVersion": "1.19",

"version": "1.0.1",

"id": "abcb1633-6493-47e9-8472-12328939dfff",

"developer":

{

"name": "Ahmad Ahsan",

"websiteUrl": "https://www.web.com/",

"privacyUrl": "https://www.web.com/team-app-privacy-policy",

"termsOfUseUrl": "https://www.web.com/team-app-terms-and-conditions"

},

"icons": { "color": "color.png", "outline": "outline.png" },

"name": { "short": "TeamApp", "full": "Team App full Nmae" },

"description": { "short": "Teams App Short Description", "full": "Teams App Full Description." },

"accentColor": "#FFFFFF",

"staticTabs": [

{

"entityId": "index0",

"name": "Home",

"contentUrl": "https://chat.web.com/",

"websiteUrl": "https://chat.web.com/",

"scopes": [ "personal" ]

}

],

"permissions": [ "identity", "messageTeamMembers" ],

"validDomains": [ "chat.web.com" ]

}

The issue is:

It is mentioned in official documentation (https://learn.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema#statictabs) that contentUrl and websiteUrl are not required in staticTabs object, but if I remove contentUrl my application fails to install in debug mode.

If I set it to "contentUrl": "https://chat.web.com/" then application is installed, it opens fine but after some moments it show alert / warning / error message "There was a problem reaching this app" and in console it shows failed reason: AppInitTimeout [Screenshot Attached]

However if I set it to "contentUrl": "${{TAB_ENDPOINT}}" and is .env.local it is set to TAB_ENDPOINT=https://localhost:53000 then it works fine, but I don't know how it'll behave when I set the value to **TAB_ENDPOINT=https://chat.web.com **in .env.dev file and

why it is not working when:

I set the value without using variable?

I remove the contentUrl from staticTabs object?

P.S: My website have no other page / path / url. Domain name is only valid URL.

Nivedipa-MSFT 3,086 Reputation points Microsoft Vendor

2025-01-02T06:10:52.4266667+00:00

Hello Ahmad AHSAN - Thank you for bringing this issue to our attention.
We are able to repro your issue.
1.if I remove contentUrl my application fails to install in debug mode.

2.If I set it to "contentUrl": "https://chat.web.com/" then application is installed, it opens fine but after some moments it show alert / warning / error message "There was a problem reaching this app" and in console it shows failed reason: AppInitTimeout

3.if I set it to "contentUrl": "${{TAB_ENDPOINT}}" and is .env.local it is set to TAB_ENDPOINT=https://localhost:53000

4.set the value to **TAB_ENDPOINT=https://chat.web.com **in .env.dev file

We have logged this as a bug and informed our engineering team. Our engineering team will look into it.

While we cannot guarantee a fix at this stage, we will keep you updated with any progress or changes. Please note that in some cases, the bug may be by design or deprioritized due to platform updates, but we will continue to monitor the bug closely.

We appreciate your patience and understanding as we review the issue.

Thank you again for bringing this to our attention!

2 answers

Nivedipa-MSFT 3,086 Reputation points Microsoft Vendor

2025-01-10T06:19:11.74+00:00

Hello @Ahmad AHSAN - The contentUrl is required for staticTabs unless they are one of the special placeholder used to re-arrange the default tab order:
https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-personal-tab?tabs=vs&pivots=node-java-script#reorder-tabs

The error banner shown in the screenshots appears whenever the app fails to initialize teams-js within our timeout period (approximately 30 seconds). Your code looks correct, but it seems there is another issue with the web app that is preventing it from executing as expected. You need to fix these issues and step through the app's initialization path to ensure that the Teams SDK is being correctly loaded and initialized.
Please sign in to rate this answer.

You found this answer helpful.
Nivedipa-MSFT 3,086 Reputation points Microsoft Vendor

2025-01-21T06:54:41.06+00:00

@Ahmad AHSAN - Could you please share your valuable feedback via the Microsoft Teams Developer Community Response Feedback link? Your input helps us improve our support.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Ahmad AHSAN 0 Reputation points

2025-01-21T07:52:17.1033333+00:00
Hi @Nivedipa-MSFT

That was not a bug but a misunderstanding in flow.

When Teams Application is debugged locally actually app.js launches Express.js and maps URL etc:

That is the main reason "contentUrl": "${{TAB_ENDPOINT}}" was working fine as it loads out hello.html which loads our teams SDK and calls the initialises the application.

So yes contentUrl is required.

hello.html and app.js are just there to mimic the production environment. When we deploy out application, in the zip file it actually only contains manifest.json and icons.

Hope this will help someone else.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Your answer