fix(webapp): Evict legacy resizable-panel localStorage on client boot#3564
fix(webapp): Evict legacy resizable-panel localStorage on client boot#3564samejr wants to merge 2 commits into
Conversation
|
WalkthroughThis PR introduces a pre-hydration cleanup mechanism to remove accumulated legacy localStorage keys used by the resizable panel library. A new Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/webapp/app/clientBeforeFirstRender.ts (1)
20-38: 💤 Low valueConsider a more precise pattern to match legacy keys.
The current
startsWith("panel-group-react-aria")check will match any key beginning with that prefix. According to the PR description, legacy keys follow the specific patternpanel-group-react-aria<n>-:<rid>:(with a digit after the prefix and colon delimiters). While your testing confirmed that current entries are preserved, a more precise regex like/^panel-group-react-aria\d+-:/would defensively guard against accidentally removing a future autosaveId that happens to start with the same prefix.🛡️ More defensive pattern matching
function cleanupLegacyResizablePanelStorage() { try { const toRemove: string[] = []; for (let i = 0; i < window.localStorage.length; i++) { const key = window.localStorage.key(i); if ( key && - (key.startsWith("panel-group-react-aria") || key === "panel-run-parent-v2") + (/^panel-group-react-aria\d+-:/.test(key) || key === "panel-run-parent-v2") ) { toRemove.push(key); } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/webapp/app/clientBeforeFirstRender.ts` around lines 20 - 38, The key-matching in cleanupLegacyResizablePanelStorage is too broad (uses key.startsWith("panel-group-react-aria")); narrow it to the legacy pattern by testing keys with a stricter regex (e.g., /^panel-group-react-aria\d+-:/) before adding them to toRemove so only keys like panel-group-react-aria<n>-:<rid>: are removed; update the check in cleanupLegacyResizablePanelStorage to use this regex test instead of startsWith while keeping the existing fallback for "panel-run-parent-v2" and the try/catch behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/webapp/app/clientBeforeFirstRender.ts`:
- Around line 20-38: The key-matching in cleanupLegacyResizablePanelStorage is
too broad (uses key.startsWith("panel-group-react-aria")); narrow it to the
legacy pattern by testing keys with a stricter regex (e.g.,
/^panel-group-react-aria\d+-:/) before adding them to toRemove so only keys like
panel-group-react-aria<n>-:<rid>: are removed; update the check in
cleanupLegacyResizablePanelStorage to use this regex test instead of startsWith
while keeping the existing fallback for "panel-run-parent-v2" and the try/catch
behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: a29cfc4d-9df0-41e5-a739-cbadacf1126a
📒 Files selected for processing (2)
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (2, 8)
- GitHub Check: units / packages / 🧪 Unit Tests: Packages (1, 1)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: typecheck / typecheck
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Use types over interfaces for TypeScript
Avoid using enums; prefer string unions or const objects instead
Files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
{packages/core,apps/webapp}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use zod for validation in packages/core and apps/webapp
Files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/otel-metrics.mdc)
**/*.ts: When creating or editing OTEL metrics (counters, histograms, gauges), ensure metric attributes have low cardinality by using only enums, booleans, bounded error codes, or bounded shard IDs
Do not use high-cardinality attributes in OTEL metrics such as UUIDs/IDs (envId, userId, runId, projectId, organizationId), unbounded integers (itemCount, batchSize, retryCount), timestamps (createdAt, startTime), or free-form strings (errorMessage, taskName, queueName)
When exporting OTEL metrics via OTLP to Prometheus, be aware that the exporter automatically adds unit suffixes to metric names (e.g., 'my_duration_ms' becomes 'my_duration_ms_milliseconds', 'my_counter' becomes 'my_counter_total'). Account for these transformations when writing Grafana dashboards or Prometheus queries
Files:
apps/webapp/app/clientBeforeFirstRender.ts
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: Access environment variables through theenvexport ofenv.server.tsinstead of directly accessingprocess.env
Use subpath exports from@trigger.dev/corepackage instead of importing from the root@trigger.dev/corepathUse named constants for sentinel/placeholder values (e.g.
const UNSET_VALUE = '__unset__') instead of raw string literals scattered across comparisons
Files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
{apps,internal-packages}/**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
pnpm run typecheckto verify changes in apps and internal packages (apps/*,internal-packages/*) instead ofbuild, which proves almost nothing about correctness
Files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
{package.json,**/*.{ts,tsx,js}}
📄 CodeRabbit inference engine (CLAUDE.md)
Pin Zod to version 3.25.76 exactly across the entire monorepo - never use a different version or version range
Files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js}: Import from@trigger.dev/coreusing subpaths only, never the root export
Always import tasks from@trigger.dev/sdk, never from@trigger.dev/sdk/v3or deprecatedclient.defineJob
Add crumbs to code using//@Crumbscomments or `// `#region` `@crumbsblocks for debug tracing during development
Files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
**/*.{ts,tsx,js,jsx,json,md,css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Code formatting is enforced using Prettier. Run
pnpm run formatbefore committing
Files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
apps/webapp/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (apps/webapp/CLAUDE.md)
Only use
useCallback/useMemofor context provider values, expensive derived data that is a dependency elsewhere, or stable refs required by a dependency array. Don't wrap ordinary event handlers or trivial computations
Files:
apps/webapp/app/entry.client.tsx
🧠 Learnings (4)
📚 Learning: 2026-03-22T13:26:12.060Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3244
File: apps/webapp/app/components/code/TextEditor.tsx:81-86
Timestamp: 2026-03-22T13:26:12.060Z
Learning: In the triggerdotdev/trigger.dev codebase, do not flag `navigator.clipboard.writeText(...)` calls for `missing-await`/`unhandled-promise` issues. These clipboard writes are intentionally invoked without `await` and without `catch` handlers across the project; keep that behavior consistent when reviewing TypeScript/TSX files (e.g., usages like in `apps/webapp/app/components/code/TextEditor.tsx`).
Applied to files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
📚 Learning: 2026-03-22T19:24:14.403Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3187
File: apps/webapp/app/v3/services/alerts/deliverErrorGroupAlert.server.ts:200-204
Timestamp: 2026-03-22T19:24:14.403Z
Learning: In the triggerdotdev/trigger.dev codebase, webhook URLs are not expected to contain embedded credentials/secrets (e.g., fields like `ProjectAlertWebhookProperties` should only hold credential-free webhook endpoints). During code review, if you see logging or inclusion of raw webhook URLs in error messages, do not automatically treat it as a credential-leak/secrets-in-logs issue by default—first verify the URL does not contain embedded credentials (for example, no username/password in the URL, no obvious secret/token query params or fragments). If the URL is credential-free per this project’s conventions, allow the logging.
Applied to files:
apps/webapp/app/clientBeforeFirstRender.tsapps/webapp/app/entry.client.tsx
📚 Learning: 2026-02-11T16:37:32.429Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.
Applied to files:
apps/webapp/app/entry.client.tsx
📚 Learning: 2026-05-08T21:00:20.973Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 3538
File: apps/webapp/app/components/primitives/Resizable.tsx:60-78
Timestamp: 2026-05-08T21:00:20.973Z
Learning: In the triggerdotdev/trigger.dev codebase, treat Zod as a boundary validation tool (API handlers, request/response validation, and storage/DB read/write validation), not as inline render-time validation inside React components/primitive UI code. For render-time guards, prefer small manual type-narrowing checks (e.g., a short predicate like ~10–20 lines) over importing Zod into UI primitives, to avoid per-render schema-parse overhead and unnecessary abstraction. Use the manual guard approach unless you truly need schema validation at a boundary; only then introduce Zod.
Applied to files:
apps/webapp/app/entry.client.tsx
🔇 Additional comments (2)
apps/webapp/app/clientBeforeFirstRender.ts (1)
5-7: LGTM!apps/webapp/app/entry.client.tsx (1)
3-3: LGTM!Also applies to: 7-8
2 participants
Summary
QuotaExceededError: Failed to execute 'setItem' on 'Storage'when navigating runs, because their localStorage is full of orphanedpanel-group-react-aria<n>-:<rid>:entries.setItemcalls (the run-view inspector can no longer persist its layout, and the page crashes mid-render).Root cause (already fixed, for context)
In v0.4.1 of the underlying library,
PanelGroupImpldefaultedautosaveStrategyto"localStorage"unconditionally — so everyPanelGroupwrote to localStorage on every autosave trigger, including the four inQueryEditor, the one inReplayRunDialog, the storybook routes, etc. Without anautosaveId, the key fell back topanel-group-${useId()}, and React Aria'suseId()produces a new session-unique prefix each visit. Result: entries accumulated without bound across sessions.The condition was introduced when #3282 removed the wrapper's explicit
autosaveStrategy="cookie"override (to fix HTTP 431 cookie-size errors). That worked, but the library default that took over silently caused this leak.The v1.1.3 upgrade in the resizable-panel PR changed the default to
autosaveStrategy = autosaveId ? "localStorage" : undefined, so no new entries are being written. Existing residue still needs to be removed from users' browsers.Changes
apps/webapp/app/clientBeforeFirstRender.ts— exports aclientBeforeFirstRender()function that runs synchronously, before React hydrates. Encapsulates a small cleanup helper that scanslocalStorageand removes:panel-group-react-aria(the legacy auto-generated keys).panel-run-parent-v2key from before the autosaveId v2→v3 bump.apps/webapp/app/entry.client.tsx— imports and invokesclientBeforeFirstRender()once, beforehydrateRoot(). This guarantees the cleanup completes before anyResizablePanelGroupmounts and tries to write.The cleanup is wrapped in
try/catchso private-browsing / disabled-storage scenarios fail silently. Idempotent: subsequent loads find no matching keys and exit immediately.Test plan
panel-group-react-aria…entries plus apanel-run-parent-v2entry via DevTools console, hard reload → legacy entries gone, real entries (panel-run-parent-v3,panel-run-tree) preserved.panel-run-parent-v3-but-different-suffix) — confirmed not over-matched.Storage.setItemthrowing — page still renders, cleanup swallows the error.Notes
QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'panel-run-parent-v3' exceeded the quota.