fix(netlify): resolve AI API crash and 404 locale/theme issues#226
Conversation
AI fixes: - Extract getClientIp to separate file (avoid db import crash) - Add missing zod dependency to package.json 404 page fixes: - Use NEXT_LOCALE cookie for locale detection on Netlify - Add theme detection script in root layout - Update styling with hero background and gradient text
✅ Deploy Preview for develop-devlovers ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughRefactors client IP extraction into a new utility, sets NEXT_LOCALE via proxy, adds theme init script in RootLayout, redesigns the 404 page to read locale from a cookie, and adds Zod to frontend dependencies. Additional GROQ env debug logging added to the AI explain route. Changes
Sequence Diagram(s)sequenceDiagram
actor Client
participant Proxy
participant NextServer
participant AI_Route
participant ClientIP_Util
Client->>Proxy: Request (with locale selection)
Proxy->>Client: Set-Cookie: NEXT_LOCALE=...
Client->>NextServer: Request /not-found (cookies sent)
Note right of NextServer: NotFound reads NEXT_LOCALE cookie
NextServer-->>Client: Rendered 404 page (localized)
Client->>AI_Route: POST /api/ai/explain (headers)
AI_Route->>ClientIP_Util: getClientIpFromHeaders(request.headers)
ClientIP_Util-->>AI_Route: client IP or null
AI_Route->>AI_Route: Validate GROQ env, log GROQ* vars if missing
AI_Route-->>Client: API response
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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: 1
🤖 Fix all issues with AI agents
In `@frontend/app/not-found.tsx`:
- Around line 48-50: The Tailwind arbitrary font-size in the span inside
not-found.tsx is invalid due to the space in "text-[1 em]"; update the className
on that span (the JSX element with className="relative inline-block text-red-500
text-[1 em] leading-none") to use a valid Tailwind value such as "text-[1em]" or
a standard size like "text-base" so the font-size is applied correctly.
🧹 Nitpick comments (4)
frontend/app/layout.tsx (1)
37-55: Inline theme script is acceptable for FOUC prevention.The static analysis warnings about
dangerouslySetInnerHTMLare false positives in this case. The script content is a static string literal with no dynamic/user input interpolation, making XSS impossible. This is a standard pattern for preventing flash of unstyled content (FOUC) during theme initialization.The implementation correctly:
- Wraps localStorage access in try/catch for environments where it's unavailable
- Respects system preference when theme is 'system'
- Works with
suppressHydrationWarningon the<html>tagConsider using
next-themeslibrary which already handles this pattern if you want to reduce custom theme management code.frontend/app/not-found.tsx (1)
7-9: Consider importinglocalesfrom the shared config.The
localesarray duplicates the definition infrontend/i18n/config.ts. Importing from the shared config would ensure consistency if locales change.♻️ Suggested refactor
+import { locales } from '@/i18n/config'; + import ukMessages from '@/messages/uk.json'; import enMessages from '@/messages/en.json'; import plMessages from '@/messages/pl.json'; type Locale = 'uk' | 'en' | 'pl'; -const locales: Locale[] = ['uk', 'en', 'pl'];You may need to adjust the type if the imported
localesisreadonly:const locale: Locale = localeCookie && (locales as readonly string[]).includes(localeCookie) ? (localeCookie as Locale) : 'en';frontend/lib/security/client-ip.ts (1)
19-22: Consider documenting the production trust behavior.
TRUST_FORWARDED_HEADERSdefaults totruein non-production butfalsein production. This is a sensible security default, but consider adding a comment explaining that in production deployments behind a trusted proxy (like Netlify), operators should explicitly setTRUST_FORWARDED_HEADERS=true.frontend/app/api/ai/explain/route.ts (1)
97-99: Consider restricting debug logging to development.Logging environment variable names (even without values) in production could leak infrastructure details. Consider wrapping this in a development check:
♻️ Suggested change
console.error('GROQ_API_KEY is not configured'); - console.error('Available env vars starting with GROQ:', - Object.keys(process.env).filter(k => k.startsWith('GROQ')) - ); + if (process.env.NODE_ENV === 'development') { + console.error('Available env vars starting with GROQ:', + Object.keys(process.env).filter(k => k.startsWith('GROQ')) + ); + }
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2 participants
AI fixes:
404 page fixes:
Summary by CodeRabbit
New Features
UI/UX Improvements
✏️ Tip: You can customize this high-level summary in your review settings.