Console flooded with "Function object could not be cloned" with multiple persisted tabs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 266
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 55
Description
- I've validated the bug against the latest version of DB packages
Describe the bug
When using an on-demand query collection with a persisted sqlite collection in the browser, if you open two tabs it will flood the client's console with the message (in the tab that was opened the latest):
Failed to ensure remote subset: DOMException: Function object could not be cloned.
sendRPCOnce @tanstack_browser-db-sqlite-persistence.js:2723
sendRPCOnce @tanstack_browser-db-sqlite-persistence.js:2704
sendRPC @tanstack_browser-db-sqlite-persistence.js:2696
requestEnsureRemoteSubset @tanstack_browser-db-sqlite-persistence.js:2517
flushPendingRemoteSubsetEnsures @tanstack_browser-db-sqlite-persistence.js:776
queueRemoteSubsetEnsure @tanstack_browser-db-sqlite-persistence.js:759
hydrateSubsetUnsafe @tanstack_browser-db-sqlite-persistence.js:475
loadSubset @tanstack_browser-db-sqlite-persistence.js:338
taskPromise @tanstack_browser-db-sqlite-persistence.js:141
promise callback*run @tanstack_browser-db-sqlite-persistence.js:141
loadSubset @tanstack_browser-db-sqlite-persistence.js:338
loadSubset @tanstack_browser-db-sqlite-persistence.js:1169
loadSubset @tanstack_react-db.js:5083
requestSnapshot @tanstack_react-db.js:4305
subscribeChanges @tanstack_react-db.js:4537
subscribeChanges @tanstack_react-db.js:6929
subscribeToMatchingChanges @tanstack_react-db.js:11034
subscribeToChanges @tanstack_react-db.js:11006
subscribe @tanstack_react-db.js:10982
loaders @tanstack_react-db.js:11633
subscribeToAllCollections @tanstack_react-db.js:11621
syncFn @tanstack_react-db.js:11415
startSync @tanstack_react-db.js:4869
CollectionImpl @tanstack_react-db.js:6624
createCollection @tanstack_react-db.js:6545
bridgeToCreateCollection @tanstack_react-db.js:12019
createLiveQueryCollection @tanstack_react-db.js:12015
useLiveQuery @tanstack_react-db.js:13189
RouteComponent index.tsx:76
react_stack_bottom_frame react-dom_client.js:12868
renderWithHooks react-dom_client.js:4213
updateFunctionComponent react-dom_client.js:5569
beginWork react-dom_client.js:6140
runWithFiberInDEV react-dom_client.js:851
performUnitOfWork react-dom_client.js:8429
workLoopSync react-dom_client.js:8325
renderRootSync react-dom_client.js:8309
performWorkOnRoot react-dom_client.js:7957
performSyncWorkOnRoot react-dom_client.js:9067
flushSyncWorkAcrossRoots_impl react-dom_client.js:8984
flushPassiveEffects react-dom_client.js:8816
commitRoot react-dom_client.js:8562
performWorkUntilDeadline react-dom_client.js:36
require_scheduler_development react-dom_client.js:141
require_scheduler_development react-dom_client.js:244
__commonJSMin chunk-CYJPkc-J.js:8
require_scheduler react-dom_client.js:249
__commonJSMin chunk-CYJPkc-J.js:8
require_react_dom_client_development react-dom_client.js:11672
require_react_dom_client_development react-dom_client.js:14375
__commonJSMin chunk-CYJPkc-J.js:8
require_client react-dom_client.js:14380
__commonJSMin chunk-CYJPkc-J.js:8
<anonymous> react-dom_client.js:14383
To Reproduce
Steps to reproduce the behavior:
git clone git@github.com:c-kirkeby/tanstack-db-failed-to-ensure-remote-subset.git- Go to localhost:3000
- Open a second tab and open the dev tools in both
- The second tab will continuously receive this warning.
Expected behavior
I'm not too sure how this should be handled in a multi-tab context. Presumably some kind of reconciliation would need to happen to ensure that they are synchronised and this warning doesn't happen. Claude's explanation seems to be that existence of the where clause in the predicate is what's causing the issue.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Bazzite 43 (kernel 6.17.7-ba29.fc43.x86_64 (64-bit))
- Browser: Zen 1.19.10b (Firefox 150.0) (64-bit)
- Version: 0.6.5
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction repository and trace the sendRPCOnce and requestEnsureRemoteSubset calls shown in the browser bundle stack. Reproduce the issue with two tabs using an on-demand query collection and persisted SQLite collection; done means the second tab no longer floods the console with cloning warnings while the tabs remain synchronized.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, sqlite, typescript
- Domain
- databases, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100