search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 998 forks source link

SPFx WebPart does randomly not show on SharePoint page and seems not loaded #9062

Closed ThomasContini closed 4 months ago

ThomasContini commented 1 year 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

Additional environment details

Describe the bug / error

We developed a custom webpart in order to make a kind of advanced toolbar. This webpart has been deployed to all SharePoint sites from a specific hub (through site collection app catalogs), and installed on every sites' home pages.

The component is placed at the very top of a vertical section.

Most of the time, the component is perfectly working, and shows correctly. However, while navigating between pages through hub navigation, and completely randomly, it get not loaded correctly.

Logs

No issues in console from the component itself. Only SP issues that we already saw on other tenants or pages... I still let you the complete log:

console1

console2

DOM

It seems like the component is not even loaded by SharePoint Framework! DOM is empty at component location:

DOM-when-error

Site sources

I decided to look at the loaded sources thanks to the developer console in Edge. The client side assets are not even present in sources when this bug is appearing:

When component does not correctly:

Assets-when-error

When component shows correctly:

Assets-when-good

We have other components deployed on the same pages, but they show correctly. However, the same bug has already been seen on other custom SPFx components, still randomly, but less time than this one I would say.

Recurrence

This bug happens for all end users and developers working on this specific tenant. It still seems more redundant as end user, without admin rights.

My own thinking

Hope I provided enough information :)

Steps to reproduce

This one is quite tricky to reproduce. We are currently not able to reproduce it on other tenants with the same component in the same configuration. It seems only happening on a specific tenant.

Here is how we reproduce it on this specific tenant:

  1. Create multiple site collections, create site collection app catalogs on it, then deploy a custom component
  2. Add all these new sites to a new hub, then update hub navigation to be able to navigate between home pages
  3. Install this component on every sites' home pages, configure it in a really similar way
  4. Navigate between home pages through the Hub navigation, the bug could appear after multiple retries. We currently need about 10-20 attempts to reproduce it...

Sorry to not be able to provide more infos about how you can reproduce this issue...

Expected behavior

The component should always show itself correctly.

ghost commented 1 year ago

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

AJIXuMuK commented 1 year ago

@ThomasContini if you look closely to the console logs you will see that your custom service is failing due to CORS configuration. I assume, you're making a request in onInit -> request is failing -> web part is not rendering.

ThomasContini commented 1 year ago

Hi @AJIXuMuK,

Thanks for your feedback!

Unfortunately this CORS issue is not issued from my component code. Moreover, this issue appears everytime we use PnP controls because of their telemetry but should not stop code execution, as we see this in every single component we developed using PnP controls, and they are still loading...

In order to prove that, I just made a new attempt, bug still reproduces, this time no error about CORS policy and still the component is not showing:

rep1-console1 rep1-console2

I also made a new attempt by opting out PnP telemetry, issue is still here.

IMHO, If my onInit method was crashing, I would get a different error such as the famous Something went wrong, because it would not reach my renderer.

AJIXuMuK commented 1 year ago

@ThomasContini - sorry for the delay.

IMHO, If my onInit method was crashing, I would get a different error such as the famous Something went wrong, because it would not reach my renderer.

It depends. If you are throwing the error from onInit or rejecting the promise then yes. But if you just "swallow" the exception - it will not be displayed.

Could you please check if the same issue occurs on some dummy/simple web part on the same page/tenant? Could you share your solution or test tenant with me?

You can use aterentiev@microsoft.com to share it.

Thanks!

ThomasContini commented 1 year ago

Hi @AJIXuMuK,

I just invite you on the tenant, and sent you URL to connect by email. I also shared you the source code through a private Github repo.

Hope you have everything that could be useful to understand the issue.

Thanks!

andrewpeterson99 commented 2 months ago

Could I ask what the resolution to this was? I'm running into a similar issue.