Server timeout issue w/ Workers

[GrossDesignCo]

Bug report

Packages affected

• [ ] sandpack-client
• [x] sandpack-react

Description of the problem

Intermittently the Sandpack instance will throw an error like so:

The error appears to be coming from the sendObjectBeacon call here:

Once one instance fails, all (or nearly all) instances on the same machine also fail with the same error. It seems like it's

What were you doing when the problem occurred?

Nothing, this usually happens when leaving a tab alone for a while or walking away from the machine to make coffee :)

What steps can we take to reproduce the problem?

Appears to happen with a large number of big (we have bundled local imports in the 2-3mb range) Sandpack instances, or with a large number of tabs open that all have Sandpack instances. Happens for all templates.

We're loading them into a Nextjs website. I'd love any tips on getting to a more reliable reproduction if y'all have them :)

Your Environment

Software	Name/Version
Sandpack-client version	2.6.0
Sandpack-react version	2.6.0
Browser	Chrome 112
Operating System	MacOS 13.3.1

[zachmerrill]

Noticing this issue too when I leave a tab too long. The "Try Again" doesn't fix it for me, only a hard refresh of the page.

[JustJenFelice]

Happens in your own docs as well

[danilowoz]

@DeMoorJasper, would you happen to know what's happening on the static template?

[DeMoorJasper]

Not sure how to reproduce it, but maybe it's a service worker that gets unloaded by the browser and there should be some kind of reload button that reloads the whole app including the service worker?

[jerrywu001]

I notice this issue too when I leave a tab too long. The "Try Again" doesn't fix it for me, only a hard refresh of the page.

The reason why "Try Again" can not take effect is:

rerunning logic in sandpack-react/src/contexts/utils/useClient.ts file got an issue

So, the sandpack client can not restart running it. you can only see the loading icon in progress.

use this for test

<Sandpack
    customSetup={{
      dependencies: {
        yjs: 'latest',
        '@toeverything/theme': 'latest',
        '@blocksuite/block-std': 'nightly',
        '@blocksuite/blocks': 'nightly',
        '@blocksuite/editor': 'nightly',
        '@blocksuite/global': 'nightly',
        '@blocksuite/lit': 'nightly',
        '@blocksuite/store': 'nightly',
        '@blocksuite/virgo': 'nightly',
      }
    }}
    files={{
      '/index.ts': `import { SimpleAffineEditor } from '@blocksuite/editor';
import '@blocksuite/editor/themes/affine.css';

const editor = new SimpleAffineEditor();
document.body.appendChild(editor);`,
    }}
    template="vanilla-ts"
  />

@danilowoz @DeMoorJasper

[joshwcomeau]

Hey folks! I've heard from many of my users now who have run into this issue. Not critical since refreshing the page does fix it, but it isn't the best experience.

[DeMoorJasper]

Tried again with the provided reproduction and still seems like I can't reproduce this, in theory things like the service workers shouldn't time out as they are kept awake automatically by some ping logic we implemented.

[danilowoz]

The reason why "Try Again" can not take effect is:

rerunning logic in sandpack-react/src/contexts/utils/useClient.ts file got an issue

@jerrywu001, not sure this is correct. Because when you press on Try again, Sandpack runs the following function, which recreates the client and sets each one as "running". Are you able to reproduce it? Would you mind setting a breakpoint on this function and providing more details? Unfortunately, I couldn't reproduce it

// useClient.ts