Add c15t consent management#1009
Conversation
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tanstack-com | 23d52ee | Commit Preview URL Branch Preview URL |
Jun 26 2026, 06:49 PM |
📝 WalkthroughWalkthroughThis PR adds c15t consent-manager support to the app shell, introduces a new Changesc15t consent manager integration
Sequence Diagram(s)sequenceDiagram
participant RootRoute as src/routes/__root.tsx
participant ConsentManager
participant ConsentBanner
participant ConsentDialog
RootRoute->>ConsentManager: render with showControls={!hasBaseParent}
ConsentManager->>ConsentManager: wait for hydration
ConsentManager->>ConsentBanner: render when showControls is true
ConsentManager->>ConsentDialog: render when showControls is true
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![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/components/ConsentManager.tsx`:
- Around line 54-58: `ConsentManagerProvider` is returning early until after
hydration, which delays c15t initialization and the Google Tag `alwaysLoad`
setup. Keep `ConsentManagerProvider` mounted on the first render and move only
the hydration-stability workaround out of this path, ideally into
`ConsentBanner` and `ConsentDialog` or by using c15t’s SSR data path. Preserve
the provider’s setup logic so the runtime starts immediately while still
avoiding hydration mismatch.
🪄 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: d9392cbb-116f-4dcf-bbaf-554c522087ec
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
package.jsonsrc/components/ConsentManager.tsxsrc/components/Footer.tsxsrc/routes/__root.tsxsrc/styles/app.csssrc/utils/analytics/providers/google.tsvite.config.ts
| // c15t injects runtime theme styles; mount after hydration so Start's SSR | ||
| // markup stays byte-stable. | ||
| if (!hasMounted) { | ||
| return <>{children}</> | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect relevant files and surrounding context.
git ls-files 'src/components/ConsentManager.tsx' 'src/routes/__root.tsx' 'src/components/*Consent*' 'src/**/*Consent*' | sed -n '1,200p'
printf '\n--- ConsentManager outline ---\n'
ast-grep outline src/components/ConsentManager.tsx --view expanded || true
printf '\n--- root outline ---\n'
ast-grep outline src/routes/__root.tsx --view expanded || true
printf '\n--- ConsentManager excerpt ---\n'
nl -ba src/components/ConsentManager.tsx | sed -n '1,220p'
printf '\n--- root excerpt ---\n'
nl -ba src/routes/__root.tsx | sed -n '1,260p'Repository: TanStack/tanstack.com
Length of output: 1290
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Search for c15t usage and any provider placement.
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'ConsentManagerProvider|c15t|gtag|ConsentBanner|ConsentDialog|alwaysLoad' src . || trueRepository: TanStack/tanstack.com
Length of output: 6447
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Check for c15t integration docs or comments that clarify expected bootstrap timing.
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'c15t|ConsentManagerProvider|alwaysLoad|hydration|SSR|bootstr' README* docs src package.json . || trueRepository: TanStack/tanstack.com
Length of output: 50377
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# If the repo has package metadata, identify c15t package versions to reason about runtime expectations.
cat package.json 2>/dev/null | sed -n '1,220p' || trueRepository: TanStack/tanstack.com
Length of output: 5647
🌐 Web query:
c15t React provider mount first render consent manager hydration gtag alwaysLoad docs
💡 Result:
In the c15t consent manager system, the 'alwaysLoad' option is used for third-party scripts that must be present from the start of the page load, such as Google Tag Manager or gtag.js [1][2][3]. When 'alwaysLoad' is set to true, the script is injected into the DOM immediately, regardless of the user's current consent state [1][2]. Regarding the behavior during mount and hydration: 1. Consent Initialization: When the ConsentManagerProvider mounts, it creates a cached consent runtime and reads stored consent from the browser (e.g., localStorage/cookies) [4]. 2. Google Tag Handling: For 'alwaysLoad' integrations like gtag.js, c15t automatically initializes the vendor with Consent Mode v2 defaults set to 'denied' before any user interaction occurs [2][3]. This ensures that while the script is present, data transmission is suppressed until explicit consent is granted [2][3]. 3. Hydration and First Render: To prevent hydration mismatches or consent banner flashes, it is recommended to use server-side utilities to fetch initial consent data (e.g., 'fetchSSRData' or 'fetchInitialData') and pass this as a promise to the provider's 'ssrData' option [5][6][7]. This allows the provider to initialize with the correct state on the first render rather than waiting for a client-side API fetch [4][7]. 4. Stability: Mounting the provider as high as possible in the React tree is advised to avoid remounting during client-side navigation, which keeps the consent state stable [8]. You do not need to manually wrap calls to vendor SDKs (like gtag) in consent checks if they are correctly integrated via 'alwaysLoad', as the vendor's internal Consent Mode API handles the suppression [2][3]. If the integration is not 'alwaysLoad', the script will remain blocked until the relevant consent category is granted [1][9].
Citations:
- 1: https://c15t.com/docs/shared/react/guides/script-loader
- 2: https://c15t.com/docs/integrations/google-tag
- 3: https://c15t.com/docs/integrations/google-tag-manager
- 4: https://c15t.com/docs/shared/concepts/initialization-flow
- 5: https://c15t.com/docs/frameworks/react/troubleshooting
- 6: https://c15t.com/docs/frameworks/next/troubleshooting
- 7: https://c15t.com/docs/frameworks/react/server-side
- 8: https://c15t.com/docs/frameworks/react/optimization
- 9: https://c15t.com/docs/integrations/overview
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Read the relevant file sections with a fallback that does not rely on nl.
sed -n '1,140p' src/components/ConsentManager.tsx
printf '\n---\n'
sed -n '220,320p' src/routes/__root.tsx
printf '\n---\n'
sed -n '1,140p' src/server.tsRepository: TanStack/tanstack.com
Length of output: 8987
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect c15t docs in local dependency references if present in lockfile or package metadata.
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'alwaysLoad|ssrData|fetchSSRData|fetchInitialData|ConsentManagerProvider' pnpm-lock.yaml package.json src docs .agents || trueRepository: TanStack/tanstack.com
Length of output: 386
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '320,430p' src/routes/__root.tsx
printf '\n---\n'
sed -n '1,120p' src/utils/analytics/providers/google.tsRepository: TanStack/tanstack.com
Length of output: 2079
Keep ConsentManagerProvider mounted from the first render. The early return defers c15t initialization until after hydration, so the consent runtime and Google Tag alwaysLoad setup start late. Move only the hydration-specific workaround into ConsentBanner/ConsentDialog, or use c15t’s SSR data path.
🤖 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/components/ConsentManager.tsx` around lines 54 - 58,
`ConsentManagerProvider` is returning early until after hydration, which delays
c15t initialization and the Google Tag `alwaysLoad` setup. Keep
`ConsentManagerProvider` mounted on the first render and move only the
hydration-stability workaround out of this path, ideally into `ConsentBanner`
and `ConsentDialog` or by using c15t’s SSR data path. Preserve the provider’s
setup logic so the runtime starts immediately while still avoiding hydration
mismatch.
1 participant
Summary by CodeRabbit
New Features
Bug Fixes