fix: OG image error from custom fonts not being supported#22916
Conversation
WalkthroughThe font loading logic in the handler function was updated to use Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ 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 (
|
hbjORbj
changed the title
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (08/06/25)1 reviewer was added to this PR based on Keith Williams's automation. |
hbjORbj
changed the title
![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 (1)
apps/web/app/api/social/og/image/route.tsx (1)
46-57: Font inclusion logic is correct, but consider improving maintainability.The conditional logic properly checks fulfillment status and includes fonts with appropriate weights. The Cal font being added with both 400 and 600 weights provides good typography options.
Consider using a more descriptive approach to reduce reliance on array indices:
- const fontResults = await Promise.allSettled([ - fetch(new URL("/fonts/cal.ttf", WEBAPP_URL)).then((res) => res.arrayBuffer()), - fetch(new URL("/fonts/Inter-Regular.ttf", WEBAPP_URL)).then((res) => res.arrayBuffer()), - fetch(new URL("/fonts/Inter-Medium.ttf", WEBAPP_URL)).then((res) => res.arrayBuffer()), - ]); + const fontFetches = { + cal: fetch(new URL("/fonts/cal.ttf", WEBAPP_URL)).then((res) => res.arrayBuffer()), + interRegular: fetch(new URL("/fonts/Inter-Regular.ttf", WEBAPP_URL)).then((res) => res.arrayBuffer()), + interMedium: fetch(new URL("/fonts/Inter-Medium.ttf", WEBAPP_URL)).then((res) => res.arrayBuffer()), + }; + + const fontResults = await Promise.allSettled([ + fontFetches.cal, + fontFetches.interRegular, + fontFetches.interMedium, + ]);This would make the intent clearer while maintaining the same functionality.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/app/api/social/og/image/route.tsx(1 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
🧠 Learnings (1)
📚 Learning: in packages/app-store/office365calendar/lib/calendarservice.ts, the fetcher method in office365calen...
Learnt from: din-prajapati
PR: calcom/cal.com#21854
File: packages/app-store/office365calendar/__tests__/unit_tests/SubscriptionManager.test.ts:0-0
Timestamp: 2025-08-05T12:04:29.037Z
Learning: In packages/app-store/office365calendar/lib/CalendarService.ts, the fetcher method in Office365CalendarService class is public, not private. It was specifically changed from private to public in this PR to support proper testing and external access patterns.
Applied to files:
apps/web/app/api/social/og/image/route.tsx
🧬 Code Graph Analysis (1)
apps/web/app/api/social/og/image/route.tsx (1)
packages/lib/constants.ts (1)
WEBAPP_URL(12-18)
🔇 Additional comments (3)
apps/web/app/api/social/og/image/route.tsx (3)
38-43: Excellent improvement to font loading resilience!Switching from
Promise.alltoPromise.allSettledis a smart change that prevents the entire OG image generation from failing if a single font fails to load. This allows graceful degradation where images can still be generated with whatever fonts are available.
44-44: Good type-safe initialization.The font array initialization with proper TypeScript typing ensures type safety for the Satori configuration.
62-62: Perfect completion of the resilient font loading implementation.The dynamic font array assignment ensures that only successfully loaded fonts are included in the configuration, allowing OG image generation to proceed even with partial font loading failures.
E2E results are ready! |
3 participants
What does this PR do?
Problem
Error: Font processing error: lookupType: 5 - substFormat: 3 is not yet supportedwhen Satori (engined used by@vercel/ogfor image processing) tried to process advanced OpenType features in custom fontsSolution
Mandatory Tasks (DO NOT REMOVE)