Repository navigation
Fix: layout, bundle size, lazy loading and deps vulnerabilities - #83
Conversation
-added borders around all different sections of the dashboard - moved the `GroupByDropDown` component in the title of the pages
- added some manual chunks in the vite config to reduce the final bundle size of the main chunk - removed the `fly.toml` file since it is no longer required - bumped the extension version to `0.0.20` - styles improvement in the `skeleton` component
- fixed the errors in the api and updated the versions of many packages - removed the `package-lock.json` from the api and the extension - removed the pipe validator from the `main.ts` in the api since it is no longer used - bumped zod to v4 in the packages/common
- bumped zod to version 4.0.14 across the monorepo: in the apps: `dashboard` and `vscode-extension`
- reduced the number of dependencies vulnerabilities from 13 to 2
- fixed the remaining dependencies vulnerabilities in the monorepo
- split the build file in many chunks depending of the libraries; each chunk is less than 500kb
- renamed the visualizer filename in the `vite.config.ts` from "stats" to "deps" - removed the text size changes from the `CustomRangeDatesSelector` - made the `DashboardTitle` and `ProjectTitle` like paragraphs with a proper loading skeleton
- added a `ScrollToTop` button component in the `packages/ui` components and used it in the `Layout` of the dashboard - adjusted the skeleton background color in light mode
- reverted back to a simple manual chunking in the `vite.config.ts` - prevented the deps.html file to be copied in the bundle of the dashboard when packaging the extension
- made all the components using recharts lazy loaded to reduce the bundle size - added manual chunks for almost all libraries to reduce the bundle size
- fixed the layout issues of the skeleton when getting the time spent on the period, either globally or on a project
- fixed the display of the error boundaries on the root dashboard page and on the project page
- specifically defined a port to preview the dashboard when it is built and used it to configure the `vite.config.ts` and the `main.ts` in the api
WalkthroughThis change set primarily updates dependencies across multiple packages, introduces new utility functions and UI components, refactors and enhances dashboard and project page layouts, and improves configuration for build and deployment. Key updates include major dependency bumps (notably zod and NestJS), the addition of a scroll-to-top button, improved error formatting utilities, lazy loading of chart components, and enhanced build chunking and visualization. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dashboard
participant ChartComponent
participant ErrorBoundary
participant SuspenseBoundary
User->>Dashboard: Visits dashboard page
Dashboard->>SuspenseBoundary: Loads chart group (lazy)
SuspenseBoundary->>ChartComponent: Dynamically import chart
ChartComponent-->>SuspenseBoundary: Render chart or loading
ChartComponent-->>ErrorBoundary: If error, render fallback
ErrorBoundary-->>Dashboard: Show error UI if chart fails
sequenceDiagram
participant User
participant ScrollToTopButton
User->>ScrollToTopButton: Scrolls down page
ScrollToTopButton->>User: Button appears
User->>ScrollToTopButton: Clicks button
ScrollToTopButton->>User: Smoothly scrolls to top
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (6)
apps/dashboard/src/components/project-page/charts/ProjectLanguagesTimeOnPeriodChart.tsx (1)
84-85: Consistent responsive naming – same concern as PeriodLanguagesChartSee the comment in
PeriodLanguagesChart.tsx. Apply whichever decision (keep arbitrary, introduce alias, or revert tomax-small) uniformly across chart components to avoid drift.apps/dashboard/src/components/dashboard-page/GroupByDropDown.tsx (1)
35-37: Dropped absolute positioning – check collision with neighbouring controls
classNamenow:flex max-w-24 items-center gap-4👍 Simpler and less brittle, but the button no longer has an explicit width or positioning. On very long “Group by” labels (e.g., translations), text may overflow the
max-w-24constraint and shift sibling elements.Consider:
-className="flex max-w-24 items-center gap-4" +className="flex max-w-24 items-center gap-2 truncate"so text truncates gracefully instead of growing wider.
packages/ui/src/components/ScrollToTopButton.tsx (1)
33-33: Consider making scroll threshold configurable.The hardcoded 200px threshold could be made configurable for better reusability across different use cases.
-const ScrollToTopButton = () => { +const ScrollToTopButton = ({ threshold = 200 }: { threshold?: number } = {}) => { const [isVisible, setIsVisible] = useState(false); const handleScrollToTopButtonVisibility = () => { - setIsVisible(window.scrollY > 200); + setIsVisible(window.scrollY > threshold); };apps/dashboard/src/components/dashboard-page/DashboardTitle.tsx (1)
11-15: Consider using semantic HTML over ARIA roles for better accessibility.Replacing
<h1>with<div role="heading" aria-level={1}>reduces accessibility and SEO benefits. Semantic HTML elements like<h1>are more universally supported by screen readers and search engines.- <div - className="rounded-md border p-3 text-center text-2xl" - role="heading" - aria-level={1} - > + <h1 className="rounded-md border p-3 text-center text-2xl">packages/common/src/formatZodError.ts (1)
3-5: Add explicit return type for better type safety.The function correctly wraps zod's prettifyError method, which is a good approach for leveraging the library's native functionality.
-export const formatZodError = (error: ZodError) => { +export const formatZodError = (error: ZodError): string => { return z.prettifyError(error); };apps/api/tsconfig.json (1)
16-16: Consider target/lib version alignment.Using ES2022 lib features with ES6 target may cause runtime issues if ES2022 features are used that don't have ES6 equivalents. Consider updating target to match lib version or documenting this intentional choice.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
apps/api/package-lock.jsonis excluded by!**/package-lock.jsonapps/vscode-extension/package-lock.jsonis excluded by!**/package-lock.jsonpackage-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (37)
.npmrc(1 hunks)apps/api/package.json(1 hunks)apps/api/src/main.ts(1 hunks)apps/api/tsconfig.json(2 hunks)apps/dashboard/index.html(1 hunks)apps/dashboard/package.json(2 hunks)apps/dashboard/src/components/ChartGroupWrapper.tsx(1 hunks)apps/dashboard/src/components/CustomRangeDatesSelector.tsx(1 hunks)apps/dashboard/src/components/dashboard-page/Dashboard.tsx(1 hunks)apps/dashboard/src/components/dashboard-page/DashboardTitle.tsx(1 hunks)apps/dashboard/src/components/dashboard-page/GroupByDropDown.tsx(1 hunks)apps/dashboard/src/components/dashboard-page/TimeSpentOnPeriod.tsx(1 hunks)apps/dashboard/src/components/dashboard-page/charts/PeriodLanguagesChart.tsx(1 hunks)apps/dashboard/src/components/dashboard-page/charts/PeriodTimeChart.tsx(0 hunks)apps/dashboard/src/components/layout/Layout.tsx(2 hunks)apps/dashboard/src/components/project-page/Project.tsx(2 hunks)apps/dashboard/src/components/project-page/ProjectTitle.tsx(1 hunks)apps/dashboard/src/components/project-page/TimeSpentOnProject.tsx(1 hunks)apps/dashboard/src/components/project-page/charts/CircularPacking.tsx(1 hunks)apps/dashboard/src/components/project-page/charts/ProjectLanguagesTimeOnPeriodChart.tsx(1 hunks)apps/dashboard/src/components/project-page/charts/ProjectTimeOnPeriodChart.tsx(0 hunks)apps/dashboard/src/components/project-page/files-list/FilesList.tsx(1 hunks)apps/dashboard/src/utils/getPeriodStoreValuesFromURL.ts(1 hunks)apps/dashboard/vite.config.ts(2 hunks)apps/vscode-extension/README.md(1 hunks)apps/vscode-extension/build.js(1 hunks)apps/vscode-extension/package.json(3 hunks)apps/vscode-extension/src/utils/global-state/getGlobalStateData.ts(1 hunks)apps/web/package.json(1 hunks)fly.toml(0 hunks)package.json(1 hunks)packages/common/package.json(1 hunks)packages/common/src/constants.ts(1 hunks)packages/common/src/formatZodError.ts(1 hunks)packages/common/src/formatZodIssues.ts(0 hunks)packages/ui/src/components/ScrollToTopButton.tsx(1 hunks)packages/ui/src/components/ui/skeleton.tsx(1 hunks)
💤 Files with no reviewable changes (4)
- apps/dashboard/src/components/project-page/charts/ProjectTimeOnPeriodChart.tsx
- fly.toml
- apps/dashboard/src/components/dashboard-page/charts/PeriodTimeChart.tsx
- packages/common/src/formatZodIssues.ts
🧰 Additional context used
🧬 Code Graph Analysis (6)
apps/dashboard/src/components/layout/Layout.tsx (1)
packages/ui/src/lib/utils.ts (1)
cn(4-6)
packages/ui/src/components/ui/skeleton.tsx (1)
packages/ui/src/lib/utils.ts (1)
cn(4-6)
apps/dashboard/src/components/CustomRangeDatesSelector.tsx (1)
packages/ui/src/components/ui/button.tsx (1)
Button(27-27)
apps/api/src/main.ts (1)
packages/common/src/constants.ts (2)
DASHBOARD_PORT(9-9)DASHBOARD_PREVIEW_PORT(11-11)
apps/dashboard/vite.config.ts (1)
packages/common/src/constants.ts (2)
DASHBOARD_PORT(9-9)DASHBOARD_PREVIEW_PORT(11-11)
apps/dashboard/src/components/ChartGroupWrapper.tsx (1)
packages/ui/src/lib/utils.ts (1)
cn(4-6)
🪛 Biome (2.1.2)
apps/dashboard/src/components/project-page/Project.tsx
[error] 37-37: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🔇 Additional comments (46)
apps/dashboard/index.html (1)
11-11: LGTM! Root positioning setup for new UI components.The addition of
relativeclass to the root div appropriately supports absolute/fixed positioned components like the new ScrollToTopButton mentioned in the PR objectives.apps/dashboard/src/components/project-page/TimeSpentOnProject.tsx (1)
8-8: Improved text wrapping for better readability.Changing from
text-nowraptotext-wrapallows longer duration strings to wrap appropriately, improving the user experience when displaying time values.apps/dashboard/src/components/project-page/charts/CircularPacking.tsx (1)
45-58: Excellent UI and accessibility improvements.The enhanced control panel styling with fixed width, borders, and padding creates a cohesive design. The addition of dynamic accessibility attributes (
titleandaria-label) for both Play/Pause and Reset buttons significantly improves screen reader support, with the Play/Pause labels correctly reflecting the current animation state.apps/dashboard/src/components/layout/Layout.tsx (3)
5-5: Good addition of scroll-to-top functionality.The import of ScrollToTopButton aligns with the PR objectives for UI improvements and enhances user navigation experience.
22-22: Appropriate addition of loader identification.Adding
id="loader"to the main content wrapper provides proper element identification while maintaining existing loading state styling with thecnutility.
26-26: Well-positioned ScrollToTopButton component.The ScrollToTopButton is appropriately placed after the main content but before the Footer, ensuring it's available throughout the application navigation without interfering with existing layout structure.
apps/dashboard/src/components/dashboard-page/TimeSpentOnPeriod.tsx (1)
25-25: Good text styling improvement and cleanup.Replacing
cn("text-nowrap")with direct"text-pretty"className improves text readability and removes unnecessary complexity. The removal of the unusedcnimport is also good cleanup. This change aligns with similar text display improvements across other components.apps/dashboard/src/components/dashboard-page/charts/PeriodLanguagesChart.tsx (1)
93-94: Custom breakpointmax-[30rem]:hidden– verify Tailwind config & naming conventionArbitrary breakpoints are fine with the JIT compiler, but we now have at least three variants in the codebase (
max-small,max-chart, and thismax-[30rem]).
Before this proliferates, confirm that:
30rem(≈ 480 px) is the intended value across the design system, and- There is either a documented convention or a
theme.screensalias for this size.Otherwise the next refactor will be painful.
apps/dashboard/src/components/project-page/ProjectTitle.tsx (1)
6-7: Removal of small-screen font override – double-check readability
max-[25.625rem]:text-2xlis gone, so very narrow devices will now always rendertext-3xl.
If that was an intentional design decision, all good. If not, expect truncated titles or wrapping issues on ~410 px screens.packages/ui/src/components/ui/skeleton.tsx (1)
9-12: Good move to separate light/dark background tokensSwitching from a single
bg-primary/10todark:bg-accent bg-inputaligns with the color-system guidelines and eliminates the semi-transparent overlay that sometimes clashed with dark mode.
LGTM.apps/dashboard/src/components/project-page/files-list/FilesList.tsx (1)
84-91: Enhanced error boundary UI looks good!The custom
FallbackComponentprovides better visual consistency and responsive styling for error states. The comprehensive className with responsive breakpoints ensures proper layout across different screen sizes.packages/ui/src/components/ScrollToTopButton.tsx (1)
33-33: Verify fixed positioning doesn't conflict with existing UI elements.The fixed positioning with
right-1 bottom-5 z-50should be tested to ensure it doesn't overlap with other fixed elements like navigation bars, chat widgets, or cookie banners.apps/dashboard/src/components/CustomRangeDatesSelector.tsx (2)
20-48: Good semantic improvement with paragraph wrapper.Wrapping the text nodes in a paragraph element with
text-prettyclass improves semantic HTML structure and text rendering.
30-30: Verified isolation of responsive text class removal
- Searched across all
.tsxfiles formax-[25.625rem]:text-base; no other occurrences found.- The class was only applied in apps/dashboard/src/components/CustomRangeDatesSelector.tsx (and has been removed from both
<Button>instances).No code changes are required—removal is isolated to this component.
apps/dashboard/src/components/ChartGroupWrapper.tsx (1)
1-19: Excellent improvements to component flexibility and semantics!The changes enhance the component in multiple ways:
- Optional
classNameprop increases reusability<section>element improves semantic HTML over generic<div>- Proper use of
cnutility for class merging follows established patterns- TypeScript typing is correct
These changes align well with the UI enhancement objectives.
apps/dashboard/src/components/dashboard-page/Dashboard.tsx (2)
8-16: Excellent lazy loading implementation for bundle optimization!Converting the chart components to lazy loading with dynamic imports will significantly improve initial page load performance by reducing the main bundle size. This aligns perfectly with the PR's bundle size optimization objectives.
24-67: Great layout restructuring with proper error boundaries.The new wrapper structure provides:
- Consistent visual grouping with borders and padding
- Proper error handling for each chart with custom fallback styling
- Appropriate suspense boundaries for lazy-loaded components
The layout improvements enhance the dashboard's visual consistency and user experience.
apps/dashboard/src/components/dashboard-page/DashboardTitle.tsx (3)
4-4: LGTM! Good centralization of GroupByDropDown.The addition of
GroupByDropDownin the dashboard header aligns well with the PR objective to centralize this control. The layout with stacked dropdowns in a floating left container provides good UX.Also applies to: 16-19
21-21: LGTM! Improved layout and alignment.The styling adjustments improve visual alignment:
text-startprovides better left alignment for contentinline-block align-topimproves vertical alignment consistency- Icon positioning adjustments enhance visual balance
Also applies to: 25-26, 32-32
12-12: LGTM! Consistent with layout enhancement objectives.The addition of borders and padding aligns well with the PR objective to add borders around dashboard sections for better visual separation.
apps/dashboard/src/components/project-page/Project.tsx (5)
14-14: LGTM! Proper lazy loading implementation for bundle optimization.The conversion to lazy-loaded chart components is well-implemented and aligns with the PR objective to reduce bundle size. The use of
React.lazy()with dynamic imports follows React best practices.Also applies to: 41-49
6-6: LGTM! Consistent layout pattern with proper error handling.The addition of
GroupByDropDownfollows the same pattern asDashboardTitle, providing UI consistency. The proper wrapping with error and suspense boundaries ensures robust component behavior.Also applies to: 60-75
13-13: LGTM! Consistent error UI with good visual design.The enhanced error fallback UI maintains consistency with other components while providing clear visual feedback. The responsive icon sizing and positioning adjustments improve the overall user experience.
Also applies to: 30-35
78-111: LGTM! Comprehensive chart wrapper with proper lazy loading and error handling.The chart components are properly wrapped with error and suspense boundaries, ensuring robust lazy loading behavior. The custom error fallback for
FilesCirclePackingChartwith specific dimensions is appropriate for its visual requirements.
37-37: False positive: ErrorBoundary requires children as prop.The static analysis warning is incorrect. The
react-error-boundarylibrary'sErrorBoundarycomponent specifically requireschildrenas a prop, not JSX children. This is the correct usage according to the library's API.packages/common/src/constants.ts (1)
11-11: LGTM!Adding
DASHBOARD_PREVIEW_PORTwith value 4173 (Vite's default preview port) follows good practices by centralizing port configuration and maintaining consistency with the existingDASHBOARD_PORTconstant.apps/vscode-extension/src/utils/global-state/getGlobalStateData.ts (1)
5-5: LGTM!The import path update correctly reflects the refactoring from
formatZodIssuestoformatZodError, maintaining consistent error handling functionality.apps/web/package.json (1)
15-18: Version-range loosening – make sure React/Next stay in lock-step
Changingreact/react-domfrom exact to caret allows npm to pull newer minor / patch releases automatically. That is fine, butnext@15.xpins a specific tested React version. Mismatch can break Fast Refresh or the compiler.Please sanity-check with
npm ls react react-dom nextafter install or lock them together inoverrides.package.json (1)
37-47: Wide-scope overrides – verify downstream breakage
Forcingesbuild@0.25.8,micromatch,braces, etc., is useful for CVE mitigation, but several build tools (Vite, tsup, tsc-alias, etc.) sometimes hard-pin olderesbuildAPIs. Run a cold install + build on CI to catch any “unsupported loader” or “unknown option” errors after these overrides.apps/vscode-extension/package.json (2)
5-6: Majorzodupgrade – audit runtime code
zodv4 is a breaking release (changed error shape, droppedZodError.issuesoptional chaining, etc.). The extension code still importsZodErrorand accesses.issuesin several places (e.g.src/utils/*.ts). Make sure those call-sites were migrated; otherwise the extension will crash at runtime.
125-126: Dev-onlyesbuildnow in sync with workspace override – nice
Good catch upgrading to 0.25.8; the extension build will benefit from the bug-fixes and avoids duplicate binaries. 👍apps/vscode-extension/README.md (1)
11-11: Changelog badge updated – no issues
The version badge correctly reflects 0.0.20.apps/dashboard/package.json (2)
52-52: Good addition for bundle analysis.Adding rollup-plugin-visualizer supports the PR's bundle optimization objectives and will help monitor bundle sizes over time.
33-33: Zod 4.0.14 version confirmed
Zod v4.0.14 is the latest stable release (published July 30, 2025) and the version bump inapps/dashboard/package.jsonis valid. Because 4.x includes breaking changes, please:
- Review your Zod schemas and usages against the v4 migration guide (https://zod.dev/v4/migration).
- Run the full test suite to catch any compatibility issues.
apps/vscode-extension/build.js (1)
34-41: Well-implemented exclusion of build artifact.Properly excludes the rollup-plugin-visualizer generated file from the VSCode extension package, preventing unnecessary bloat while maintaining clean separation of development artifacts.
apps/api/tsconfig.json (1)
26-27: Good explicit include/exclude configuration.Adding explicit include and exclude paths improves TypeScript compiler performance and clarity about which files are processed.
apps/dashboard/vite.config.ts (4)
1-1: Good integration of new dependencies and constants.Proper import of the new preview port constant and rollup-plugin-visualizer aligns with the bundle optimization strategy.
Also applies to: 6-6
12-15: Effective bundle analysis setup.The visualizer plugin configuration with automatic opening and custom filename will help monitor bundle optimization progress.
20-22: Consistent preview port configuration.Using the shared DASHBOARD_PREVIEW_PORT constant ensures consistency with API CORS configuration.
32-72: Comprehensive manual chunking strategy.The manual chunking configuration is well-organized, grouping related dependencies logically. This should significantly improve bundle caching and reduce initial load times by allowing selective loading of feature-specific chunks.
apps/api/src/main.ts (3)
2-2: Consistent constant usage.Good use of the shared DASHBOARD_PREVIEW_PORT constant for consistency across the monorepo.
8-13: Improved CORS configuration maintainability.The computed allowedClients array is more maintainable than inline configuration and properly supports both localhost and 127.0.0.1 addresses across multiple ports, including the preview port.
18-18: Verify global validation pipe removal impactI ran searches for
ValidationPipeand common class-validator decorators underapps/api/src, but found no occurrences. That suggests there’s currently no per-route or decorator-based validation to replace the removed global pipe. Please manually confirm that:
- Every controller/handler applies its own
ValidationPipe(e.g. via@UsePipes(new ValidationPipe()))- All DTOs use class-validator decorators (e.g.
@IsString(),@IsOptional(), etc.)- Validation is implemented elsewhere (middleware, interceptor, etc.) before request handling
If none of the above is true, you’ll need to reintroduce validation (globally or per-endpoint) to avoid breaking data integrity.
apps/api/package.json (3)
24-41: Add explicitrxjspeer to avoid implicit resolutionNest v11 peer-depends on
rxjs@^7, but the package is not declared here. Depending on the installer,rxjsmay be hoisted from a transitive dep at an incompatible version, breaking DI and interceptors at runtime.+ "rxjs": "^7.8.0",Locking the peer removes this uncertainty.
65-70: Confirmts-jest@29.4supports TypeScript 5.9
typescriptjumped to5.9.2whilets-jestis still29.4.1. Historically,ts-jestlags one or two minor TS versions; incompatible pairs cause cryptic transform errors during tests.Run the test suite; if failures appear, upgrade to
ts-jest@30(if available) or pintypescriptdown to the latest version officially supported byts-jest.
32-40: No action needed for bcrypt, ulid, or zod imports/usagesAll call-sites are already using the correct named imports and there are no
.safeParsecalls to update:• bcrypt
•import * as bcryptandimport { compare }remain valid in v6.
• ulid
• Usingimport { ulid }matches the ESM-first v3 API.
• zod
• NosafeParseusage found—no adjustments required.Please ensure your integration tests pass after upgrading.
| "dependencies": { | ||
| "date-fns": "^4.1.0", | ||
| "zod": "^3.24.3" | ||
| "zod": "4.0.14" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify zod v4.0.14 compatibility and breaking changes.
The upgrade from zod v3.24.3 to v4.0.14 represents a major version bump that likely includes breaking changes. Additionally, using a fixed version instead of a caret range removes update flexibility.
🌐 Web query:
What are the breaking changes in zod version 4.0.14 compared to version 3.24.3? Does zod version 4.0.14 exist?
💡 Result:
Yes, Zod version 4.0.14 exists. This release includes several updates and fixes, such as:
- Fixing typos in the documentation.
- Adding JSON Schema draft-04 output support.
- Improving tuple recursive inference.
- Avoiding infinite loops in
defineLazy.
Regarding breaking changes between Zod versions 3.24.3 and 4.0.14, Zod 4 introduces several significant changes that may affect existing codebases:
-
Error Handling Overhaul: The error customization API has been streamlined. The
messageparameter is now deprecated in favor of theerrorparameter, which offers a more consistent approach to error handling. (v4.zod.dev) -
Deprecation of
.format()and.flatten()Methods: These methods onZodErrorhave been deprecated. Instead, developers are encouraged to use the top-levelz.treeifyError()function for error formatting. (v4.zod.dev) -
Changes in
.default()Behavior: The application of.default()has been modified. In Zod 4, if the input isundefined,ZodDefaultshort-circuits the parsing process and returns the default value directly. This change may impact code that relies on the previous behavior. (v4.zod.dev) -
Deprecation of
.strict()and.passthrough()Methods: These methods onZodObjecthave been deprecated in favor of the top-levelz.strictObject()andz.looseObject()functions. (v4.zod.dev) -
Removal of
.nonstrict()and.deepPartial()Methods: The.nonstrict()method, an alias for.strip(), has been removed. Additionally,.deepPartial()has been removed due to its complex implementation and potential for misuse. (v4.zod.dev) -
Changes in
z.number()andz.string()Methods:z.number(): Infinite values (POSITIVE_INFINITYandNEGATIVE_INFINITY) are no longer considered valid.z.string(): String formats like.email(),.uuid(), and.url()have been moved to the top-levelznamespace, and the method forms (e.g.,z.string().email()) are now deprecated. (v4.zod.dev)
-
Deprecation of
.merge()Method: The.merge()method onZodObjecthas been deprecated in favor of.extend(), which provides the same functionality with better TypeScript performance. (v4.zod.dev)
These changes aim to improve the consistency and performance of Zod but may require code modifications when upgrading from version 3.24.3 to 4.0.14.
Citations:
- 1: https://newreleases.io/project/github/colinhacks/zod/release/v4.0.14?utm_source=openai
- 2: https://v4.zod.dev/v4/changelog?utm_source=openai
- 3: https://v4.zod.dev/v4/changelog?utm_source=openai
- 4: https://v4.zod.dev/v4/changelog?utm_source=openai
- 5: https://v4.zod.dev/v4/changelog?utm_source=openai
- 6: https://v4.zod.dev/v4/changelog?utm_source=openai
- 7: https://v4.zod.dev/v4/changelog?utm_source=openai
- 8: https://v4.zod.dev/v4/changelog?utm_source=openai
Action Required: Address Zod v4.0.14 Breaking Changes
The dependency was upgraded from ^3.24.3 to 4.0.14, a major release that introduces several breaking changes. Please review and update all usages accordingly:
• Error API overhaul
– message parameter deprecated in favor of error
– Replace .format()/.flatten()with top-levelz.treeifyError()`
• Default behavior
– .default() now short-circuits on undefined, returning the default before parsing
• Object schemas
– .strict() and .passthrough() deprecated → use z.strictObject() / z.looseObject()
– .merge() deprecated → use .extend()
– .nonstrict() and .deepPartial() removed
• Primitive validators
– z.number() no longer allows Infinity/-Infinity
– String validators moved to top-level (e.g. use z.email(), z.url(), z.uuid() instead of z.string().email(), etc.)
Next steps:
- Search the codebase for all deprecated methods listed above.
- Replace with their v4 equivalents.
- Test parsing logic to ensure
.default()changes don’t introduce regressions.
🤖 Prompt for AI Agents
In packages/common/package.json at line 41, the Zod dependency was upgraded from
version 3 to 4.0.14, which includes multiple breaking changes. You need to
search the entire codebase for deprecated Zod methods such as .format(),
.flatten(), .strict(), .passthrough(), .merge(), .nonstrict(), and
.deepPartial(), and replace them with their v4 equivalents like
z.treeifyError(), z.strictObject(), z.looseObject(), and .extend(). Also update
primitive validators to the new top-level methods and adjust any .default()
usage to account for its new short-circuit behavior. Finally, thoroughly test
all parsing logic to ensure no regressions occur due to these changes.
There was a problem hiding this comment.
I have already put this on my todo list, all the deprecated apis will be replaced in the next pr
There was a problem hiding this comment.
@Friedrich482 Perfect! That's a smart approach to keep the scope of this PR focused while systematically addressing the Zod v4 migration in the next one. Thanks for confirming that the deprecated APIs are on your radar for the upcoming PR.
Looking forward to seeing the migration handled properly! 🐰
/| /|
( :v: )
|(_)|
- updated the import on the `formatZodError` function in the `getPeriodStoreValuesFromURL` in the dashboard - removed the `legacy-peer-deps` annotation in the `.npmrc` file
Commits
init: layout
GroupByDropDown.tsxcomponent in the title of the pagesfix: dashboard bundle size
vite.config.tsto reduce the final bundle size of the main chunkfly.tomlfile since it is no longer required0.0.20skeletoncomponentbuild: version bumps
package-lock.jsonfrom the api and the extensionmain.tsin the api since it is no longer usedzodto v4 in the packages/commonbuild: zod
4.0.14across the monorepo: in the apps:dashboardandvscode-extensionfix: dependencies vulnerabilities
fix: deps vulnerabilities
build: vite chunks
fix: layout and skeleton
vite.config.tsfromstats.htmltodeps.htmlCustomRangeDatesSelectorDashboardTitleandProjectTitlelike paragraphs with a proper loading skeletonfeat: ScrollToTopButton
ScrollToTopbutton component in thepackages/uicomponents and used it in theLayoutof the dashboardbuild: dashboard
vite.config.tsbuild: lazy
fix: skeleton
fix: error boundaries
feat: dashboard preview
vite.config.tsand themain.tsin the apiSummary by CodeRabbit
New Features
Enhancements
Dependency Updates
Bug Fixes / Style
Chores