fix(v2): fail-safe usage of browser storage (localStorage/sessionStorage) when access is denied

[jknoxville]

Motivation

When you have 3rd party cookies blocked in chrome, in some cases (e.g. running in iframe), you can't access window.localStorage.

So I'm wrapping all such calls in a try-catch. It's already done at many callsites, so I'm reusing the same convention, by just console.error(err).

Without this, the entire page renders blank when some of these calls are attempted and fail.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Tested loading the docsuaurus website in a cross-domain iframe.
Before: renders blank page.
After: Renders correctly, with new errors printed to console.

[netlify]

[V1]

Built with commit 725dc88

https://deploy-preview-4501--docusaurus-1.netlify.app

[netlify]

[V2]

Built with commit 725dc88

https://deploy-preview-4501--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	66
🟢 Accessibility	96
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-4501--docusaurus-2.netlify.app/

[slorber]

What about handling our own local storage API with a default fail-safe behavior?
That could make the code simpler?

(ex with RN: https://github.com/slorber/react-native-storage-slot/blob/master/src/StorageSlot.ts)

[jknoxville]

Thanks for the quick response! That makes sense to me. Shall we go with the exact same API as used there? i.e create a slot and then use it?

[slorber]

I think that could be useful so that we have a uniform API to use everywhere yes.

We could also have a hook-like "useStorage("key")" that would no-op if some config option is provided? maybe a bit overkill for now

[jknoxville]

I wasn't sure where to put the localStorage wrapper, so chose @docusaurus/core as it seems to be the most widely shared dependency, but the failing e2e test shows it's failing to import in some cases:

Module not found: Can't resolve '@docusaurus/core/src/localStorage' in '/home/runner/work/docusaurus/docusaurus/test-website/node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion'

@slorber Do you have any guidance on how I can fix this?

[jknoxville]

Does anyone have any ideas? Perhaps @lex111 ?
As I understand it, this makes all uses of Docusaurus fail to render inside an iframe for users blocking third-party cookies, which is now the default in some browsers, and soon will be in chrome too, so I'm very eager to get it fixed.

It looks like its just the yarn-v1 E2E test that's failing with this PR.

And to be specific, its docusaurus-theme-common failing to import the new file from docusaurus-core.

[slorber]

Will take a look at this!

FYE simple steps to repro (and validate this is correctly fixed):

• open private Chrome browsing session (usually block localstorage in iframes)
• open https://docusaurus-in-iframe.netlify.app/

It seems your PR works:

[slorber]

Updated your PR, moved to theme-common and cleaned a few things to align with the direction I'd like to set for storage usage in Docusaurus themes.

Seems good to merge, still works in an iframe.