[Bug]: ScrollRestoration errors if sessionStorage is blocked

[david-bezero]

What version of React Router are you using?

6.3.0 (but also still present in later versions)

Steps to Reproduce

Open any react-router-dom page which includes <ScrollRestoration /> in a browser which has blocked access to sessionStorage (e.g. running inside a sandboxed cross-origin iframe, or more easy to reproduce: block all cookies in Chrome)

Expected Behavior

This setItem call should be wrapped in a try/catch so that permissions issues do not reach the console.

Clearly the functionality won't work in this situation, but it should fail gracefully, rather than printing an error to the console.

Actual Behavior

Error in console:

Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

[timdorr]

That's a pretty rare case, as using a browser with cookies disabled is not common at all.

Even then, having no error shown is the wrong thing to do here, as it gives no information for diagnosing the condition in the wild. We can't bubble up that error through the hook, as it's trapped inside of an event handler. So, without this, you would have no idea it's not functioning.

[david-bezero]

@timdorr sorry I wasn't clear: the blocking cookies thing was just intended as an easy way to replicate the issue, but isn't the actual problem I'm having.

The actual manifestation of the issue for me is when loading a site inside a third-party website's iframe (specifically a "preview" environment), where due to the security headers and sandboxing they are applying, the same situation manifests (accessing sessionStorage throws the error shown in the issue).

Replicating it that way is much harder though, since it involves multiple sites, a sandboxed iframe, and security headers.

---

If you're opposed to handling the error, could I suggest at least capturing it and wrapping / logging it with a better message? That way I could at least set up a filter on our error tracking system to flag this as an expected error that isn't causing noticeable user pain (I wouldn't want to hide all failures to access sessionStorage since other places could have actual impact on the user).

As a suggestion:

  usePageHide(
    React.useCallback(() => {
      /*...*/
      try {
        sessionStorage.setItem(/*...*/);
        window.history.scrollRestoration = "auto";
      } catch (err) {
        console.warn('Failed to record scroll position in session storage. Scroll restoration will not work.', err);
      }
    }, [/*...*/])
  );

(as I see that console.warn is already used elsewhere)

[timdorr]

Mind creating a PR for this?

[david-bezero]

Sure; created #10848

[brophdawg11]

This is resolved by #10848 and will be available in the next release (either 6.16.1 or 6.17.0)