chore: enforce exhaustive React hook dependencies - #4712
Conversation
|
WalkthroughThe pull request enables Merge Risk: 🟡 Moderate · up to The PR changes hook dependency and lifecycle behavior across realtime streams and dashboard components. Current-head issues could leave callbacks stale, miss completion notifications for later runs, or display outdated tree and list state after prop changes or unmounts, so these concerns should be fixed or explicitly accepted before merge. 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches 💡 1📝 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
packages/react-hooks/src/hooks/useRealtime.ts (2)
166-192: 🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy liftReset completion tracking when the requested run changes.
When a caller changes
runIdwithout changingoptions.id, both hooks retainhasCalledOnCompleteRef.currentfrom the prior completed run. The next run then cannot callonComplete. The SWR completion and run state also use keys that omitrunId, so stale completion state can remain visible.Scope this state by
runId, or clear the completion ref and cached completion state before starting a replacement subscription.
packages/react-hooks/src/hooks/useRealtime.ts#L166-L192: Reset or key completion tracking for the newrunId.packages/react-hooks/src/hooks/useRealtime.ts#L347-L373: Apply the same completion-state handling for streamed runs.
858-923: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winStore
onDatain a latest-value ref.The active
processRealtimeStreamcall retains theonDatacallback passed at request start. Later parts invoke the old callback whenoptions.onDatachanges. Use a stable delegating callback backed by a latest-value ref.apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx (1)
333-352: 📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy liftAdd breadcrumb instrumentation for the changed lifecycle paths.
Add
//@Crumbsmarkers or `// `#region` `@crumbsblocks before merge.
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx#L333-L352: instrument errors-path query propagation.apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx#L1969-L1972: instrument search-filter updates.apps/webapp/app/routes/admin.feature-flags.tsx#L176-L187: instrument editable-flag state synchronization.apps/webapp/app/routes/admin.queue-metrics.tsx#L60-L84: instrument save-response processing and revalidation.apps/webapp/app/routes/resources.metric.tsx#L205-L296: instrument visibility, submission, and reload transitions.apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx#L234-L240: instrument span-detail loads.apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route.tsx#L324-L339: instrument manual waitpoint completion.apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx#L61-L84: instrument generated-cron submission and completion.apps/webapp/app/routes/resources.platform-changelogs.tsx#L45-L67: instrument changelog polling.apps/webapp/app/routes/resources.platform-notifications.tsx#L44-L62: instrument notification polling.As per coding guidelines, “Add crumbs as you write code” and mark lines with
//@Crumbsor `// `#region` `@crumbs.Source: Coding guidelines
🧹 Nitpick comments (6)
packages/react-hooks/src/hooks/useRealtime.ts (1)
19-29: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd crumb markers for the lifecycle changes.
Mark the new request wrapper and changed subscription lifecycle blocks with
//@Crumbsor `// `#region` `@crumbs.As per coding guidelines, “Add crumbs as you write code — not just when debugging.”
Source: Coding guidelines
apps/webapp/app/components/primitives/DateTime.tsx (1)
246-266: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove the trivial parsing memoization.
new Date(...)conversion is not expensive derived data. DeriverealDateandrealPrevDatedirectly. Make the formatting memo depend ondateandpreviousDate.As per coding guidelines, “Use
useCallbackanduseMemoonly for context provider values, expensive derived data used as a dependency, or stable references required by dependency arrays.”Proposed change
- const realDate = useMemo(() => (typeof date === "string" ? new Date(date) : date), [date]); - const realPrevDate = useMemo( - () => - previousDate - ? typeof previousDate === "string" - ? new Date(previousDate) - : previousDate - : null, - [previousDate] - ); + const realDate = typeof date === "string" ? new Date(date) : date; + const realPrevDate = + previousDate === null || previousDate === undefined + ? null + : typeof previousDate === "string" + ? new Date(previousDate) + : previousDate; @@ - }, [realDate, realPrevDate, displayTimeZone, locales, hour12, hideDate]); + }, [date, previousDate, displayTimeZone, locales, hour12, hideDate]);Source: Coding guidelines
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx (1)
508-521: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse regular functions for these ordinary event handlers.
Both callbacks are passed directly to
Switch. They are not context values or dependency-stable callbacks.
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx#L508-L521: replacehandleArchivedChangewith a regular function.apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev-branches/route.tsx#L314-L327: replacehandleArchivedChangewith a regular function.As per coding guidelines: “Use
useCallbackanduseMemoonly for context provider values, expensive derived data used as a dependency, or stable references required by dependency arrays; do not wrap ordinary event handlers or trivial computations.” Based on learnings: the same repository rule applies to these routes.Sources: Coding guidelines, Learnings
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx (1)
571-572: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCompute
errorPathdirectly during render.
errorPathis a small string calculation. It is not used as a dependency and does not justifyuseMemo. Keeplocation.searchin the calculation so query changes update the link, but remove the memoization wrapper and dependency list.As per coding guidelines: “Use
useCallbackanduseMemoonly for context provider values, expensive derived data used as a dependency, or stable references required by dependency arrays; do not wrap ordinary event handlers or trivial computations.” Based on learnings: the same repository rule applies to this route.Also applies to: 591-591
Sources: Coding guidelines, Learnings
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx (1)
310-334: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove
useCallbackfromhandleOpenVercelModal.This callback is an ordinary event handler.
VercelSettingsPaneldoes not require a stable reference. Use a function declaration instead.As per coding guidelines, “Use
useCallbackanduseMemoonly for context provider values, expensive derived data used as a dependency, or stable references required by dependency arrays; do not wrap ordinary event handlers or trivial computations.”Source: Coding guidelines
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx (1)
798-805: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove
useMemofromsortedSchedules.The loader limits this list to 25 schedules.
sortedSchedulesis only used during rendering. Calculate it directly during render.As per coding guidelines, “Use
useCallbackanduseMemoonly for context provider values, expensive derived data used as a dependency, or stable references required by dependency arrays; do not wrap ordinary event handlers or trivial computations.”Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 041906fd-2d48-4bd2-babd-1b388deddef8
📒 Files selected for processing (72)
.oxlintrc.jsonapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/components/AskAI.tsxapps/webapp/app/components/DevPresence.tsxapps/webapp/app/components/Feedback.tsxapps/webapp/app/components/admin/FeatureFlagsDialog.tsxapps/webapp/app/components/admin/debugRun.tsxapps/webapp/app/components/code/AIQueryInput.tsxapps/webapp/app/components/dashboard-agent/DashboardAgent.tsxapps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsxapps/webapp/app/components/integrations/VercelOnboardingModal.tsxapps/webapp/app/components/navigation/NotificationPanel.tsxapps/webapp/app/components/navigation/useReorderableList.tsapps/webapp/app/components/primitives/AgentDotMatrix.tsxapps/webapp/app/components/primitives/AnimatedNumber.tsxapps/webapp/app/components/primitives/Checkbox.tsxapps/webapp/app/components/primitives/DateField.tsxapps/webapp/app/components/primitives/DateTime.tsxapps/webapp/app/components/primitives/DurationPicker.tsxapps/webapp/app/components/primitives/LoadingBarDivider.tsxapps/webapp/app/components/primitives/Select.tsxapps/webapp/app/components/primitives/Timeline.tsxapps/webapp/app/components/primitives/TreeView/TreeView.tsxapps/webapp/app/components/query/QueryEditor.tsxapps/webapp/app/components/runs/v3/AIFilterInput.tsxapps/webapp/app/components/runs/v3/LiveTimer.tsxapps/webapp/app/components/runs/v3/ReplayRunDialog.tsxapps/webapp/app/components/runs/v3/RunFilters.tsxapps/webapp/app/components/runs/v3/SharedFilters.tsxapps/webapp/app/components/runs/v3/TaskRunsList.tsxapps/webapp/app/components/runs/v3/TaskRunsTable.tsxapps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsxapps/webapp/app/components/runs/v3/ai/AIChatMessages.tsxapps/webapp/app/components/webhookConsole/SampleSourcePicker.tsxapps/webapp/app/hooks/useAutoRevalidate.tsapps/webapp/app/hooks/useChanged.tsapps/webapp/app/hooks/useDashboardEditor.tsapps/webapp/app/hooks/useFuzzyFilter.tsapps/webapp/app/hooks/usePostHog.tsapps/webapp/app/hooks/useReplaceSearchParams.tsapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev-branches/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/AIPayloadTabContent.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsxapps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test/route.tsxapps/webapp/app/routes/admin.feature-flags.tsxapps/webapp/app/routes/admin.queue-metrics.tsxapps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route.tsxapps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsxapps/webapp/app/routes/storybook.ai-agent/route.tsxapps/webapp/app/routes/storybook.filter/route.tsxapps/webapp/app/routes/storybook.select/route.tsxpackages/react-hooks/src/hooks/useRealtime.ts
Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/webapp/app/assets/icons/AnimatedHourglassIcon.tsx (1)
13-27: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winAdd a crumb marker to the new animation lifecycle path.
Add
//@crumbs`` nearinitialDelayor around this effect. The coding guidelines require crumbs as code is written.As per coding guidelines: “Add crumbs as you write code — not just when debugging.”
Source: Coding guidelines
apps/webapp/app/routes/resources.incidents.tsx (1)
45-70: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winAdd crumbs for the lifecycle changes.
Add
//@Crumbsmarkers or `// `#region` `@crumbsblocks before merge.
apps/webapp/app/routes/resources.incidents.tsx#L45-L70: mark the initial-load and polling lifecycle changes.apps/webapp/app/routes/resources.metric.tsx#L205-L283: mark the visibility submission and reload lifecycle changes.apps/webapp/app/routes/resources.platform-changelogs.tsx#L46-L70: mark the URL loading and polling changes.apps/webapp/app/routes/resources.platform-notifications.tsx#L45-L65: mark the URL loading and polling changes.As per coding guidelines, “Add crumbs as you write code” and retain them until
agentcrumbs stripruns.Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 41f53755-8800-4509-8c41-af75e85323a5
📒 Files selected for processing (5)
apps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: Analyze (javascript-typescript)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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
**/*.{ts,tsx}: Prefer static imports over dynamic imports. Only use dynamicimport()when:
- Circular dependencies cannot be resolved otherwise
- Code splitting is genuinely needed for performance
- The module must be loaded conditionally at runtime
Files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.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/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
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/corepath
Files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
apps/webapp/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/webapp/CLAUDE.md)
apps/webapp/app/**/*.{ts,tsx}: For dashboard changes, visually verify the running Remix app with Chrome DevTools MCP, using snapshots, screenshots, interaction, and console-message checks as appropriate.
UseuseCallbackanduseMemoonly for context provider values, expensive derived data used as a dependency, or stable references required by dependency arrays; do not wrap ordinary event handlers or trivial computations.
Use named constants for sentinel or placeholder values instead of scattering raw string literals across comparisons.
Files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
**/*
📄 CodeRabbit inference engine (AGENTS.md)
**/*: Add crumbs as you write code — not just when debugging. Mark lines with
//@Crumbsor wrap blocks in `// `#region` `@crumbs. They stay on the
branch throughout development and are stripped byagentcrumbs strip
before merge.
Do not invent new namespaces — pick from this table or ask first.
Do not flag//@Crumbsmarkers, `#region `@crumbsblocks, or agentcrumbs
imports in reviews. These are temporary debug instrumentation stripped
before merge. Data logged in crumbs (IDs, names, values) never reaches
production.
Files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
🧠 Learnings (17)
📚 Learning: 2026-02-03T18:27:40.429Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 2994
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx:553-555
Timestamp: 2026-02-03T18:27:40.429Z
Learning: In apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx, the menu buttons (e.g., Edit with PencilSquareIcon) in the TableCellMenu are intentionally icon-only with no text labels as a compact UI pattern. This is a deliberate design choice for this route; preserve the icon-only behavior for consistency in this file.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-07-22T11:16:06.546Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 4332
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx:166-168
Timestamp: 2026-07-22T11:16:06.546Z
Learning: In the Trigger.dev web app, copy-interaction accessibility (keyboard and touch behavior for the copy affordance) is owned by the shared `CopyableText` `icon-right` primitive. When reviewing route-level code (e.g., admin debug panels and runs tables) that intentionally reuses this pattern, avoid suggesting divergent call-site-only accessibility fixes; instead, route any accessibility changes back to a holistic update of the `CopyableText` `icon-right` implementation so all reuse sites benefit consistently.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.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/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-07-28T21:57:20.061Z
Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 4411
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx:818-843
Timestamp: 2026-07-28T21:57:20.061Z
Learning: When using Radix UI `DialogClose` with `asChild` (e.g., Trigger.dev dashboard components), note that it injects `type="button"` into its child via `Slot`. If the child is a local `Button` that forwards its `type` prop to the native `<button>`, then placing it inside a `<form>` will *not* submit unless you explicitly set `type="submit"` (or otherwise override the injected type / wire up submission behavior). Review form actions to ensure the intended submit vs non-submit behavior is preserved.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 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/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.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/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-05-18T08:21:27.694Z
Learnt from: d-cs
Repo: triggerdotdev/trigger.dev PR: 3632
File: apps/webapp/sentry.server.ts:4-21
Timestamp: 2026-05-18T08:21:27.694Z
Learning: When handling Prisma error P1001 ("Can't reach database server") in TypeScript, don’t assume a single error shape. Prisma can surface P1001 via two different error classes/fields: `PrismaClientKnownRequestError` exposes it as `err.code === "P1001"` (common during mid-query connection drops), while `PrismaClientInitializationError` exposes it as `err.errorCode === "P1001"` (common on client startup failure). Therefore, predicates should use `err.code === "P1001" || err.errorCode === "P1001"`. Do not flag `err.code === "P1001"` as “unreachable/never matches,” as it is expected in production.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-05-18T08:21:27.694Z
Learnt from: d-cs
Repo: triggerdotdev/trigger.dev PR: 3632
File: apps/webapp/sentry.server.ts:4-21
Timestamp: 2026-05-18T08:21:27.694Z
Learning: When handling Prisma errors for P1001 ("Can't reach database server"), do not assume it only appears under a single property name. Prisma may surface P1001 via either `PrismaClientKnownRequestError` (`err.code === "P1001"`, e.g., mid-query connection drops) or `PrismaClientInitializationError` (`err.errorCode === "P1001"`, e.g., client startup connection failure). To reliably detect the condition, check `err.code === "P1001" || err.errorCode === "P1001"`, and avoid review rules that would incorrectly flag `err.code === "P1001"` as unreachable/never-matching.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-06-13T19:53:13.759Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3937
File: packages/trigger-sdk/skills/realtime-and-frontend/SKILL.md:258-260
Timestamp: 2026-06-13T19:53:13.759Z
Learning: When reviewing code that uses `trigger.dev/react-hooks`’s `useRealtimeRun`, preserve the call signature where the first argument is the full realtime handle object (not `handle.id`). This is intentional to maintain type-safety and is consistent with the official docs; do not suggest changing the first argument from the handle object to `handle.id`.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-06-17T17:13:49.929Z
Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3948
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx:48-62
Timestamp: 2026-06-17T17:13:49.929Z
Learning: In triggerdotdev/trigger.dev, within `dashboardLoader`/`dashboardAction` (or similar context resolver code) whenever you resolve an organization ID from an organization slug for RBAC/enterprise authorization scope, always read from the primary Prisma client (`prisma`), not `$replica`. Using `$replica` can hit replica-lag and cause the RBAC lookup/authorization to run without the correct org scope (bypassing intended role enforcement). Implement the slug→org lookup with `prisma.organization.findFirst(...)` (or equivalent primary-client query) and add an inline comment documenting why the primary client is required (replica lag could lead to unscoped RBAC checks).
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-06-23T13:04:21.413Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4023
File: apps/webapp/app/services/upsertBranch.server.ts:14-18
Timestamp: 2026-06-23T13:04:21.413Z
Learning: In TypeScript, it’s valid to `import { type X }` and then use `typeof X` in a type-only position, e.g. `type Alias = z.infer<typeof X>`. The `type` modifier suppresses the runtime import, but the type checker still has the full exported type so `z.infer<typeof X>` can resolve correctly. In code reviews, don’t flag this as a TypeScript compile error as long as `typeof X` is used in a type context (e.g., with `z.infer`, `type` aliases, generics), not as a runtime value.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.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/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-06-25T18:21:55.847Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/invite-resend.tsx:0-0
Timestamp: 2026-06-25T18:21:55.847Z
Learning: In the triggerdotdev/trigger.dev Zod 4 migration, avoid importing from the root package `conform-to/zod` in webapp code. It can resolve to the Zod 3 build and may crash at module load under Zod 4. When reviewing TypeScript/TSX files in `apps/webapp`, prefer importing from the Zod 4 subpath `conform-to/zod/v4` for Zod 4-compatible schemas/types.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-05-12T21:04:05.815Z
Learnt from: ericallam
Repo: triggerdotdev/trigger.dev PR: 3542
File: apps/webapp/app/components/sessions/v1/SessionStatus.tsx:1-3
Timestamp: 2026-05-12T21:04:05.815Z
Learning: In this Remix + TypeScript codebase, do not flag a server/client boundary violation when a file imports only types from a module matching `*.server`.
Specifically, it’s safe to import types using `import type { Foo } from "*.server"` or `import { type Foo } from "*.server"` because TypeScript erases type-only imports at compile time and they emit no JavaScript, so they won’t cross the Remix server/client bundle boundary.
Only raise the boundary concern for value imports (e.g., `import { Foo }` without `type`, or `import Foo`), since those produce JavaScript output.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-06-25T18:21:51.905Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/invite-revoke.tsx:0-0
Timestamp: 2026-06-25T18:21:51.905Z
Learning: During the Zod v4 migration in the triggerdotdev/trigger.dev webapp, ensure any imports from `conform-to/zod` use the Zod-4 subpath: `conform-to/zod/v4` (e.g., `import { parseWithZod } from "conform-to/zod/v4"`). Do not import from the package root `conform-to/zod`, because it is the Zod 3 implementation and may load Zod-3-only symbols (e.g., `ZodBranded`, `ZodEffects`), which can throw at module load (notably with `zod4.4.3`). This should be enforced across `apps/webapp/**/*` where helpers like `parseWithZod` and `conformZodMessage` are used.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-07-03T17:10:21.498Z
Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 4148
File: apps/webapp/app/models/orgMember.server.ts:149-168
Timestamp: 2026-07-03T17:10:21.498Z
Learning: In triggerdotdev/trigger.dev, `User.email` (Prisma schema: `internal-packages/database/prisma/schema.prisma`) currently does NOT use `citext` and does NOT have a `lower(email)` functional unique index. Therefore, do not introduce Prisma queries like `where: { email: { equals: <value>, mode: "insensitive" } }` (or any case-insensitive lookup) against `User.email`, because it can force sequential scans of the `users` table under load. During review, ensure email is normalized (e.g., lowercased/trimmed) before both writes and subsequent lookups, and if true case-insensitive behavior/uniqueness is required, implement it via a separate app-wide migration (e.g., switch to `citext` and/or add a functional unique index with backfill) rather than bolting it onto individual feature PRs.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
📚 Learning: 2026-06-25T18:21:54.729Z
Learnt from: carderne
Repo: triggerdotdev/trigger.dev PR: 4039
File: apps/webapp/app/routes/confirm-basic-details.tsx:0-0
Timestamp: 2026-06-25T18:21:54.729Z
Learning: For Remix + TypeScript files that use Conform v1 (conform-to/react) and its getInputProps helper, when you intend to suppress the helper-provided default value for non-checkbox/non-radio inputs (e.g., hidden inputs managed via an explicit value prop), use the Conform v1 option key `value: false`. Do not recommend `defaultValue: false` here, because `defaultValue` is not a valid option key for these input types in Conform v1 typings.
Applied to files:
apps/webapp/app/routes/resources.incidents.tsxapps/webapp/app/assets/icons/AnimatedHourglassIcon.tsxapps/webapp/app/routes/resources.metric.tsxapps/webapp/app/routes/resources.platform-changelogs.tsxapps/webapp/app/routes/resources.platform-notifications.tsx
🔇 Additional comments (1)
apps/webapp/app/assets/icons/AnimatedHourglassIcon.tsx (1)
3-3: LGTM!
| // Fire onSelectedIdChanged() only when selection changes, not when the callback is recreated. | ||
| useEffect(() => { | ||
| if (tree.length !== previousNodeCount.current) { | ||
| previousNodeCount.current = tree.length; | ||
| dispatch({ type: "UPDATE_TREE", payload: { tree } }); | ||
| if (currentSelectedId !== previousSelectedId.current) { | ||
| previousSelectedId.current = currentSelectedId; | ||
| onSelectedIdChangedRef.current?.(currentSelectedId); | ||
| } | ||
| }, [previousNodeCount.current, tree.length]); | ||
| }, [currentSelectedId]); |
There was a problem hiding this comment.
🔍 onSelectedIdChanged can now fire for selection changes that don't come from an explicit select action
The notification effect moved from keying on state.changes.selectedId to keying on selectedIdFromState(state.nodes) recomputed every render. This means selection changes produced indirectly — e.g. UPDATE_TREE or UPDATE_FILTER dropping the previously selected node — will now propagate to onSelectedIdChanged, where previously they may not have. In the runs page this callback drives navigation (.../runs.$runParam/route.tsx:949), so filtering out the currently selected span could now trigger a URL change. Probably desirable, but worth confirming against the filter/live-reload flow.
Was this helpful? React with 👍 or 👎 to provide feedback.
| useEffect(() => { | ||
| animate( | ||
| const controls = animate( | ||
| [ | ||
| [scope.current, { rotate: 0 }, { duration: 0.7 }], | ||
| [scope.current, { rotate: 180 }, { duration: 0.3 }], | ||
| [scope.current, { rotate: 180 }, { duration: 0.7 }], | ||
| [scope.current, { rotate: 360 }, { duration: 0.3 }], | ||
| ], | ||
| { repeat: Infinity, delay } | ||
| { repeat: Infinity, delay: initialDelay.current } | ||
| ); | ||
| }, []); | ||
|
|
||
| return () => controls.stop(); | ||
| }, [animate, scope]); |
There was a problem hiding this comment.
🔍 Animation delay is intentionally frozen to the first render's value
initialDelay = useRef(delay) plus deps [animate, scope] means later delay prop changes are ignored — which matches the previous [] deps behavior, so no regression. The added controls.stop() cleanup is a real improvement: the infinite repeat sequence was previously left running after unmount. Worth confirming animate from useAnimate is referentially stable in the installed framer-motion version, otherwise the animation would restart (and the icon jump) on each render.
Was this helpful? React with 👍 or 👎 to provide feedback.
2 participants
Summary
Enables exhaustive React Hook dependency checking and resolves the existing violations across the dashboard and React hooks package. Effects and callbacks now track current values without introducing request, subscription, or render loops.
Design
Dependencies are included directly when the hook lifecycle should follow them. Timers, Remix fetchers, and realtime subscriptions use stable callbacks or latest-value refs where restarting work would change behavior.
Unnecessary memoization was removed where ordinary derivation is clearer. Full lint and typechecks for the webapp and React hooks package pass.