perf: inline Supabase config to eliminate initial fetch delay - #6
Conversation
Worker now injects SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY into the HTML response via a <script> tag, so the client can initialize Supabase immediately without waiting for /api/config round-trip.
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
Warning Review limit reached
More reviews will be available in 53 minutes and 19 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. 📝 WalkthroughWalkthroughThe worker's fetch handler now serves static assets from ChangesConfig Injection via HTML Head
Sequence Diagram(s)sequenceDiagram
participant Browser
participant Worker
participant ASSETS
participant ApiConfig as GET /api/config
Browser->>Worker: GET /index.html
Worker->>ASSETS: env.ASSETS.fetch(request)
ASSETS-->>Worker: HTML Response
Worker->>Worker: injectConfig — insert window.__APP_CONFIG__ script
Worker-->>Browser: Modified HTML (with __APP_CONFIG__)
Browser->>Browser: fetchConfig() — reads globalThis.__APP_CONFIG__
alt __APP_CONFIG__ present and complete
Browser->>Browser: return __APP_CONFIG__ immediately
else missing or incomplete
Browser->>ApiConfig: GET /api/config
ApiConfig-->>Browser: AppConfig JSON
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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
🤖 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 `@src/worker/index.ts`:
- Around line 163-167: The Response constructor is reusing the original
response.headers directly after mutating the HTML body with text replacement.
This causes stale entity metadata headers like content-length, content-encoding,
and etag to persist with the new payload, breaking decoding and caching
behavior. Create a new Headers object or clone the existing one and remove
entity headers (content-length, content-encoding, etag, and similar body-related
metadata) before passing it to the Response constructor on line 166. Keep other
safe headers like content-type, cache-control, and other directives that don't
depend on the original payload.
🪄 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
Run ID: c147d39d-281c-42ec-afff-0528ac701f15
📒 Files selected for processing (2)
src/client/api.tssrc/worker/index.ts
| return new Response(injected, { | ||
| status: response.status, | ||
| statusText: response.statusText, | ||
| headers: response.headers | ||
| }); |
There was a problem hiding this comment.
Do not forward entity headers after mutating the HTML body.
After response.text() + replacement, reusing original headers can keep stale entity metadata (content-length, content-encoding, etag) for a different payload, which can break decoding/caching behavior on Line 166.
Suggested fix
async function injectConfig(response: Response, env: Env): Promise<Response> {
@@
const html = await response.text();
const injected = html.replace("</head>", `${configScript}</head>`);
+ const headers = new Headers(response.headers);
+ headers.delete("content-length");
+ headers.delete("content-encoding");
+ headers.delete("etag");
return new Response(injected, {
status: response.status,
statusText: response.statusText,
- headers: response.headers
+ headers
});
}📝 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.
| return new Response(injected, { | |
| status: response.status, | |
| statusText: response.statusText, | |
| headers: response.headers | |
| }); | |
| const headers = new Headers(response.headers); | |
| headers.delete("content-length"); | |
| headers.delete("content-encoding"); | |
| headers.delete("etag"); | |
| return new Response(injected, { | |
| status: response.status, | |
| statusText: response.statusText, | |
| headers | |
| }); |
🤖 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/worker/index.ts` around lines 163 - 167, The Response constructor is
reusing the original response.headers directly after mutating the HTML body with
text replacement. This causes stale entity metadata headers like content-length,
content-encoding, and etag to persist with the new payload, breaking decoding
and caching behavior. Create a new Headers object or clone the existing one and
remove entity headers (content-length, content-encoding, etag, and similar
body-related metadata) before passing it to the Response constructor on line
166. Keep other safe headers like content-type, cache-control, and other
directives that don't depend on the original payload.
1 participant
Summary
SUPABASE_URLandSUPABASE_PUBLISHABLE_KEYinto HTML via<script>tag before</head>fetchConfig()readswindow.__APP_CONFIG__first, skipping the/api/configround-tripBefore
White screen → React mount → fetch
/api/config→ wait → init Supabase → renderAfter
White screen → React mount → config already available → immediate Supabase init → render
Summary by CodeRabbit
Release Notes