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.

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

Extension causes query response handling to fail. Uncaught TypeError: Cannot convert object to primitive value #1328

Open
anthonysapien opened this issue Apr 13, 2024 · 6 comments

Comments

@anthonysapien
Copy link

Intended outcome:

Open a page that runs a query that loads a list of projects.

Actual outcome:

I see the following error in the Developer Tools Console. It only occurs on the page load. Subsequent app navigation to run the same query works fine.

Uncaught TypeError: Cannot convert object to primitive value
at String ()
at console.warn ()
at console.r [as warn] (fs.js:4:15190)
at invariant.ts:42:21
at Function.warn (invariantWrappers.ts:17:7)
at writeToStore.ts:851:5
at writeToStore.ts:216:15
at Array.forEach ()
at writeToStore.ts:207:36
at Map.forEach ()
r @ fs.js:4
(anonymous) @ invariant.ts:42
(anonymous) @ invariantWrappers.ts:17
(anonymous) @ writeToStore.ts:851
(anonymous) @ writeToStore.ts:216
(anonymous) @ writeToStore.ts:207
e.writeToStore @ writeToStore.ts:167
t.write @ inMemoryCache.ts:205
e.writeQuery @ cache.ts:166
(anonymous) @ QueryInfo.ts:399
l @ inMemoryCache.ts:420
t.batch @ inMemoryCache.ts:464
t.performTransaction @ inMemoryCache.ts:507
e.markResult @ QueryInfo.ts:397
(anonymous) @ QueryManager.ts:1172
i @ asyncMap.ts:32
(anonymous) @ asyncMap.ts:17
f @ projects:1
Promise @ projects:1
then @ asyncMap.ts:17
(anonymous) @ asyncMap.ts:34
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
(anonymous) @ iteration.ts:13
li @ iteration.ts:13
next @ Concast.ts:168
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
onNext @ retryLink.ts:130
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
next @ index.ts:55
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
next @ module.js:310
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
f @ projects:1
setTimeout (async)
f @ projects:1
Zn @ module.js:61
Ln @ module.js:146
Fn @ module.js:176
t.error @ module.js:229
(anonymous) @ iteration.ts:13
li @ iteration.ts:13
t.reportError @ ObservableQuery.ts:1006
error @ ObservableQuery.ts:911
(anonymous) @ iteration.ts:13
li @ iteration.ts:13
error @ Concast.ts:183
Ln @ module.js:137
Fn @ module.js:176
t.error @ module.js:229
(anonymous) @ asyncMap.ts:36
f @ projects:1
Promise.then (async)
a.then @ projects:1
(anonymous) @ asyncMap.ts:34
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
(anonymous) @ iteration.ts:13
li @ iteration.ts:13
next @ Concast.ts:168
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
onNext @ retryLink.ts:130
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
next @ index.ts:55
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
next @ module.js:310
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
f @ projects:1
Promise.then (async)
a.then @ projects:1
(anonymous) @ createHttpLink.ts:196
f @ projects:1
Promise.then (async)
a.then @ projects:1
(anonymous) @ createHttpLink.ts:189
e @ module.js:190
t.subscribe @ module.js:264
(anonymous) @ index.ts:25
f @ projects:1
Promise.then (async)
a.then @ projects:1
(anonymous) @ index.ts:22
e @ module.js:190
t.subscribe @ module.js:264
(anonymous) @ module.js:302
e @ module.js:190
t.subscribe @ module.js:264
(anonymous) @ index.ts:36
e @ module.js:190
t.subscribe @ module.js:264
e.try @ retryLink.ts:119
e.start @ retryLink.ts:102
t.request @ retryLink.ts:198
(anonymous) @ ApolloLink.ts:102
(anonymous) @ ApolloLink.ts:102
(anonymous) @ ApolloLink.ts:102
(anonymous) @ ApolloLink.ts:94
e.execute @ ApolloLink.ts:68
e.getObservableFromLink @ QueryManager.ts:1100
e.getResultsFromLink @ QueryManager.ts:1139
g @ QueryManager.ts:1573
e.fetchQueryByPolicy @ QueryManager.ts:1619
w @ QueryManager.ts:1246
e.fetchConcastWithInfo @ QueryManager.ts:1312
t.fetch @ ObservableQuery.ts:748
t.reobserveAsConcast @ ObservableQuery.ts:900
t.reobserve @ ObservableQuery.ts:941
(anonymous) @ ObservableQuery.ts:144
e @ module.js:190
t.subscribe @ module.js:264
(anonymous) @ useQuery.ts:235
Da @ react-dom.production.min.js:174
ol @ react-dom.production.min.js:244
Cc @ react-dom.production.min.js:286
(anonymous) @ react-dom.production.min.js:283
Sc @ react-dom.production.min.js:281
cc @ react-dom.production.min.js:273
Ho @ react-dom.production.min.js:127
(anonymous) @ react-dom.production.min.js:267
Show 125 more frames
Show less

How to reproduce the issue:

My app is unfortunately not public, and I don't know how to reproduce this. It doesn't occur on all of my pages, just certain ones.
When I disable the extension, everything works fine. When I reenable it, I see the error again. It occurs on every full page reload.

It looks like this is happening to others as well as I discovered that it might be the extension from this review:
https://chromewebstore.google.com/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm?pli=1

Thanks for looking into it. Let me know if I can provider further information.

Desktop (please complete the following information):

  • OS: Mac
  • Browser: Chrome
  • Browser version 123.0.6312.107 (Official Build) (arm64)
  • Extension version 4.11.2
@jerelmiller
Copy link
Member

Hey @anthonysapien 👋

Thanks for pointing this out and sorry for the issue! We added the ability for the devtools to decode error messages from the client, but there was a bug with the client messages in a couple patch versions. We will see if we can make this more gracefully degrade with those versions.

Do you mind replying with the client version you're using?

@anthonysapien
Copy link
Author

anthonysapien commented Apr 14, 2024 via email

@anthonysapien
Copy link
Author

anthonysapien commented Apr 14, 2024 via email

@jerelmiller
Copy link
Member

Glad to hear it! I'll leave this open for now to see if there is anything else we can do in the devtools for the client versions that have this bug.

@phryneas
Copy link
Member

phryneas commented Apr 16, 2024

If this happens again, I hope that the CodeSandbox I created over in this issue can be a starting point to help debugging:

apollographql/apollo-client#11639 (comment)

Load the Sandbox first:

codesandbox.io/p/sandbox/trigger-cache-warning-cltdvn

Then visit the standalone Sandbox:

cltdvn.csb.app

Scenarios to check:

  • Browser window with DevTools enabled - you should get three warnings, the first a link and the two other "spelled out"
  • Browser window with DevTools disabled - you should get three warnings, the first two should be links and the last one "spelled out"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants