Content site is not loading

[SemBurendo]

After deploying the solution to Azure and uploading the Teams ap package, the content site does not load, see image below:

When I try to browse the site in a browser, I get a blank page with a spinning circle and the developer tools reveals a javascript error as shown below.

I tried redeploying the commit from the Azure App Service deployment center but get a 'Failed to submit the redeploy operation of commit 56ac03575fae5c6342112eb49a65a289e48c0bdc for web app...' error

[v-ajaysahu]

@SemBurendo , thank you for reporting this issue. Since the deployment has failed, the app will not function. Could you please inform us whether this is a new deployment or an upgrade attempt?

[SemBurendo]

@v-ajaysahu thanks for comment. This is a new deployment.

[v-ajaysahu]

@SemBurendo , Please select the app service, then navigate to the deployment center. Afterward, check the logs to identify any errors you've encountered. Kindly share the screenshot of the error here.

[SemBurendo]

Screenshot and log details below. The initial deployment indicates it was successful though we have not been able to redeploy the same commit since and the site is not working.

Command: deploy.cmd Restoring npm packages for EOC-TeamsFx (this can take several minutes) "C:\home\site\repository" Restoring npm packages for tabs folder (this can take several minutes) "C:\home\site\repository\EOC-TeamsFx\tabs" npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/abort-controller@2.1.2', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/core-auth@1.7.2', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/core-client@1.9.2', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/core-http-compat@2.1.2', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/core-lro@2.7.2', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/core-paging@1.6.2', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/core-rest-pipeline@1.16.0', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/core-tracing@1.1.2', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/core-util@1.9.0', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/keyvault-keys@4.8.0', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@azure/logger@1.1.2', npm WARN EBADENGINE required: { node: '>=18.0.0' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'lru-cache@10.2.2', npm WARN EBADENGINE required: { node: '14 || >=16.14' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.19.2' } npm WARN EBADENGINE }

up to date in 17s

276 packages are looking for funding run npm fund for details Building the client app (this can take several minutes)

teamsfx-template-tab@0.1.0 build react-scripts build

Creating an optimized production build... Compiled with warnings.

[eslint] src\components\Dashboard.tsx Line 290:21: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid Line 402:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 410:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 418:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 463:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 481:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 500:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

src\components\IncidentDetails.tsx Line 9:10: 'Checkbox' is defined but never used @typescript-eslint/no-unused-vars Line 1405:56: Array.prototype.map() expects a return value from arrow function array-callback-return Line 2865:58: Array.prototype.filter() expects a return value from arrow function array-callback-return

src\components\IncidentHistoryPDF.tsx Line 15:5: Useless constructor @typescript-eslint/no-useless-constructor

src\components\Tasks.tsx Line 172:25: Nested block is redundant no-lone-blocks

Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

434.04 kB build\static\js\779.329e7238.chunk.js 338.05 kB build\static\js\883.8bcd5626.chunk.js 330.77 kB build\static\js\main.a7087837.js 93.84 kB build\static\js\691.22821ef4.chunk.js 65.63 kB build\static\js\877.5b295d00.chunk.js 54.86 kB build\static\js\866.a83a269e.chunk.js 39.84 kB build\static\js\835.632e8ee9.chunk.js 27.57 kB build\static\css\883.0dce1ce5.chunk.css 23.27 kB build\static\js\941.e9cd0997.chunk.js 16.13 kB build\static\js\380.8e4bd4d8.chunk.js 8.45 kB build\static\js\62.6439ab13.chunk.js 7.25 kB build\static\js\618.5f0098fb.chunk.js 6.84 kB build\static\js\267.bc4f5b14.chunk.js 6.67 kB build\static\js\871.935930ac.chunk.js 5.52 kB build\static\js\556.e83cf9c2.chunk.js 5.2 kB build\static\css\941.32a31278.chunk.css 4.52 kB build\static\css\350.13e79219.chunk.css 4.45 kB build\static\js\350.62db20f3.chunk.js 4.08 kB build\static\css\267.17dfe22d.chunk.css 2.99 kB build\static\css\62.04dc33e2.chunk.css 2.44 kB build\static\css\556.e4eba981.chunk.css 1.36 kB build\static\js\652.73ed0189.chunk.js 1.02 kB build\static\css\877.b13ad8ee.chunk.css 207 B build\static\css\main.6b3cb5b6.css

The project was built assuming it is hosted at ./. You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

https://cra.link/deployment

Creating app_offline.htm KuduSync.NET from: 'C:\home\site\repository\EOC-TeamsFx\tabs\build' to: 'C:\home\site\wwwroot' Copying file: 'asset-manifest.json' Copying file: 'index.html' Copying file: 'static\css\267.17dfe22d.chunk.css' Copying file: 'static\css\350.13e79219.chunk.css' Copying file: 'static\css\556.e4eba981.chunk.css' Copying file: 'static\css\62.04dc33e2.chunk.css' Copying file: 'static\css\877.b13ad8ee.chunk.css' Copying file: 'static\css\883.0dce1ce5.chunk.css' Copying file: 'static\css\941.32a31278.chunk.css' Copying file: 'static\css\main.6b3cb5b6.css' Copying file: 'static\js\267.bc4f5b14.chunk.js' Copying file: 'static\js\350.62db20f3.chunk.js' Copying file: 'static\js\380.8e4bd4d8.chunk.js' Copying file: 'static\js\556.e83cf9c2.chunk.js' Copying file: 'static\js\618.5f0098fb.chunk.js' Copying file: 'static\js\62.6439ab13.chunk.js' Copying file: 'static\js\652.73ed0189.chunk.js' Copying file: 'static\js\691.22821ef4.chunk.js' Copying file: 'static\js\691.22821ef4.chunk.js.LICENSE.txt' Copying file: 'static\js\779.329e7238.chunk.js' Copying file: 'static\js\779.329e7238.chunk.js.LICENSE.txt' Copying file: 'static\js\835.632e8ee9.chunk.js' Copying file: 'static\js\835.632e8ee9.chunk.js.LICENSE.txt' Copying file: 'static\js\866.a83a269e.chunk.js' Copying file: 'static\js\871.935930ac.chunk.js' Copying file: 'static\js\877.5b295d00.chunk.js' Copying file: 'static\js\883.8bcd5626.chunk.js' Copying file: 'static\js\883.8bcd5626.chunk.js.LICENSE.txt' Copying file: 'static\js\941.e9cd0997.chunk.js' Copying file: 'static\js\main.a7087837.js' Copying file: 'static\js\main.a7087837.js.LICENSE.txt' Copying file: 'static\media\ActiveBridgeIcon.63d90aa707db188f19d530410c6c6268.svg' Copying file: 'static\media\ActiveIcon.556616af7441dc4f7e127127be62f21f.svg' Copying file: 'static\media\ActiveItems.f0ecbe804cfe98e18401.svg' Copying file: 'static\media\ActiveItems.f0ecbe804cfe98e184010f0b83475fee.svg' Copying file: 'static\media\ActiveItemsSelected.b022496617d20cf7fa3d.svg' Copying file: 'static\media\AddIcon.337046ac938daca1b01eedaa2cfaa0ee.svg' Copying file: 'static\media\AdminSettings.f76bba3b08cb99702d659f247e889ecc.svg' Copying file: 'static\media\AllItems.279e451759322fcdb78e.svg' Copying file: 'static\media\AllItems.279e451759322fcdb78e5a915309832c.svg' Copying file: 'static\media\AllItemsSelected.0e42daa2e8e96694eb40.svg' Copying file: 'static\media\AppLogo.26a3793d228728847b3126c0fbc6895e.svg' Copying file: 'static\media\BannerImageContrast.3e775ff3a8f5ac653692.svg' Copying file: 'static\media\BannerImageDark.e1e9323dc339536ab73c.svg' Copying file: 'static\media\BannerImageDefault.950e5cf5e7e724298368.svg' Copying file: 'static\media\ButtonEditIcon.ad8f1f82093ae8ef72bc1449607b1622.svg' Copying file: 'static\media\ClosedIcon.9e1db61e446f56116b2f6863ff02fa83.svg' Copying file: 'static\media\ClosedItems.2c7115a1dbc9d7ccfe97.svg' Omitting next output lines... Finished successfully.

[v-ajaysahu]

@SemBurendo , Initially, you stated that your deployment had failed, but the screenshot you provided indicates it was successful. To further troubleshoot your issue, we require the console and network logs. Here are the instructions to retrieve the logs: Please launch Teams in your browser, then access the developer tools and open the TEOC app. Then share the console logs & network traces to assist in troubleshooting the issue.

[SemBurendo]

I mentioned in my initial post that 'After deploying the solution to Azure ...', the initial deployment worked but the site was not loading, after which I tried redeploying several times using the redeploy commit feature from the App Service deployment centre and each time the redeployment failed. The console logs & network traces are below:

console.log

[v-ajaysahu]

@SemBurendo , Thank you for providing the console logs. According to the logs, you are encountering 404 and 400 errors. Please verify that you have granted the necessary permissions to the Azure AD App as outlined in the provided link. Additionally, download the network logs by clicking on the download icon highlighted in the screenshot and share the file for further troubleshooting.

[SemBurendo]

Network logs: teams.microsoft.com.har.txt

AD Permissions:

[v-ajaysahu]

@SemBurendo , The network log you provided does not contain any requests related to the TEOC app. Please open Teams in your browser, access the developer tools, and launch the TEOC app. Afterward, share the network traces. According to the screenshot, it appears that you have granted all the necessary permissions, but please ensure that all permissions have received admin consent.

[SemBurendo]

Here's a new network log, let me know if this include requests to the TEOC app. content.har.txt

[SemBurendo]

Some additional info:

I can see the following failures in app insights.

i.e. the app was getting 400 errors when calling the following endpoint https://graph.microsoft.us/v1.0/sites//lists/TEOC-Config/items?$expand=fields&$Top=5000 https://graph.microsoft.us/v1.0/sites//lists/TEOC-UserRoles/items?$expand=fields($select=Title,Role)

I was however able to make successful API calls using Postman using the app registration credentials (as a delegated user) https://graph.microsoft.com/v1.0/sites/{siteid}/Lists/TEOC-Config/items?$expand=fields&$Top=5000 https://graph.microsoft.us/v1.0/sites/{siteid}/lists/TEOC-Config/items?$expand=fields&$Top=5000

I also noticed that the URL that was being logged in app insights does not include {siteid}, I don't know if the URL is logged verbatim or the {siteid} part is stripped out in the logs for security

[SteveWedge]

I have what appears to be a similar issue, I've deployed the TEOC App, as an App Service, and uploaded the packages to Teams and SharePoint, when I logon to TEOC I don't see anything other than the banner and welcome message.

I've looked in the logs at the error messages, in the console

And I noticed that for the 2 I have underlined, the URL seems to have the SharePoint site name incorrectly specified, i.e. its as shown below for both errors (I've substituted mydomain for the tenant name)

https://ktbteocnprd.azurewebsites.net/sites/mydomain.sharepoint.com:/sites/mydomain.sharepoint.com/sites/Teams-EOC-Example?$select=id

https://ktbteocnprd.azurewebsites.net/sites/mydomain.sharepoint.com:/sites/mydomain.sharepoint.com/sites/Teams-EOC-Example?$select=id

Is that an issue and if so, then what has been misconfigured that would cause this?

[v-ajaysahu]

@SemBurendo ,

Some additional info:

I can see the following failures in app insights.

i.e. the app was getting 400 errors when calling the following endpoint https://graph.microsoft.us/v1.0/sites//lists/TEOC-Config/items?$expand=fields&$Top=5000 https://graph.microsoft.us/v1.0/sites//lists/TEOC-UserRoles/items?$expand=fields($select=Title,Role)

I was however able to make successful API calls using Postman using the app registration credentials (as a delegated user) https://graph.microsoft.com/v1.0/sites/{siteid}/Lists/TEOC-Config/items?$expand=fields&$Top=5000 https://graph.microsoft.us/v1.0/sites/{siteid}/lists/TEOC-Config/items?$expand=fields&$Top=5000

I also noticed that the URL that was being logged in app insights does not include {siteid}, I don't know if the URL is logged verbatim or the {siteid} part is stripped out in the logs for security

The error mentioned has occurred because the Graph API cannot locate the root site. Could you please confirm if you have provided admin consent? Additionally, the network information you have shared does not contain any record of this request. Please open Teams in a browser, then open the developer tools to ensure they are active. Afterward, open the TEOC application, download the network traces as previously instructed, and share them here.

[SemBurendo]

@v-ajaysahu Admin consent was provided to all the permissions that require one, I'm also using the same app registration to generate tokens for postman to make the API calls which works.

With regards, the network trace, I followed your instruction to generate both network traces. I have tried this again and attached the log below. network_log.har.zip

I have also included a screenshot of the console log in Developer Tools. I noticed that the URL the app is trying to call does not include the site name or ID i.e. there is nothing after 'site/' in the URL, is this right? I also noticed the message '..request is being redirected to the National Cloud 'MicrosoftOnline.COM' in the GetTenantDetails call.

[v-ajaysahu]

@SemBurendo , Thank you for confirming that you have provided administrative consent. However, your root site appears to be inaccessible. Could you please confirm if you are able to access the root site at https://example.sharepoint.com? Additionally, kindly provide your email address and your available times so that I can arrange a Microsoft Teams meeting to troubleshoot this issue further. Note: Our availability is from 10 AM to 7:30 PM IST.

[v-ajaysahu]

@SteveWedge , Your issue seems distinct from this one. It appears that during deployment, you entered the full SharePoint URL rather than just the endpoint. For instance, if your TEOC site URL is 'https://example.sharepoint.com/sites/TEOCSite', you should only input 'TEOCSite', not the entire URL. Also, ensure that what you have entered in the base name does not include capital letters. To verify this, navigate to the Azure Resource group, select "Microsoft.template", and check the inputs to see what you have entered. If issues persist, please create an issue.

[SemBurendo]

@v-ajaysahu I can indeed access the root site. My email is semiu.salawu@ukhsa.gov.uk and I'm available 2.30PM - 4pm IST on Friday, 29/08, thanks

[SteveWedge]

@v-ajaysahu , Is this in Step 3 of the deployment guide and is there anyway of remediating this, or do I need to delete the App Service and run step 3 again?

I couldn't see anything that resembled Microsoft.template in the Resource Group, so I can't be sure that's what I did. I have found an Environment Variable in the App Service, named REACT_APP_SHAREPOINT_SITE_NAME, that did contain the fully qualified site name, and have replaced that with just the explicit site name from the URL, saved and restarted the App Service, but that doesn't seem to have made any difference to what I'm seeing.

[v-ajaysahu]

@SemBurendo , Following our meeting discussion, the Azure deployment template selected was incorrect; the GCCH environment was chosen instead of the standard template. Please refer to the link below and follow the instructions provided there. https://github.com/OfficeDev/microsoft-teams-emergency-operations-center/wiki/Deployment-Guide#3-deploy-to-your-azure-subscription

[v-ajaysahu]

@SemBurendo , The closure of this issue suggests that it has been resolved. To summarize the cause: the issue arose because the user followed the GCCH deployment guide rather than the Standard one, which resulted in all Graph API calls being directed to graph.microsoft.us instead of graph.microsoft.com.

[v-ajaysahu]

@v-ajaysahu , Is this in Step 3 of the deployment guide and is there anyway of remediating this, or do I need to delete the App Service and run step 3 again?

I couldn't see anything that resembled Microsoft.template in the Resource Group, so I can't be sure that's what I did. I have found an Environment Variable in the App Service, named REACT_APP_SHAREPOINT_SITE_NAME, that did contain the fully qualified site name, and have replaced that with just the explicit site name from the URL, saved and restarted the App Service, but that doesn't seem to have made any difference to what I'm seeing.

@SteveWedge , Yes, you need to delete the entire Azure resource group and retry the process with the correct values as previously specified. You may retain other values, such as the base resource name (provided it contains no capital letters), client ID, and client secret. If the issue persists, please create a new issue.

https://github.com/OfficeDev/microsoft-teams-emergency-operations-center/wiki/Deployment-Guide#3-deploy-to-your-azure-subscription