Skip to content

fix: ssr in dashboard#304

Open
lindesvard wants to merge 1 commit intomainfrom
fix/ssr
Open

fix: ssr in dashboard#304
lindesvard wants to merge 1 commit intomainfrom
fix/ssr

Conversation

@lindesvard
Copy link
Contributor

@lindesvard lindesvard commented Feb 26, 2026

Summary by CodeRabbit

Release Notes

  • Bug Fixes

    • Fixed server-side rendering errors caused by improper header forwarding in isomorphic SSR/client environments.
    • Improved API request reliability with enhanced cookie management and CORS configuration.
  • New Features

    • Enhanced API client with improved cookie-based authentication for better server-side rendering support.
    • Better credentials handling for cross-origin API requests to ensure seamless integration.

wip
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 26, 2026

📝 Walkthrough

Walkthrough

Modified tRPC client initialization for isomorphic SSR/client scenarios. Introduces header filtering to forward only Cookie headers from server-side, adds a new createTRPCClientWithHeaders function that constructs tRPC clients with appropriate headers and credentials, and adjusts fetch behavior with credential handling.

Changes

Cohort / File(s) Summary
tRPC Client Initialization & Header Management
apps/start/src/integrations/tanstack-query/root-provider.tsx
Introduces createTRPCClientWithHeaders() function for constructing tRPC clients with isomorphic header support. Implements server-side header filtering via getIsomorphicHeaders to forward only Cookie headers, preventing hop-by-hop header propagation. Enhances fetch behavior with credentials: 'include' for CORS-compatible requests. Updates Provider props ordering and refactors getContext to use object shorthand notation.

Sequence Diagram

sequenceDiagram
    participant Client as Client Browser
    participant Server as Server (SSR)
    participant TRPCFactory as createTRPCClientWithHeaders
    participant Headers as getIsomorphicHeaders
    participant Fetch as Fetch API
    participant API as tRPC API Endpoint

    Server->>Headers: getRequestHeaders()
    Headers-->>Server: All request headers
    Server->>TRPCFactory: createTRPCClientWithHeaders(apiUrl)
    TRPCFactory->>Headers: Filter headers (Cookie only)
    Headers-->>TRPCFactory: Filtered headers
    TRPCFactory-->>Server: tRPC client instance
    
    Client->>Server: Request page
    Server->>TRPCFactory: Execute tRPC query
    TRPCFactory->>Fetch: fetch with credentials + filtered headers
    Fetch->>API: HTTP request (Cookie header included)
    API-->>Fetch: Response
    Fetch-->>TRPCFactory: Data
    TRPCFactory-->>Server: Query result
    Server-->>Client: HTML with data
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Whiskers twitch with tRPC glee,
Headers filtered, Cookie-free,
Server and client, now they align,
SSR flows in perfect design!
Credentials whisper through the air, 🍪✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'fix: ssr in dashboard' is vague and lacks specificity. While it mentions SSR (server-side rendering) and dashboard, it doesn't clearly convey what the actual fix accomplishes or why the change matters. Provide a more descriptive title that explains the specific SSR issue being fixed, such as 'fix: prevent hop-by-hop headers in SSR client' or 'fix: add header filtering for isomorphic SSR'.
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/ssr

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
apps/start/src/integrations/tanstack-query/root-provider.tsx (1)

46-66: ⚠️ Potential issue | 🟡 Minor

Avoid logging request options that may contain sensitive headers.

The error logging includes the full options object which contains headers (including the Cookie header). If these logs are persisted or accessible to unauthorized parties, this could expose session tokens.

🛡️ Proposed fix to exclude sensitive data from logs
             // Log HTTP errors on server
             if (!response.ok && typeof window === 'undefined') {
               const text = await response.clone().text();
               console.error('[tRPC SSR Error]', {
                 url: url.toString(),
                 status: response.status,
                 statusText: response.statusText,
                 body: text,
-                options,
+                method: options?.method,
               });
             }

             return response;
           } catch (error) {
             // Log fetch errors on server
             if (typeof window === 'undefined') {
               console.error('[tRPC SSR Error]', {
                 url: url.toString(),
                 error: error instanceof Error ? error.message : String(error),
                 stack: error instanceof Error ? error.stack : undefined,
-                options,
+                method: options?.method,
               });
             }
             throw error;
           }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/start/src/integrations/tanstack-query/root-provider.tsx` around lines 46
- 66, The server-side error logs currently include the full options object
(variable options) which may contain sensitive headers like Cookie; update both
console.error calls in root-provider.tsx to sanitize options before logging by
creating a shallow copy of options and removing or redacting sensitive headers
(e.g., delete or replace options.headers.cookie and any Authorization header) or
by logging a safe subset (method, url, status) instead of full options; ensure
you reference the same variable names used in the diff (response, url, options)
and apply the sanitization in both the non-OK response branch and the catch
block.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@apps/start/src/integrations/tanstack-query/root-provider.tsx`:
- Around line 46-66: The server-side error logs currently include the full
options object (variable options) which may contain sensitive headers like
Cookie; update both console.error calls in root-provider.tsx to sanitize options
before logging by creating a shallow copy of options and removing or redacting
sensitive headers (e.g., delete or replace options.headers.cookie and any
Authorization header) or by logging a safe subset (method, url, status) instead
of full options; ensure you reference the same variable names used in the diff
(response, url, options) and apply the sanitization in both the non-OK response
branch and the catch block.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4b150dd and d9f5f29.

📒 Files selected for processing (1)
  • apps/start/src/integrations/tanstack-query/root-provider.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant