feat(devtool): add the RxDB database viewer plugin - #8940
Open
pubkey wants to merge 5 commits into
Open
Conversation
Contributor
✅ Verify Test Reproduction: Tests FAILED without the fix (expected)This confirms the changed tests correctly reproduce the bug that the source changes fix. This workflow runs the changed tests without the source fix to verify they reproduce the bug. Show output |
Implements the database viewer devtool from the design handoff as a framework free plugin that renders against a running RxDatabase. Chrome and navigation: - 44px top bar with database identity, command palette, refresh and help - 200px left rail with collections, replication status glyphs and tools - content toolbar and Mango query bar scoped to the current collection - connecting, failed and connected screens for a remote peer, plus the read-only banner for a static dump Panels: - table grid with selection, inline cell editing, sorting and paging - JSON view with syntax highlighting and the observe highlight - document drawer that stages edits and previews the exact upsert in a WILL RUN block before Apply - blast-radius confirmation that requires typing the collection name - Live activity map with 60s counters, sparklines, particle lanes, burst bands, instances and live-queries sub panels - Schema panel sampling stored documents against the declared schema - Query lab explaining the used index, examined and discarded counts - Replication panel with per direction state, checkpoint and live feed - Changes panel with a unified diff of every write - Storage panel with tombstone counts and cleanup - stacked read-only layout below 640px The stylesheet and all glyphs ship inside the plugin, there are no external assets and no font files. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
The comment on findBareWord() and the broken-selector testcase both spelled out a misspelled boolean literally, which codespell reports. The testcase now uses another bare word that is equally invalid JSON. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
Three fixes found by driving the devtool in a browser against a seeded database. A filled RxJsonSchema sorts its properties alphabetically, so the grid was picking its columns in alphabetical order. On a todos collection that dropped `title` from the grid entirely and gave the wide column to `dueDate`. Column selection moved into pickGridColumns() and now gives the wide column to a string without a maxLength, which is free text, and prefers the required fields for the narrow columns. Added testcases. Schema and Query lab read the collection from the navigation, which is a tool while they are open, so they always analysed the alphabetically first collection instead of the one that was on screen. The store now remembers the last opened collection and both panels use it. The app node of the Live map drew the full location pathname, which pushed the node out of its column on a long url. Only the tail is drawn. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
`check-types` compiles the test folder with strict null checks, where Array.find() is possibly undefined. The tauri example fails the same way because its tsc reaches the root test folder too. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
Adds a db-viewer component that mounts the devtool over the running example app and tears it down again on close. Building the example surfaced that `rxdb/plugins/devtool` imported its own option and handle types without re-exporting them, so consumers could not type against the plugin entry point. They are re-exported now. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
pubkey
force-pushed
the
claude/db-viewer-design-rxdb-oq9mbb
branch
from
September 1, 2026 08:02
5ab27ce to
5d03f83
Compare
Owner
Author
|
What fails The testcafe run never gets past its first selector: That is a 30s selector timeout, not an assertion mismatch. The example app never renders at all. Why it is not this PR This branch changes no file under Verified rather than inferred. I built rxdb from a clean Identical failure with none of this PR's code in the bundle. The app throws The timeline also lines up: Repro without this branch git worktree add /tmp/rxdb-master origin/master
cd /tmp/rxdb-master && npm install && npm run build
npx yarn pack . --filename /tmp/rxdb-master.tgz
cd <rxdb>/examples/react
cp /tmp/rxdb-master.tgz ./rxdb-local.tgz
rm -rf node_modules/rxdb && npm i --legacy-peer-deps && npm run build
# serve build/ and open it: the page is blank and the console shows
# "TypeError: a is not a constructor"Status I did not fix it here, because it is a master regression unrelated to the devtool and fixing it in this PR would mix two unrelated changes. I also could not re-run the job: Everything else on this PR is green, and I am still watching it. Generated by Claude Code |
Owner
Author
|
Correcting my previous comment: I said "everything else on this PR is green", and that was wrong.
What happens The job ran from 08:02:42 to 08:32:44, exactly 30 minutes, so it hit What I checked I ran the same clean-master experiment as before: rxdb built from Unlike the react example, the vue app renders fine: No What I did not establish I could not reproduce the 30 minute hang locally, because it needs the CI harness (xvfb, the pouchdb sync server, testcafe against a real Chrome). So I cannot say from direct evidence whether the vue timeout is a pre-existing master problem or a flake. What I can say: this branch changes no file under Still watching the PR. Generated by Claude Code |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR contains:
devtoolplugin)Describe the problem you have without this PR
There is no way to look at the data of a running RxDatabase. Debugging means
console.loging query results, and there is nothing that shows which index a query used, what replication actually sent, or what a write changed.This adds
rxdb/plugins/devtool, a database viewer and editor implemented from the design handoff for the RxDB devtool. It is framework free, built with plain DOM, and the stylesheet plus every glyph ship inside the plugin, so there are no external assets and no font files.Chrome and navigation
⌘Kcommand palette, Refresh and help. The RxDB wordmark is dropped on the TanStack surface, and the embedded surface gains drag, dock and fullscreen controls.●running,○idle,▲error,■stopped) and the tools.Panels
upsert()in a WILL RUN block, with the changed lines highlighted, before Apply runs anything.$regexscans and in-memory re-sorts.How the data is real
Writes come from
database.$. Pull and push come fromreceived$andsent$on the states inREPLICATION_STATE_BY_COLLECTION. Reads and live query re-emits are derived from the query cache (_execOverDatabaseCountand result identity), because RxDB emits no read events; those two counters therefore update once per second, which the docs state. Tombstones are counted below the RxCollection viastorageInstance.count(), since RxQuery filters deleted documents out.Notes for review
mountRxDBDevtool()throws the new error codeDVT1when there is no DOM.RxDatabase.mountDevtool()is added as apluginMissingstub, matchingregisterWebMCP().isLeader()is read behind a try/catch, because it throws when the leader-election plugin is not added. The Instances panel reports leadership as unknown in that case rather than claiming a roster RxDB does not publish.↑ ↓for replication while the Replication and Changes panels colour each direction separately, and RxDB pink stays in the chrome and selection only, never on an edge, glyph or rate.Todos
Verification
npm run lintclean.npx tsc --noEmitclean forsrc/.test/unit/devtool.test.ts: 16 passing, covering the rolling metrics window, selector parsing with caret position, path get/set, cell input parsing, the document diff, the design tokens, and the no-DOM error.Generated by Claude Code