TanStack / TanStack/db

Console flooded with "Function object could not be cloned" with multiple persisted tabs

Open
#1,498 0 comments 0 reactions 0 assignees View on GitHub

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:

  1. git clone git@github.com:c-kirkeby/tanstack-db-failed-to-ensure-remote-subset.git
  2. Go to localhost:3000
  3. Open a second tab and open the dev tools in both
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.