Implement CI/CD foundation and optimize components for Vercel#193
Conversation
…ze images - Replace <a> tags with <Link> in global-error.tsx and BookingPackages.tsx - Add key props to VenueModal and PackageModal to force remount on open/close - Replace <img> with Next.js Image component in DjAnalyticsDashboard - Fix HTML entity encoding for apostrophes and quotes (use ' and ") - Optimize PackageModal and VenueModal state initialization with lazy initial state - Remove unnecessary useEffect in Pack
Implement CI/CD foundation and optimize components for Vercel
feat: Phase 5 CI/CD monitoring with Sentry
- Replace <img> tag with Next.js Image component for event poster - Add fill prop and responsive sizes attribute for optimized loading - Remove eslint disable comment for @next/next/no-img-element
refactor: replace img with Next.js Image component in EventCard
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 32 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughThe PR adds CI validation and Playwright coverage, configures Vitest, integrates Sentry and Vercel monitoring, updates selected navigation and image rendering, and revises profile modal state initialization and city preloading. ChangesPlatform and UI updates
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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: 4
🧹 Nitpick comments (4)
src/components/dj-profile/VenueModal.tsx (1)
64-74: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low valueHandle potential promise rejections in the async effect.
The
getCitiesByCountryserver action is called without a.catch()block. If the network drops or the server action throws an error, it will result in an unhandled promise rejection. Consider adding an error handler to fail gracefully.♻️ Proposed fix
useEffect(() => { // Pre-load cities for venues that already have a country selected initialVenues.forEach((venue) => { if (venue.countryId && !loadedCountryIds.current.has(venue.countryId)) { loadedCountryIds.current.add(venue.countryId); - getCitiesByCountry(venue.countryId).then((result) => { - setVenueCities((prev) => ({ ...prev, [venue.countryId]: result })); - }); + getCitiesByCountry(venue.countryId) + .then((result) => { + setVenueCities((prev) => ({ ...prev, [venue.countryId]: result })); + }) + .catch((error) => { + console.error("Failed to load cities for country", venue.countryId, error); + }); } }); }, [initialVenues]);🤖 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 `@src/components/dj-profile/VenueModal.tsx` around lines 64 - 74, Update the preloading logic in the useEffect for initialVenues to handle rejected getCitiesByCountry promises with a catch handler, failing gracefully without unhandled rejections while preserving the existing successful result update.package.json (1)
7-17: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueConsider removing redundant validation in the build script.
next buildautomatically performs type-checking and linting by default. Addingnpm run validate(which runstsc --noEmitandeslint .) beforenext buildwill run these checks twice, unnecessarily increasing your build times.Unless you have disabled these checks in
next.config.js(e.g.,ignoreDuringBuilds), consider reverting thebuildscript to avoid the redundant work.♻️ Proposed refactor
- "build": "npm run validate && prisma generate && next build", + "build": "prisma generate && next build",🤖 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 `@package.json` around lines 7 - 17, Update the package.json build script to remove the leading npm run validate step and invoke prisma generate followed by next build directly. Keep the separate validate script unchanged, and retain the existing build command order for Prisma generation and Next.js..github/workflows/ci.yml (2)
9-9: 🔒 Security & Privacy | 🔵 Trivial | ⚡ Quick winEnforce least-privilege permissions for the workflow.
By default, GitHub Actions workflows have broad permissions. To follow security best practices, explicitly set the default permissions to
readat the top level or job level.🛡️ Proposed fix to restrict permissions
on: push: branches: ["main", "dev", "feature/**"] pull_request: branches: ["main", "dev"] + +permissions: + contents: read jobs: test:🤖 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 @.github/workflows/ci.yml at line 9, Update the workflow permissions configuration around the top-level jobs definition to explicitly set the default GitHub Actions token permissions to read-only, using the workflow-level or applicable job-level permissions setting while preserving existing job behavior.Source: Linters/SAST tools
15-16: 🔒 Security & Privacy | 🔵 Trivial | 💤 Low valueDisable credential persistence in checkout action.
The
actions/checkoutaction persists the GitHub auth token in the local git config by default. Since this workflow only runs tests and does not push code, setpersist-credentials: falseacross all checkout steps to prevent potential token leakage in the CI environment.
.github/workflows/ci.yml#L15-L16: addwith: persist-credentials: falseto the checkout step in thetestjob..github/workflows/ci.yml#L42-L43: addwith: persist-credentials: falseto the checkout step in thee2ejob.🤖 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 @.github/workflows/ci.yml around lines 15 - 16, Disable credential persistence for both actions/checkout steps in .github/workflows/ci.yml at lines 15-16 (test job) and 42-43 (e2e job) by adding the persist-credentials: false option under each checkout step.Source: Linters/SAST tools
🤖 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.
Inline comments:
In `@__tests__/setup.ts`:
- Line 1: Update the setup import in __tests__/setup.ts to use the
Vitest-specific `@testing-library/jest-dom/vitest` entrypoint instead of the
generic `@testing-library/jest-dom` import.
In `@e2e/about.spec.ts`:
- Around line 5-6: Strengthen the smoke tests by capturing the response from
page.goto and asserting it is successful, then replace the generic body
visibility checks with route-specific heading assertions: use “About DJcovery”
in e2e/about.spec.ts and “Set Up Your DJ Profile” in e2e/become-dj.spec.ts.
In `@sentry.client.config.ts`:
- Around line 15-18: Remove the console.log call from the beforeSend hook in the
Sentry configuration, or remove the hook entirely if it serves no other purpose;
preserve returning the event and avoid emitting raw Sentry event data in
production.
In `@sentry.server.config.ts`:
- Around line 1-7: Add an instrumentation.ts module with a register() function
that imports both Sentry configuration modules, ensuring server and Edge
runtimes initialize Sentry. Update sentry.server.config.ts lines 1-7 and
sentry.edge.config.ts lines 1-7 only as needed for these imports, with no direct
behavioral changes to their Sentry.init configuration.
---
Nitpick comments:
In @.github/workflows/ci.yml:
- Line 9: Update the workflow permissions configuration around the top-level
jobs definition to explicitly set the default GitHub Actions token permissions
to read-only, using the workflow-level or applicable job-level permissions
setting while preserving existing job behavior.
- Around line 15-16: Disable credential persistence for both actions/checkout
steps in .github/workflows/ci.yml at lines 15-16 (test job) and 42-43 (e2e job)
by adding the persist-credentials: false option under each checkout step.
In `@package.json`:
- Around line 7-17: Update the package.json build script to remove the leading
npm run validate step and invoke prisma generate followed by next build
directly. Keep the separate validate script unchanged, and retain the existing
build command order for Prisma generation and Next.js.
In `@src/components/dj-profile/VenueModal.tsx`:
- Around line 64-74: Update the preloading logic in the useEffect for
initialVenues to handle rejected getCitiesByCountry promises with a catch
handler, failing gracefully without unhandled rejections while preserving the
existing successful result update.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4b339823-0cdf-4656-ad17-193110252289
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (29)
.github/workflows/ci.yml.gitignore__tests__/integration/api/.gitkeep__tests__/setup.ts__tests__/unit/actions/.gitkeep__tests__/unit/components/.gitkeep__tests__/unit/lib/.gitkeep__tests__/unit/lib/utils.test.tse2e/about.spec.tse2e/become-dj.spec.tse2e/events.spec.tse2e/home.spec.tsnext.config.mjspackage.jsonplaywright.config.tssentry.client.config.tssentry.edge.config.tssentry.server.config.tssrc/app/global-error.tsxsrc/app/layout.tsxsrc/components/dj-profile/BookingPackages.tsxsrc/components/dj-profile/DjProfilePremium.tsxsrc/components/dj-profile/PackageModal.tsxsrc/components/dj-profile/VenueModal.tsxsrc/components/dj-profile/WhereIvePlayed.tsxsrc/components/dj/DjAnalyticsDashboard.tsxsrc/components/events/EventCard.tsxsrc/proxy.tsvitest.config.ts
- Update jest-dom import path to vitest-specific version in test setup - Replace generic body visibility checks with specific heading assertions - Add HTTP status code verification in about page test - Verify sign-in redirect behavior in become-dj page test
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Tests