Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extension prevents websites (tested on atlassian.com) from loading styles #1162

Closed
Yvad60 opened this issue Dec 10, 2023 · 9 comments · Fixed by #1164 or #1232
Closed

Extension prevents websites (tested on atlassian.com) from loading styles #1162

Yvad60 opened this issue Dec 10, 2023 · 9 comments · Fixed by #1164 or #1232

Comments

@Yvad60
Copy link

Yvad60 commented Dec 10, 2023

Intended outcome:
I was surfing the web trying to access the Atlassian website atlassian.com. The website looks like the following when the extension is disabled or removed

Screenshot 2023-12-10 at 09 32 23

Actual outcome:
The website loads without styles

Screenshot 2023-12-10 at 09 50 45

How to reproduce the issue:
Install or enable the extension then open atlassian.com

Desktop (please complete the following information):

  • OS: macOS Sonoma 14.0
  • Browser: Arc Version 1.20.1 (43987), Brave v 1.61.101, Microsoft Edge Version 120.0.2210.61
  • Extension version: Version 4.2.3
@phryneas
Copy link
Member

This seems to be caused by us inserting a <script> tag at the end of <head>. Apparently, they are SSRing their head element as well, and get a hydration mismatch - but instead of gracefully recovering from that, they just give up.

Seems like some custom flavor of SSR that isn't very well tested :/

We could go around this by inserting our script tag after the body element, inside the html element - I just tested that, and it works. But it's not compliant with the HTML spec.

To be honest, I'm not sure if this is something we can cater to. Browser extensions have to insert their content somewhere, and if a page completely crashes because it has an additional <script tag, no matter where we insert it there will always be another page crashing if we insert it somewhere else.
I'll bring it up at our next internal meeting, but right now my gut feeling tells me that Atlassian really needs to get their homepage fixed - if it's not crashed by the Apollo DevTools, it will be crashed by a hundred other extensions - this is something extensions need to do to function.

@mrm007
Copy link

mrm007 commented Dec 14, 2023 •
edited

It's not just Atlassian.

This custom flavour of SSR is quite popular in React apps, especially as React Server Components become more widely adopted. Next.js (app router) and Remix render the whole HTML document on the server. Also reported in #937.

apollo.client.devtools.bad.mp4

Not sure if related, but the extension crashes the Dev Tools panel in Firefox. With the extension disabled:

apollo.client.devtools.disabled.mp4

@phryneas
Copy link
Member

phryneas commented Dec 14, 2023 •
edited

This custom flavour of SSR is quite popular in React apps, especially as React Server Components become more widely adopted. Next.js (app router) and Remix render the whole HTML document on the server. Also reported in #937.

They render the whole page on the server, usually but they don't hydrate the whole page on the server, which is what causes the problem.
Especially the Next.js App router will only hydrate client components, so while everything is rendered on the server, only a small part of the page's body is actually hydrated and can cause hydration mismatches, but not the head part of the application.
As for Remix, I'll have to look into that, but as I said, for browser extensions injecting script tags into the document is a necessity (reports of other extensions here), and I would image that if Remix is trying to hydrate the whole header, they will have the same problem with other extensions, and I would assume they might have changed this on their side long ago - but I'll look into it.

Also, generally, the worst thing that will happen on a hydration mismatch is that React automatically rerenders the whole page. That this doesn't happen on the Atlassian site seems very weird - they seem to have managed to disable a central part of React rendering for some reason.

Not sure if related, but the extension crashes the Dev Tools panel in Firefox. With the extension disabled:

Honestly I don't even know how we could crash the DevTools even if we wanted as they run in isolation from our DevTools tab, but I agree, this is very weird behaviour.

@phryneas
Copy link
Member

PS: After digging a little bit, it seems like Remix is using React to render and rehydrate the entirety of document, which means there is no place in the whole website we could inject any extension-related script into, not even "in html, after body" or any similarly obscure places.
As a result it seems that Remix will be broken by any browser extension that needs to inject code into the website. This is really irritating.

@phryneas
Copy link
Member

phryneas commented Dec 14, 2023 •
edited

It looks like there is a relatively new browser api to work around that, registerContentScripts. (And of course, Firefox needs further workarounds)
I guess I'll look into that further.

@phryneas phryneas mentioned this issue Dec 14, 2023
Merged
@phryneas
Copy link
Member

phryneas commented Dec 14, 2023 •
edited

This should be fixed by #1164, imitating the approach the React DevTools use.

@mrm007
Copy link

mrm007 commented Dec 17, 2023

Thank you @phryneas 🙏

@jerelmiller
Copy link
Member

Hey @Yvad60 and @mrm007 👋

Unfortunately we discovered an issue with our latest release and had to roll it back. I'm reopening this issue once more until we are able to dig into the changes a bit more. So sorry for this!

@jerelmiller jerelmiller reopened this Dec 20, 2023
@jerelmiller jerelmiller mentioned this issue Feb 21, 2024
Merged
@github-actions GitHub Actions
Copy link
Contributor

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
4 participants
@jerelmiller @mrm007 @phryneas @Yvad60