fix: WebSocket is closed before the connection is established warning

[stipsan]

Description

In production we have this very annoying warning:

WebSocket connection to 'wss://:projectId.api.sanity.io/v2022-06-30/socket/:dataset?tag=sanity.studio' failed: WebSocket is closed before the connection is established.

Here's both the warning, and the Network tab, showing that a WSS were initiated and discarded:

After moving the useGlobalPresence and useDocumentPresence hooks to useObservable from react-rx, the problem is resolved in production:

It's not resolved when using sanity dev. I'm not sure yet why that is, but I suspect it's a timing problem with the observable in one of its dependencies.

The change from useMemo to useState in ResourceCacheProvider is to reduce possible issues in StrictMode as the hook is called twice there: https://react.dev/reference/react/useMemo#my-calculation-runs-twice-on-every-re-render

What to review

It makes sense?

Testing

Test that global presence and document presence still works ok (it does on my tests, it's nice with a second pair of eyes).

Notes for release

No longer warns about WebSocket is closed before the connection is established in production.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 29, 2024 9:55am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 29, 2024 9:55am
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 29, 2024 9:55am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 29, 2024 9:55am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 29, 2024 9:55am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Aug 29, 2024 9:55am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Aug 29, 2024 9:52 AM (UTC)

❌ Failed Tests (2) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	44s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	9s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	31s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	36s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	16s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	10s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	3m 0s	0	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	43s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 47s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 14s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	8s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	25s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	17s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	❌ Failed (Inspect)	1m 32s	19	0	2
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

[stipsan]

Closing this as after I rebased this PR onto next it now makes matters worse.
Instead of removing the console.warn in production, while dev mode still has a single console.warn, production now logs twice 🤯:

Dev mode still logs once. I don't have time to bisect and chase what commit on next that were made since this PR originally opened, and now no longer fixes the issue, so I'll close this and leave it for @sanity-io/studio-dx to dive in and get to the bottom of the production console.warn 🙌 💖