DevTools does not show any data for my app

[andreimatei]

I have a React app using Apollo Client. The Dev Tools do not show any data - no queries, no mutations, no cache - as if the extension does not recognize that my app uses Apollo Client.

How would I start debugging this?

FWIW, the extension used to work in the past. The only thing I can think of is that I've since changed the way in which my app instantiates the Apollo Client: I'm currently creating the Apollo Client inside a provider, asynchronously, as a result of a fetch (so, after the initial renders of the page). Should this matter?

Desktop (please complete the following information):

• OS: [Ubuntu]
• Browser [both Chrome and Firefox]
• Extension version [4.8.0]

[jerelmiller]

Hey @andreimatei 👋

By chance do you know what version of the devtools you were using before when it was working for you? We've done quite a bit of refactoring work lately to try and improve the reliability of the devtools and its message passing, but some of it is still a bit of a shot in the dark.

When you load the page, do you see a "Looking for client" message? If so, let it search for >= 10 sec and you should see a modal that pops up with some debugging tips to try and diagnose what might be happening.

It should look like the following:

Thanks for opening the issue! Hopefully we can get this resolved for you soon 🙂

[andreimatei]

Hello!

I don't know what version worked for me, sorry.

I don't see any messages about looking for a client, or not finding a client.
The extension looks like this for me. Note that it looks this way both when the active tab is my react app, and also when the active tab is any other website (is that surprising?).

I should also have mentioned that I started passing connectToDevTools: true to the client constructor, and it didn't make a difference.

[jerelmiller]

Ok interesting! If you're not seeing the message, then I think that means that it connected, but the devtools just isn't able to get data from the client. This could be 1 of 2 problems:

1. The data we try and pull from your client instance is empty for some reason

Try the following in your JS console and see if you get anything back:

const devtools = window.__APOLLO_DEVTOOLS_GLOBAL_HOOK__
{ queries: devtools.getQueries(), mutations: devtools.getMutations(), cache: devtools.getCache() }

If you're seeing data here, then it could be a problem with the communciation to the devtools from your browser tab.

2. Problems with communication from the browser tab

You should be able to check to see if your browser tab is receiving messages from the devtools panel with the following:

window.addEventListener('message', (event) => console.log(event.data))

You should see events in the following form:

{
  source: 'apollo-client-devtools',
  message: { ... }
}

NOTE: You'll need to have the Apollo tab selected in order for messages to be received. When you're looking at other tabs, we don't send any messages, so make this this tab is selected.

Let me know what you are seeing!

[jerelmiller]

One more thing! Could you open the devtools using this app and see if you're still experiencing the same problem?

https://phryneas.github.io/ac-devtools-test/

[andreimatei]

A browser restart seems to have fixed everything...
Before that, on my app's tab, the extension appeared connected but was not showing any data. On other random tabs, the extension was saying "looking for client". On the tab https://phryneas.github.io/ac-devtools-test/, the extension said something about an error and asked me to refresh, I believe; a simple refresh did not do the trick. But:
After a browser restart, the extension works.

I again apologize for the noise. Closing.

[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]

@andreimatei no problem at all! I've seen a few comments now about the "Looking for client", then refreshing fixes the problem. I think this might be a symptom of a smaller underlying issue. I'll continue to investigate this to see if I can track down this specific problem, but glad you're at least seeing data now 🙂.

[andreimatei]

I've seen a few comments now about the "Looking for client", then refreshing fixes the problem.

Just to note - in my case, refreshing (many times) did not fix the problem. Only a browser (Chrome) restart did it. In fact, I believe the problem was happening in multiple tabs at once. But then opening a new tab in a different Chrome profile worked. At which point I closed all windows and then it worked in both profiles.

What makes this all extra confusing is that I swear that while filing this issue, I had also tried the Firefox extension, and it also didn't work... But now, an hour later, it does work; no restarts or refreshes in that case.

[jerelmiller]

How very strange! That certainly helps at least give us a better clue as to what might be happening here. Thanks for the extra info @andreimatei!

[KrisCoulson]

@jerelmiller just came here because this was happening to me. Not sure why I killed but I killed chrome completely and rebooted and now devtools are connecting correctly. Currently I am on 4.11.0. The last time I looked at the apollo devtools I am not sure what version I was on.

Could it be that chrome extension updated while browser was open? Before I killed chrome it would show devtools but it would just be spinning saying "looking for client"

[jerelmiller]

@KrisCoulson I've noticed that a few times as well. I'll note your comment in #1247. This one seems to be elusive, but you might be on to something here. We haven't quite nailed down why this seems to happen at times since it sorta auto-fixes itself before we can log anything. Thanks for letting me know though! The quest continues... 😆