SPFx web part does not work in in-meeting / during meeting experience (sidePanel)

canturan commented 3 years ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

[ ] 💥 Internet Explorer
[X] 💥 Microsoft Edge
[X] 💥 Google Chrome
[ ] 💥 FireFox
[ ] 💥 Safari
[ ] mobile (iOS/iPadOS)
[ ] mobile (Android)
[ ] not applicable
[ ] other (enter in the "Additional environment details" area below)

Additional environment details

SPFx: 1.12.1 Microsoft Teams Version 1.4.00.11161 (64-bit) - tested with and without developer preview.

Describe the bug / error

The SPFx web parts are still not working in the during meeting / in-meeting experience.

There was a known bug in Microsoft Teams client where the URL isn’t being encoded or decoded correctly and therefore, the SPFx component ID isn’t correctly passed along to SharePoint Online. This results in the SharePoint Online default error page as it complains about not finding the ID. It looks like this bug is already fixed. I can see the correct decoded URL in the request to SharePoint teamshostedapps.aspx page. But there is now a new bug, that the SPFx web parts still not loading.

The error message, that I get from the hostedApps page is the following: Error details: Error: Error initializing application. Error: Error: Error initializing teams environment: Error: This call is not allowed in the 'sidePanel' context Correlation ID: 9167d29f-10d3-c000-1d1a-cdf151ba8fad

This happens already, with a fresh created "hello world" web part, without any changes in the code.

BTW, the before and after meeting experiences are working without any problem!

Steps to reproduce

Create a new SPFx web part.
Create manifest.json in the teams folder
Extend the configurableTabs configuration of your tab / web part with the following entries under the entry context "meetingChatTab", "meetingDetailsTab", "meetingSidePanel",
Deploy you app to SP app catalog and to the Teams.
Add your app to a meeting, join to this meeting an select the app on the top.

Expected behavior

The SPFx web part works exactly like in the before and after meeting experiences.

ghost commented 3 years ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

VesaJuvonen commented 3 years ago

Thanks for reporting @canturan this one. Sorry for the small delay on getting things acknowledged from our side, but we'll absolutely work on investigating the root cause. Something has absolutely changed somewhere and we'll get on top of this.

patmill commented 3 years ago

While we try and repro this ourselves, is it possible for you to look at the call stack / console / etc. and get the full callstack to know which call isn't supported in the Side Panel?

VesaJuvonen commented 3 years ago

@canturan - We are having difficulties on finding a repo on this. any change you could share additional details like @patmill is asking? - is it possible for you to look at the call stack / console / etc. and get the full callstack to know which call isn't supported in the Side Panel?

canturan commented 3 years ago

@patmill @VesaJuvonen : I will try to give as much as information as I can:

Firstly, there is nothing in the console:
This is what happens in the Network tab, when I call the webpart in the sidePanel:
First, the TeamsLogon.aspx is callled (TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26meeting%26componentId=21efcf1d-3f93-4663-864b-2de69927e5c6). This initiates the redirect to the teamshostedapp.aspx (teamshostedapp.aspx?teams&meeting&componentId=21efcf1d-3f93-4663-864b-2de69927e5c6) and get the document. After the script execution the error.aspx page is called (/error.aspx?ErrorCorrelationId=6ff3d49f-e0c2-c000-1d1a-cb8e1b692924&ErrorText=Can%27t%20load%20the%20application%20on%20this%20page.%20Use%20the%20browser%20Back%20button%20to%20retry.%20If%20the%20problem%20persists%2C%20contact%20the%20administrator%20of%20the%20site%20and%20give%20them%20the%20information%20in%20Technical%20Details.&ErrorDetails=Error%3A%20Error%20initializing%20application.%20Error%3A%20Error%3A%20Error%20initializing%20teams%20environment%3A%20Error%3A%20This%20call%20is%20not%20allowed%20in%20the%20%27sidePanel%27%20context&ErrorCategory=spfx&Workload=TeamsWebPartApplication&Name=SpfxLoad)

The document, that I get from the teamshostedapp.aspx call is the following. It is actually the standard teamshostedapp.aspx response. I assume, the problem happens in the "spModuleLoader" :


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="GENERATOR" content="Microsoft SharePoint"><link rel="shortcut icon" href="/_layouts/15/images/favicon.ico?rev=43" type="image/vnd.microsoft.icon" id="favicon"><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >(function() { if (window && window.PerformanceLongTaskTiming) { try { var g = window.__tti = { e: [], f: [] }; g.o = new PerformanceObserver(function(l) { g.e = g.e.concat(l.getEntriesByType('longtask')); g.f = g.f.concat(l.getEntriesByType('first-input')); }); g.o.observe({ entryTypes: ['longtask', 'first-input'] })} catch(e) {}}})();</script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >if(!spfxPerfMarks){var spfxPerfMarks = {};} var markPerfStage=function(key) {if(window.performance && typeof window.performance.now === 'function'){spfxPerfMarks[key]=window.performance.now();} else{spfxPerfMarks[key]=Date.now();} if (window.performance && typeof window.performance.mark === 'function') {window.performance.mark(key);}};</script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('headStart');</script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >(function(global){global.__spWorkerSupported=false;})(self);</script>
    <script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >if(window) { window.FabricConfig={fontBaseUrl:''}}</script><link nonce="07d0fc75-f69b-4576-a79b-b14a593f6e91" crossorigin="anonymous" href="https://modern.akamai.odsp.cdn.office.net:443/files/sp-client/teams-web-part-application-assembly_en-us_f650394e0fa52933a2e97308c4108476.js" rel="preload" as="script" /><!-- Flushing stream --><title>

    </title><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('renderCssLinkStart');</script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('renderCssLinkEnd');</script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('scriptPreloadStart');</script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('scriptPreloadEnd');</script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('moduleLoaderScriptStart');</script><script nonce="07d0fc75-f69b-4576-a79b-b14a593f6e91" crossorigin="anonymous" src="https://modern.akamai.odsp.cdn.office.net:443/files/sp-client/teams-web-part-application-assembly_en-us_f650394e0fa52933a2e97308c4108476.js">

    </script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('moduleLoaderScriptEnd');</script><script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('headEnd');</script>
</head><!-- Flushing stream --><body style="margin: 0; padding: 0">
    <script  nonce= '07d0fc75-f69b-4576-a79b-b14a593f6e91' >typeof markPerfStage === 'function' && markPerfStage('bodyStart');</script><script nonce="07d0fc75-f69b-4576-a79b-b14a593f6e91">
        (typeof markPerfStage === 'function' && markPerfStage('executionScriptStart'));//<!--



- As I said before, the webpart works in the pre- and post-meeting experiences. The only difference, that I see, that teamshostedapp.aspx call in the sidePanel has an extra query string parameter &meeting: 

pre-meeting: teamshostedapp.aspx?teams&componentId=21efcf1d-3f93-4663-864b-2de69927e5c6
sidePanel / in-meeting: teamshostedapp.aspx?teams&meeting&componentId=21efcf1d-3f93-4663-864b-2de69927e5c6

- As you can also see in the Network stack, the web part (ClientSideAssets) is not loaded at all. Even the react is not loading in the sidePanel. It looks like, it happens before the spModuleLoader loads the client side assets. 

This is all, I can see at the call stack/console. 
Please let me know, if I can help more. 
Thank you!

canturan commented 3 years ago

@patmill @VesaJuvonen: I would like to ask, if there is any update on this issue. Thanks!!!

canturan commented 3 years ago

@patmill @VesaJuvonen : I have tested the inMeeting experience today with the same OOTB SPFx web part. The behavior is not as the same as the last time, I've tested it. I am not getting any error message anymore.

As you can see in the network stack: The TeamsLogon.aspx does a redirect to the teamshostedapp.aspx, hostedApp page loads the teams-web-part-application-assembly and after that nothing happens. spModuleLoader does not load the web part at all.

The pre/post meeting experiences are still working without any problem.

I hope, these information help you to track the issue. Thank you!

canturan commented 3 years ago

@VesaJuvonen @patmill Do we have any update on this issue??

patmill commented 3 years ago

Hi @canturan - my understanding was that the teams app had been updated to fix this issue. Let me see what is happening there. Just to confirm (from looking at the screenshots and everything) - this is running the Windows desktop client of Teams, correct? Also - can you confirm what teams "ring" you are in? I believe there should be a little glyph over the user image in the top bar with something like R4.

canturan commented 3 years ago

Hi @patmill : Yes. I am using the Windows desktop client. It has the version: 1.4.00.26376 (64-bit). It should be the latest version. I don't have a glyph on my user (actually it appears when I enable the preview mode for pre-release) but I can see the "ring" on the developer tools of the client for the main window which is "general". I can also see the region and the ring of the teams server from the response from the "https://teams.microsoft.com/desktopclient/settings/windows/x64" endpoint which is the following:

If I enable the developer preview, then I am on the ring3_6

The app is also not working on the developer preview. I have tested it today with 3 different HelloWorld web part, completely OOB, created with yo generator with SPFx 1.11, 1.12.1 and 1.13 beta.20. The behavior is always the same:

After the teams-wp-application assembly is loaded, nothing happens.

patmill commented 3 years ago

Thanks - following up with the Teams team. If it is a simple thing, can you get the full URL w/ query string (don't need the domain) to TeamsLogon.aspx? The issue we saw previously was that the URL was getting decoded before it was rendered, so the parameters that should have been going to teamshostedapp.aspx were getting processed by teamslogon.aspx . Want to confirm that it is this issue, and not a new one.

canturan commented 3 years ago

You are correct. We had the issue with the wrong encoding/decoding but I think, it is already solved. I can see the correct parameters and the componentId:

patmill commented 3 years ago

Right - got it. I can kind of repro this now, but it shows slightly different to me. Are you still getting the error about "call is not allowed in the 'sidePanel' context", or are you seeing a plain black screen?

patmill commented 3 years ago

OK - more info as we try and figure things out. As I mentioned, I'm getting different errors than you, but looking into the code of teams.js, there is a call to getSettings made, and in the ensureInitialized method, there is a line like this - ` throw new Error("This call is not allowed in the '" + i.GlobalVars.frameContext + "' context") And the frameContext in this case is sidePanel. From what I can tell, that probably means that your manifest file (as described in this doc - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-meeting-app ) might be missing meetingSidePanel from the context section. Can you double check what your manifest looks like? And that might get you past your problem, but then into my problem, which is that getSettings appears to not be returning. Let me know if that moves things forward for you though.

canturan commented 3 years ago

Hi @patmill : I have the meetingSidePanel in the manifest file as described in the documentation. Otherwise the app does not appear on the bar during the meeting:

I am just seeing a plain black screen and not the "This call is not allowed in the sidePanel"

I tried to debug the teams-wp-application-assembly. In my case, it crashes before the ensureInitialized method is called. The error I see happens on getOboFirstPartyAuthToken method and the error message is: "App resource defined in the manifest and iframe origin do not match":

canturan commented 3 years ago

Just a little bit extra information: If I also enable the meetingStage in the manifest file (I am not sure, if SPFx supports the meetingStage yet), I see the same error message as I posted in my previous message "App resource defined in the manifest and iframe origin do not match" but after that the script execution continues. Then it fails on the ensureInitialized method as you described:

Error: Error: This call is not allowed in the 'meetingStage' context at Object.t.ensureInitialized (https://modernb.akamai.odsp.cdn.office.net/files/sp-client/teams-web-part-application-assembly_en-us_7407d846cc4aaf649732812561b15b89.js:1:44951) at e.getSettings (https://modernb.akamai.odsp.cdn.office.net/files/sp-client/teams-web-part-application-assembly_en-us_7407d846cc4aaf649732812561b15b89.js:1:59005) at https://modernb.akamai.odsp.cdn.office.net/files/sp-client/teams-web-part-application-assembly_en-us_7407d846cc4aaf649732812561b15b89.js:1:109025 at new Promise () at V (https://modernb.akamai.odsp.cdn.office.net/files/sp-client/teams-web-part-application-assembly_en-us_7407d846cc4aaf649732812561b15b89.js:1:108995) at e._setUpTeamsSettingsObject (https://modernb.akamai.odsp.cdn.office.net/files/sp-client/teams-web-part-application-assembly_en-us_7407d846cc4aaf649732812561b15b89.js:1:114107) at https://modernb.akamai.odsp.cdn.office.net/files/sp-client/teams-web-part-application-assembly_en-us_7407d846cc4aaf649732812561b15b89.js:1:110148

On the sidePanel, it just stops execution after the "App resource defined in the manifest and iframe origin do not match" error.

patmill commented 3 years ago

Thanks. We've figured out the various things colliding here, and have checked in a fix. It will start rolling next week, and should be world wide in a couple of weeks.

patmill commented 3 years ago

This should be fully patched now.

ghost commented 3 years ago

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues

SharePoint / sp-dev-docs