search

codesandbox / sandpack

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.
https://sandpack.codesandbox.io
Apache License 2.0
4.92k stars 352 forks source link

Privacy settings blocking the "Static" template #938

Open joshwcomeau opened 1 year ago

joshwcomeau commented 1 year ago

Bug report

Packages affected

Description of the problem

Since migrating my CSS course to use Sandpack via the Static template, I've heard from 10-15 users who have run into problems with the preview showing up. We've identified several different "variants" that are all caused by the same root issue:

• Brave users who haven't disabled Brave Shield • Users browsing in "Incognito" or private windows • Users who have decided to block third-party cookies in their browser settings

The fundamental issue, it seems, is that the Static template uses a Service Worker, on an external domain. This combo appears to be grouped together with "third-party cookies", and blocked by privacy settings trying to disable tracking (I found a thread that discusses this a bit).

Now, I realize that we probably can't do anything to "fix" the problem, since the Static template depends on Service Workers, but I wonder if we can do anything to highlight the issue.

The current errors I've seen are:

  1. Failed to ensure the relay has a Service Worker registered.
  2. DOMException: Failed to get ServiceWorkerRegistration objects: The user denied permission to use Service Worker.

That second one offers a pretty big clue, but I wonder if it would be useful to add a page to the docs that explains this issue, and to link to that page whenever these errors are thrown?

I think it would be helpful for 2 reasons:

  1. It would give people a solution to the problem, so that they get unstuck
  2. It would help explain why they need to enable third-party cookies, that it has nothing to do with Facebook tracking pixels or stuff like that.

Reproduction

The easiest way I've found is to use "Incognito Mode". Here's a CodeSandbox that demonstrates the issue: https://codesandbox.io/s/static-bug-go12nb

Curiously, the issue isn't present in the official docs site (https://sandpack.codesandbox.io/docs/getting-started/usage). Maybe because the static bundler shares the same root domain and therefore not "third-party"?

Software Name/Version
Sandpack-client version
Sandpack-react version 2.6.1
Browser Chrome (Incognito)
Operating System MacOS
GrossDesignCo commented 1 year ago

I’ve seen this happen with the brave browser, one of our devs couldn’t get any previews to load at all until he disabled one of the default settings.

in his case it wasn’t limited to the static template, they all seemed to time out.

zachmerrill commented 1 year ago

CodeSandbox in general doesn't work if you have a lot of these privacy settings. Try opening a Sandbox in incognito mode for example. Would love to see this fixed.