Masterbar: async-load launch button to prevent Explat warnings

[zaguiini]

Proposed Changes

• Load MasterbarLaunchButton with AsyncLoad in the logged-in masterbar instead of a static import.
• Switch masterbar-launch-button.tsx to a default export so the async chunk resolves correctly.

Why are these changes being made?

The masterbar is loaded in SSR contexts and because the Launch Button contains experiment setup code and the explat code should only be run in the browser, it was giving us

ERROR calypso: 
    message: Trying to initialize anonId outside of a browser context.
    --
    properties: {
      "context": "explat",
      "explat_client": "calypso",
      "message": "Trying to initialize anonId outside of a browser context."
    }

Testing Instructions

1. Log in to Calypso with a site that is not launched yet.
2. Confirm the launch button still appears and works (launch flow / navigation as before).
3. Check you don't see the error in the server logs.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174856

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174856&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174856&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174856&env=dashboard

Dashboard Live (CIAB) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174856&env=dashboard-ciab

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/async-load-masterbar-launch-button on your sandbox.

[p-jackson]

@aaronyan when calypso/lib/explat is imported on the server we get this error message.

https://github.com/Automattic/wp-calypso/blob/c234565488018d2672be95943e4bf19a79e52e8e/client/lib/explat/internals/anon-id.ts#L45

It makes sense that we skip initialising this on the server, but we safely skip it by returning null. So what's the purpose of the error message? Afaict nothing bad happens, and in fact I would think skipping this is expected behaviour? If a React component uses explat, then it makes sense to skip this on the server and then when the component is hydrated client side is when the anonID is set up.

Can't we remove this line or at least downgrade it from an error to just an info message?

[p-jackson]

The problem is that AsyncLoad can't be server rendered, it's internal <Suspense> element can't be serialised by vanilla React. I merged #109543 to work around this issue for the help centre icon, but I think we could maybe do a "simpler" solution for the MasterbarLaunchButton?

The issue is that master-bar-launch-button.tsx imports lib/explat, which then sets up the anonId at the module level. No way of avoiding it once you've imported lib/explat.

This is some untested code. We could switch the useExperiment call in master-bar-launch-button.tsx out for a hook like this.

function useAsyncExperiment( experimentName: string ) {
	const [ result, setResult ] = useState( [ true, null ] );

	useEffect( () => {
		let isSubscribed = true;
		import ('calypso/lib/explat').then( ( { loadExperimentAssignment } ) => {
			if ( isSubscribed ) {
				loadExperimentAssignment( experimentName ).then( ( data ) => {
					if ( isSubscribed ) {
						setResult( [ false, data ] );
					}
				} );
			}
		} );
		return () => {
			isSubscribed = false;
		};
	}, [ experimentName ] );

	return result;
}

But even this might be more complicated than necessary. See question in the comment above.

[p-jackson]

I'm reverting this (#109845) because AsyncLoad is going to introduce other SSR issues. Will hopefully hear from @aaronyan about whether we can simply silence the error.

[p-jackson]

Follow up #109849

[aaronyan]

Thanks @p-jackson! I'll share some thoughts on your PR. Thanks for fixing this at the ExPlat level.