Conversation
WalkthroughThe change standardizes 200 responses in apps/web/app/api/social/og/image/route.tsx: meeting, app, and generic image routes now return Content-Type: image/png and Cache-Control: public, max-age=3600, stale-while-revalidate=86400. Error (400) handling and response bodies were not modified. No exported/public signatures changed. Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
✨ 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/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
dosubot
bot
added
the
performance
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (08/19/25)1 reviewer was added to this PR based on Keith Williams's automation. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (9)
apps/web/app/api/social/og/image/route.tsx (9)
90-93: Add s-maxage for shared/CDN caching (keep max-age for browsers).To ensure Vercel/edge CDN uses the intended TTL (not just browsers), include s-maxage alongside max-age. Optional: also set CDN-Cache-Control for Vercel to give CDN-specific directives.
return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png", - "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400", + "Cache-Control": "public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400", + // "CDN-Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400", // optional for Vercel }, });
105-108: Avoid long-lived caching for 400 errors; prefer no-store or a very short TTL.Caching 400 responses for an hour can lock in client mistakes (or schema iteration) and make debugging harder. For validation errors, consider not caching or using a small TTL (e.g., 30–60s).
headers: { "Content-Type": "application/json", - "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400", + "Cache-Control": "no-store", },If you intentionally want caching, consider: public, max-age=60, s-maxage=60, must-revalidate.
135-138: Same for app 400 responses: don’t cache for long (align policy across 4xx).Mirror the meeting change: use no-store or a short TTL to avoid sticky client-side mistakes and improve iteration.
headers: { "Content-Type": "application/json", - "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400", + "Cache-Control": "no-store", },
125-125: Apply the same Cache-Control to app images (200) for consistency and perf.Success responses for "app" images should get the same caching as "meeting" to realize CDN perf gains.
-return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png" } }); +return new Response(img.body, { + status: 200, + headers: { + "Content-Type": "image/png", + "Cache-Control": "public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400", + }, +});
156-156: Also add Cache-Control to generic images (200).Keep caching behavior uniform across all image types.
-return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png" } }); +return new Response(img.body, { + status: 200, + headers: { + "Content-Type": "image/png", + "Cache-Control": "public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400", + }, +});
165-167: Align generic 400 with chosen 4xx policy (recommend no-store).Other 4xx responses are being adjusted; generic should follow the same rule.
-headers: { "Content-Type": "application/json" }, +headers: { + "Content-Type": "application/json", + "Cache-Control": "no-store", +},
174-176: Set explicit Cache-Control for 404 (avoid caching errors).404s here are dynamic (query-driven). Recommend no-store to prevent caching transient misses.
-return new Response("What you're looking for is not here..", { status: 404 }); +return new Response("What you're looking for is not here..", { + status: 404, + headers: { + "Content-Type": "text/plain; charset=utf-8", + "Cache-Control": "no-store", + }, +});
177-179: Do not cache 500 responses.500s should never be cached; add no-store and a Content-Type.
-return new Response("Internal server error", { status: 500 }); +return new Response("Internal server error", { + status: 500, + headers: { + "Content-Type": "text/plain; charset=utf-8", + "Cache-Control": "no-store", + }, +});
37-43: Optional perf: cache fonts across invocations to reduce per-request latency.Fetching fonts on every request adds avoidable overhead. In edge runtimes, module-level state often persists for the instance lifetime. Hoist the fetch into a module-level promise and reuse.
Example (outside the current ranges, for illustration):
// top-level const fontsPromise = (async () => { const [cal, interRegular, interMedium] = await Promise.allSettled([ fetch(new URL("/fonts/cal.ttf", WEBAPP_URL)).then((r) => r.arrayBuffer()), fetch(new URL("/fonts/Inter-Regular.ttf", WEBAPP_URL)).then((r) => r.arrayBuffer()), fetch(new URL("/fonts/Inter-Medium.ttf", WEBAPP_URL)).then((r) => r.arrayBuffer()), ]); const fonts: SatoriOptions["fonts"] = []; if (interRegular.status === "fulfilled") fonts.push({ name: "inter", data: interRegular.value, weight: 400 }); if (interMedium.status === "fulfilled") fonts.push({ name: "inter", data: interMedium.value, weight: 500 }); if (cal.status === "fulfilled") { fonts.push({ name: "cal", data: cal.value, weight: 400 }); fonts.push({ name: "cal", data: cal.value, weight: 600 }); } return fonts; })(); // in handler const fonts = await fontsPromise;Also applies to: 44-57
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/web/app/api/social/og/image/route.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
apps/web/app/api/social/og/image/route.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
apps/web/app/api/social/og/image/route.tsx
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
E2E results are ready! |
3 participants
What does this PR do?
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?
Tested already: