Changing globals in toolbar reloads whole site and sometimes don't work

[JuhG]

Summary

Maybe these are two separate issues

• whenever we change the globals in the toolbar, the whole documentation page reloads, not just the stories (is it because the whole page is wrapped inside ThemeProvider?)
• in some cases it fails, doesn't update the globals and just reloads the old version. copied the error message and a video of it in "Additional information"

Anyone ran into something similar?

Additional information

Here's a video of it:
https://github.com/storybookjs/storybook/assets/10765158/2d28e389-36e5-48a9-ac95-a69cc37da7b4

And here's the error message:

The error message in text:
manager - received storyRenderPhaseChanged but was unable to determine the source of the event
manager - received globalsUpdated but was unable to determine the source of the event

And here's the relevant part of the preview.tsx:

const preview: Preview = {
  ...
  globalTypes: {
    mode: {
      defaultValue: "dark",
      toolbar: {
        title: "Mode",
        items: ["light", "dark"],
        dynamicTitle: true,
      },
    },
    ...
  },
  decorators: [
    (Story, context) => {
      return (
        <ThemeProvider ...>
          <Story />
        </ThemeProvider>
      );
    },
  ],
}

Create a reproduction

No response

[JuhG]

Found a related issue: #15659
I'm going to expand on both of these issues and why they are hard to reproduce

Changing globals reloads the documentation page

This is related topreview.parameters.docs.container or decorators - when you wrap the documentation page with ThemeProvider that uses these globals, it reloads the page, not just rerenders the component. For some reason it doesn't do this in a stackblitz example - tried to remove components and simplify the main.stories array and at some point it fixed itself. So looks like SB only does this when there are a lot of components, maybe some race condition or performance bottleneck we're hitting. But this is just a guess. We have something like 50+ components, so nothing crazy.

Changing globals fails in some cases

received X but was unable to determine the source of the event - seems like event.source is undefined in getEventSourceUrl:

storybook/code/lib/channels/src/postmessage/index.ts

Lines 218 to 219 in 38dfc50

	event.source =
	this.config.page === 'preview' ? rawEvent.origin : getEventSourceUrl(rawEvent);

I'm not familiar with the code, so not sure why we need different logic on docs page and preview page. rawEvent.origin is always defined, but in that function the code looks for the source, which is not available sometimes. The strange part is that in some cases it works. A couple of components always work, others mostly fail, some fails in a way that changing the global doesn't even happen - which is the most frustrating part of this. (again, some of this is guessing)

So if I change that like to

event.source = rawEvent.origin;

this issue goes away. Most probably there's a reason this needs to happen, but want to say that the issue is in getEventSourceUrl.ts I think.

[nukemonk]

Hello.

I've ran into something similar. The same issue happens to me in docs pages with "larger" stories. It indeed seems to be some race condition since the issue happens more frequently when stories grow bigger. It also happens more frequently in development than in production builds.
Another interesting thing is that it works fine when you change globals using the useGlobals hook in a decorator.

I've made a reproduction repo and hosted it with Chromatic here. I have use Material-UI but I don't think that is the actual cause. It seems to happen without MUI as well as long the render phase of the story is long/heavy.
Just note that Chromatic hosts a productional build and therefor you don't see the error in the console and neither does it happen as frequently.

[JuhG]

Thanks @nukemonk, awesome example. Referenced this in the related issue.

This is how console looks like locally running it:

[KurtRogers]

Any news on this? Experiencing it on 8.1.11

[nukemonk]

Doesn't seem like it, unfortunately

[ChristopherJohnson25]

I am having the same issue on 8.6.0