newrelic / opensource-website

Source code for New Relic's Opensource site.
https://opensource.newrelic.com
Apache License 2.0
155 stars 89 forks source link

Blocking cookies breaks withDarkMode component #795

Closed aswanson-nr closed 3 years ago

aswanson-nr commented 3 years ago

Description

The withDarkMode component uses the localStorage API directly, which causes errors when the browser blocks access to those APIs. This causes most of the site to not display correctly.

Screen Shot 2021-06-01 at 11 33 44 AM

withDarkMode provides information about the current mode of the theme to various components around the site. It does this through checking localStorage for the darkMode key and using the use-dark-mode hook. When cookies are blocked by the browser, it blocks our access to certain browser APIs such as localStorage and causes this component to throw an uncaught error. This error comes from our attempt to access localStorage https://github.com/newrelic/opensource-website/blob/develop/src/components/withDarkMode.js#L10 and the use-dark-mode hook.

Solution

  1. Wrap the call to localStorage in a try/catch.
  2. Tell use-dark-mode to use an in-memory store when localStorage isn't available, similar to how the theme does it.

    Steps to Reproduce

Run the opensource site and block all cookies on your browser.

Expected Behavior

The core content loads without needing access to the localStorage.

jpvajda commented 3 years ago

@aswanson-nr will this bug be resolved with #794?

aswanson-nr commented 3 years ago

@jpvajda This will not be resolved by #794. That PR fixes the overall issues introduced through the theme, unfortunately there are still some problems with the opensource-site that won't be resolved. I broke this out into another ticket because I didn't want to keep blindly hacking at it. I will take the action to add AC!

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be automatically closed if no further activity occurs. Thank you for your contributions.

elaguerta commented 3 years ago

I'm starting to dig into this one.

rudouglas commented 3 years ago

Sorry @elaguerta didn't see your comment, ignore my PR 😬

elaguerta commented 3 years ago

@rudouglas I'm taking myself off this one. I put a closes keyword on your PR, but if you get a chance you may want to relink it. No worries at all - you didn't step on my toes, and I was glad to see your solution. Thanks for coordinating!