Comments (9)
phryneas
commented on May 31, 2024
1
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.
from apollo-client-devtools.
jerelmiller
commented on May 31, 2024
1
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!
from apollo-client-devtools.
mrm007
commented on May 31, 2024
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
from apollo-client-devtools.
phryneas
commented on May 31, 2024
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.
from apollo-client-devtools.
phryneas
commented on May 31, 2024
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.
from apollo-client-devtools.
phryneas
commented on May 31, 2024
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.
from apollo-client-devtools.
phryneas
commented on May 31, 2024
This should be fixed by #1164, imitating the approach the React DevTools use.
from apollo-client-devtools.
mrm007
commented on May 31, 2024
Thank you @phryneas 🙏
from apollo-client-devtools.
github-actions
commented on May 31, 2024
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.
from apollo-client-devtools.
Related Issues (20)
- Finish Tailwind migration HOT 1
- Active queries disappear when used with RedwoodJS
- Dependency Dashboard
- Not working! Apollo Client Devtools on Chrome latest HOT 17
- Doesn't work in latest Chromium-based MS Edge HOT 6
- Server side mutation errors are not reported in the explorer HOT 2
- Looking for client... No longer working after recent update HOT 16
- Impossible to track newly-created ApolloClients HOT 3
- Reactive Var Tab HOT 1
- Cache tab explodes causing the devtools to crash
- DevTools does not show any data for my app HOT 11
- Intermittent connection issues when first opening dev tools HOT 5
- unable to load devtool properly. Failed to execute 'postMessage' on 'Window' HOT 5
- v4.8.1 breaks Google Cloud Console on Arc & Chrome for Mac HOT 4
- Provide development apps that contains irregular cache data
- not show any data HOT 3
- Apollo Client Dev Tools get stuck HOT 3
- Extension causes query response handling to fail. Uncaught TypeError: Cannot convert object to primitive value HOT 6
- Serious memory leak issue with the devtools extension HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apollo-client-devtools.