Explorer is not working

[Arian8Ultra]

I have devtool on my other device and it work flawlessly but in my new device everything is working except Explorer and its blanked out

@apollo/client version

3.8.8

Apollo Client Devtools version

4.18.6

[Arian8Ultra]

here is my other device on the same exact project

[Arian8Ultra]

do i need to install anything?

[phryneas]

No, you don't need to install anything.

The explorer is included as an iframe - do you maybe have any privacy plugins installed that might block that iframe?

[Arian8Ultra]

my browser is clean installed
i tried on chrome, fire fox and also edge but nothing works and all of them are just installed
and also my run in explorer is disabled

[jerelmiller]

@Arian8Ultra can you right-click in the extension and "Inspect"? This should bring up another devtools pane that lets you inspect the Apollo Client Devtools extension. If you do this, do you see errors in the JavaScript console there by chance?

[Arian8Ultra]

im seeing these:
devtools-1727126757536.log

[jerelmiller]

How strange! I've never seen that kind of error. We don't have a live-metrics file anywhere in the extension so I'm not sure where that is coming from. Do you perhaps have some kind of system extension enabled that might have an effect here?

[Arian8Ultra]

i just have quilbot and apollo
is it possible that some privacy setting in edge or chrome is preventing apollo from working correctly?

[Arian8Ultra]

im not sure but this might be the problem:
Unknown VE context: chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfmApollo

[jerelmiller]

Perhaps? Can you try opening the explorer in its own tab? I'd be curious if this is loading for you: https://explorer.embed.apollographql.com/

[Arian8Ultra]

the link that you provide is working:

[jerelmiller]

Interesting! Would you mind opening a support ticket using the link in that screenshot? Unfortunately I'm not on the team that owns this codebase since its an iframe into our embedded explorer. I'll raise the issue internally with the team as well.

[Arian8Ultra]

i deleted my last comment because it worked again (the link)
it was my network problem but the code was :
426b525e59e24e89bed90e34a769e6c2

[Arian8Ultra]

I will
Thanks a lot

[Arian8Ultra]

in the end i have a question:
in what condition the run in explorer is disabled?

it should help me to fix this maybe

[jerelmiller]

It looks like it will be disabled if its unable to setup the iframe for the embedded explorer:

apollo-client-devtools/src/application/components/Queries/RunInExplorerButton.tsx

Line 26 in 5a75c41

disabled={!embeddedExplorerIFrame}

This is set from the Explorer tab in App.tsx:

apollo-client-devtools/src/application/App.tsx

Line 272 in 5a75c41

setEmbeddedExplorerIFrame,

which itself is called if we are able to get a message from the underlying iframe:

apollo-client-devtools/src/application/components/Explorer/Explorer.tsx

Lines 155 to 162 in 5a75c41

	const onPostMessageReceived = (event: IncomingMessageEvent) => {
	if (event.data.name === EXPLORER_LISTENING_FOR_HANDSHAKE) {
	setEmbeddedExplorerIFrame(iframe);
	sendHandshakeToEmbed({
	embeddedExplorerIFrame: iframe,
	graphRef,
	});
	}

My guess is that since your machine is unable to setup the iframe, it can't receive the message, so the button remains disabled.

[Arian8Ultra]

That is very very helpful
I will check it and come back to you

[jerelmiller]

If it would help to run the extension locally so you can add logging to the code, check out the instructions from this comment: #1396 (comment) (I really gotta move these to the README 🙃)

[Arian8Ultra]

I made an iframe in my project with the url you provided and i got this:
Access to fetch at 'https://studio-ui-deployments.apollographql.com/build/iframeIdentitySync.html' from origin 'https://explorer.embed.apollographql.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[jerelmiller]

Can you use the full URL that we do in the devtools to check to see if this is still the case? In the extension, we route the network requests through your actual Apollo Client instance connected to devtools, so the fetch happens in the top frame. Here is the URL:

apollo-client-devtools/src/application/components/Explorer/Explorer.tsx

Lines 270 to 271 in 5a75c41

	`${EMBEDDABLE_EXPLORER_URL}?sendRequestsFrom=parent&shouldPersistState=false&showHeadersAndEnvVars=false&shouldShowGlobalHeader=false&parentSupportsSubscriptions=true&theme=${color}${
	graphRef ? `&graphRef=${graphRef}` : ""

where EMBEDDABLE_EXPLORER_URL is https://explorer.embed.apollographql.com/ and color is "dark" (feel free to omit the graphRef if you're not logged into Apollo Studio).

That sendRequestsFrom=parent part of the URL tells the embedded explorer to send the request as a window.postMessage instead of a network request. I wouldn't expect network requests to work using this URL, but I'd be curious if you're still seeing CORS issues with this.

[Arian8Ultra]

I tried it again with the full url as you said, and this was the result :

Access to fetch at 'https://studio-ui-deployments.apollographql.com/build/iframeIdentitySync.html' from origin 'https://explorer.embed.apollographql.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
StrategyHandler.js:160

    Uncaught (in promise) TypeError: Failed to fetch
at W.fetch (StrategyHandler.js:160:35)
at F._handleInstall (PrecacheStrategy.js:143:40)
at F._handle (PrecacheStrategy.js:71:31)
at async F._getResponse (Strategy.js:144:13)

[Arian8Ultra]

and here is my test code for the iframe:

    <iframe
        id="embedded-explorer"
        className="w-full h-full border-none bg-black-100"
        src={"https://explorer.embed.apollographql.com?sendRequestsFrom=parent&shouldPersistState=false&showHeadersAndEnvVars=false&shouldShowGlobalHeader=false&parentSupportsSubscriptions=true&theme=dark"}
      />

[Arian8Ultra]

and when i open the first url in the error i will get this:
Error: Forbidden
Your client does not have permission to get URL /build/iframeIdentitySync.html from this server.

[Arian8Ultra]

I found the problem

my DNS server was the problem and the sync of the iframe was interrupted by it

I just used a vpn and every thing is working
I also tried google's DNS and it worked too

[jerelmiller]

Unfortunately I have no way to reproduce this, so at this point I'm not even sure how to begin figuring this out. It's odd to me that you're seeing different error messages from the devtools errors and the raw iframe you're using here.

If you're willing to help out and dive in a bit deeper since you're able to reproduce it on your machine, that would be greatly appreciated. Clone this repo and use the steps outlined in #1396 (comment) in order to run the extension locally. Perhaps having access to the raw code can help get a bit closer to the issue.

[jerelmiller]

Oh awesome! Seems I posted my comment too soon 😆. Thats fantastic!

[Arian8Ultra]

I'm so sorry about it
thanks a lot

[github-actions]

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.

[jerelmiller]

No problem! I'm just glad you were able to figure it out. At least this leaves a paper trail for anyone else that may stumble into the same issue. Have a great rest of your day!