chore: enable maintenance on all pages #1233
Conversation
Signed-off-by: Kushagra Sarathe <76868364+kushagrasarathe@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughConverted the maintenance page into a client component with updated UI and navigation. Layout switched from Banner to GenericBanner and added a footer visibility observer. Middleware introduced a maintenance-mode redirect gate and expanded route matcher coverage. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ 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. Comment |
kushagrasarathe
changed the title
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?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.
Actionable comments posted: 1
🧹 Nitpick comments (5)
src/components/Global/Layout/index.tsx (2)
41-44: Guard the maintenance banner behind a flagHard-coding the banner will show “Under maintenance” in all environments. Gate it behind an env flag so it can’t slip to prod unintentionally.
Apply this diff:
- {/* <Banner /> */} - {/* @dev note: temp, remove banner later */} - <GenericBanner message="Under maintenance" icon="⚠️" /> + {/* <Banner /> */} + {/* @dev note: temp, remove banner later */} + {process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'true' && ( + <GenericBanner message="Under maintenance" icon="⚠️" /> + )}
84-109: IntersectionObserver: sentinel likely never intersects; cleanup may leak
- Zero-height sentinel with threshold 0.1 may never reach the threshold.
- Prefer disconnect() in cleanup to avoid stale observations.
Apply this diff:
- useEffect(() => { + useEffect(() => { const observerOptions = { root: null, // relative to viewport rootMargin: '0px', - threshold: 0.1, // 10% of the footer is visible + threshold: 0, // fire on any visibility to handle tiny sentinel } @@ - return () => { - if (footerRef.current) { - observer.unobserve(footerRef.current) - } - } + return () => { + observer.disconnect() + } }, [setIsFooterVisible]) - return <div ref={footerRef}></div> + return <div ref={footerRef} className="h-px w-full" />src/middleware.ts (2)
16-18: Broaden static asset allowlist and make regex cheaperAdd common modern formats and sourcemaps; current regex is fine but can be simplified.
Apply this diff:
- !pathname.match( - /.*\.(jpg|jpeg|png|gif|svg|ico|ttf|woff|woff2|eot|css|js|json|xml|txt|mp3|mp4|webm|ogg|wav|flac|aac)$/ - ) + !/\.(?:jpg|jpeg|png|gif|svg|webp|avif|ico|ttf|woff|woff2|eot|css|js|map|json|xml|txt|mp3|mp4|webm|ogg|wav|flac|aac)$/i.test( + pathname + )
67-85: Matcher completeness and duplication
- Consider adding '/maintenance' and '/support' to matcher for consistent handling (they’re allowed above anyway).
- Remove redundant '/home' since '/home/:path*' covers it.
Apply this diff:
matcher: [ - '/', - '/home', + '/', '/claim/:path*', '/api/:path*', '/home/:path*', + '/maintenance', + '/support/:path*', '/profile/:path*', '/send/:path*', '/request/:path*', '/settings/:path*', '/setup/:path*', '/share/:path*', '/history/:path*', '/raffle/:path*', '/c/:path*', '/pay/:path*', '/p/:path*', '/link/:path*', ],src/app/maintenance/page.tsx (1)
11-11: Use StaticImageData directly with next/imagePassing the imported image object (not
.src) lets Next manage metadata optimally.Apply this diff:
- <Image src={chillPeanutAnim.src} alt="Maintenance" width={250} height={250} /> + <Image src={chillPeanutAnim} alt="Maintenance" width={250} height={250} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/maintenance/page.tsx(1 hunks)src/components/Global/Layout/index.tsx(2 hunks)src/middleware.ts(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/app/maintenance/page.tsx (1)
src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
🪛 GitHub Check: CodeQL
src/middleware.ts
[failure] 16-18: Polynomial regular expression used on uncontrolled data
This regular expression that depends on a user-provided value may run slow on strings with many repetitions of 'a'.
⏰ 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). (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (1)
src/app/maintenance/page.tsx (1)
20-23: /support currently bypasses middleware — add to allowedPaths if you add it to matcherThere is a support route at src/app/(mobile-ui)/support/page.tsx and multiple links/router.push to '/support'. src/middleware.ts’s matcher does not include '/support', so middleware does not run for that path (it remains reachable during maintenance). allowedPaths = ['/', '/maintenance', '/apple-app-site-association'] does NOT include '/support'; if you later add '/support' to middleware.config.matcher it will be redirected to /maintenance. Either keep the matcher excluding '/support' or add '/support' to allowedPaths in src/middleware.ts.
Likely an incorrect or invalid review comment.
| const { pathname } = request.nextUrl | ||
| const maintenanceMode = true | ||
|
|
||
| if (maintenanceMode) { | ||
| const allowedPaths = ['/', '/maintenance', '/apple-app-site-association'] | ||
| if ( | ||
| !allowedPaths.includes(pathname) && | ||
| !pathname.startsWith('/api/') && | ||
| !pathname.startsWith('/_next/') && | ||
| !pathname.startsWith('/.well-known/') && | ||
| !pathname.match( | ||
| /.*\.(jpg|jpeg|png|gif|svg|ico|ttf|woff|woff2|eot|css|js|json|xml|txt|mp3|mp4|webm|ogg|wav|flac|aac)$/ | ||
| ) | ||
| ) { | ||
| return NextResponse.redirect(new URL('/maintenance', request.url)) | ||
| } | ||
| } |
There was a problem hiding this comment.
Hard-coded maintenance mode will lock users out
Shipping with maintenanceMode = true redirects nearly all traffic. Read from an env var and allow support access.
Apply this diff:
- const { pathname } = request.nextUrl
- const maintenanceMode = true
+ const { pathname } = request.nextUrl
+ const maintenanceMode =
+ (process.env.NEXT_PUBLIC_MAINTENANCE_MODE || process.env.MAINTENANCE_MODE) === 'true'
@@
- const allowedPaths = ['/', '/maintenance', '/apple-app-site-association']
+ const allowedPaths = ['/', '/maintenance', '/support', '/apple-app-site-association']📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { pathname } = request.nextUrl | |
| const maintenanceMode = true | |
| if (maintenanceMode) { | |
| const allowedPaths = ['/', '/maintenance', '/apple-app-site-association'] | |
| if ( | |
| !allowedPaths.includes(pathname) && | |
| !pathname.startsWith('/api/') && | |
| !pathname.startsWith('/_next/') && | |
| !pathname.startsWith('/.well-known/') && | |
| !pathname.match( | |
| /.*\.(jpg|jpeg|png|gif|svg|ico|ttf|woff|woff2|eot|css|js|json|xml|txt|mp3|mp4|webm|ogg|wav|flac|aac)$/ | |
| ) | |
| ) { | |
| return NextResponse.redirect(new URL('/maintenance', request.url)) | |
| } | |
| } | |
| const { pathname } = request.nextUrl | |
| const maintenanceMode = | |
| (process.env.NEXT_PUBLIC_MAINTENANCE_MODE || process.env.MAINTENANCE_MODE) === 'true' | |
| if (maintenanceMode) { | |
| const allowedPaths = ['/', '/maintenance', '/support', '/apple-app-site-association'] | |
| if ( | |
| !allowedPaths.includes(pathname) && | |
| !pathname.startsWith('/api/') && | |
| !pathname.startsWith('/_next/') && | |
| !pathname.startsWith('/.well-known/') && | |
| !pathname.match( | |
| /.*\.(jpg|jpeg|png|gif|svg|ico|ttf|woff|woff2|eot|css|js|json|xml|txt|mp3|mp4|webm|ogg|wav|flac|aac)$/ | |
| ) | |
| ) { | |
| return NextResponse.redirect(new URL('/maintenance', request.url)) | |
| } | |
| } |
🧰 Tools
🪛 GitHub Check: CodeQL
[failure] 16-18: Polynomial regular expression used on uncontrolled data
This regular expression that depends on a user-provided value may run slow on strings with many repetitions of 'a'.
2 participants
Uh oh!
There was an error while loading. Please reload this page.