fix(website): use PostHog React hook instead of direct import by NicholasKissel · Pull Request #4352 · rivet-dev/rivet

NicholasKissel · 2026-03-04T07:58:54Z

Description

Switches marketing form components (SalesForm and TalkToAnEngineerForm) from importing the posthog-js singleton directly to using the usePostHog() React hook from posthog-js/react. This ensures PostHog is properly initialized within the React context and avoids potential issues with SSR or missing provider context. Optional chaining is added to safely handle cases where PostHog may not yet be available.

Type of change

Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Manual review of the changes to ensure correct React hook usage and optional chaining.

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my code
My changes generate no new warnings

Switch marketing form components from direct posthog-js module import to the React hook pattern (usePostHog) to ensure proper initialization within the React context and avoid issues with server-side rendering. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

railway-app · 2026-03-04T07:59:03Z

🚅 Deployed to the rivet-pr-4352 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
website	😴 Sleeping (View Logs)	Web	Mar 10, 2026 at 3:46 am
frontend-inspector	😴 Sleeping (View Logs)	Web	Mar 4, 2026 at 8:11 am
frontend-cloud	❌ Build Failed (View Logs)	Web	Mar 4, 2026 at 8:01 am
mcp-hub	✅ Success (View Logs)	Web	Mar 4, 2026 at 7:59 am
ladle	❌ Build Failed (View Logs)	Web	Mar 4, 2026 at 7:59 am

claude · 2026-03-04T07:59:57Z

PR Review: fix(website): use PostHog React hook instead of direct import

What This PR Does

Removes static top-level imports of posthog-js from SalesForm and TalkToAnEngineerForm and replaces them with a dynamic await import("posthog-js") inside the submit handler. A posthog.__loaded guard is used to conditionally initialize PostHog before capturing events. A leftover console.log(data) debug statement is also removed.

Issue: PR Title and Description Are Inaccurate

The PR title says "use PostHog React hook instead of direct import" and the description says it switches to usePostHog() from posthog-js/react. Neither is true. The actual implementation uses a dynamic import of the singleton directly:

const { default: posthog } = await import("posthog-js");

The description also claims optional chaining was added (posthog?.capture(...)), but no optional chaining exists in the diff. The PR description should be updated to accurately describe what was done.

Code Observations

posthog.__loaded is an internal/undocumented API

posthog.__loaded is not part of the PostHog public API. It is an internal property on the PostHog singleton instance. Relying on it is fragile — it could change or be removed in a future posthog-js update without warning. PostHog already guards against calling init() twice internally in recent versions, so the guard may be unnecessary. If it is needed, a more stable approach would be to check whether initialization is needed via a shared module-level flag rather than reading an undocumented instance property.

Hardcoded API key in component code

The PostHog project API key (phc_6kfTNEAVw7rn1LA51cO3D69FefbKupSWFaM7OUgEpEo) and host (https://ph.rivet.dev) are now hardcoded in two separate places within the component handlers. This duplicates configuration that ideally lives in a single location (e.g., an environment variable or a shared constant). If the key or host changes, both files need to be updated independently.

Dynamic import does not guarantee initialization timing

Calling posthog.init() inside the submit handler means PostHog is not initialized until the user submits the form. Any PostHog tracking that happens before form submission (e.g., page views, feature flags) would be unaffected by this initialization. If there is a PostHog provider configured elsewhere in the app tree, this in-handler init could conflict with it.

Good cleanup: Removing console.log(data) is a welcome fix.

Suggestions

Correct the PR description to match the actual implementation (dynamic import of the singleton, not a React hook).
Avoid posthog.__loaded — use a module-level initialized flag or rely on PostHog's own idempotent init() guard.
Deduplicate configuration — move the API key and host into a shared constant or environment variable rather than repeating them in two component files.
Consider the usePostHog() hook — if a PostHogProvider exists higher in the tree, the hook approach described in the PR title would be the more idiomatic React solution and would avoid the initialization complexity entirely.

pkg-pr-new · 2026-03-04T08:02:22Z

More templates

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4352

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4352

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4352

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4352

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4352

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4352

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4352

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4352

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4352

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4352

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4352

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4352

commit: 1619792

Switch from usePostHog() hook to dynamic import pattern to match the proven approach used in Providers.jsx. This avoids potential module duplication issues across Astro islands.

Astro islands have isolated module scopes, so the PostHog instance in the form island is separate from the one initialized in Providers. Ensure PostHog is initialized before capturing events.

railway-app bot had a problem deploying to rivet-frontend / rivet-pr-4352 March 4, 2026 07:59 Failure

fix(website): use dynamic import for PostHog in form components

d5183bf

Switch from usePostHog() hook to dynamic import pattern to match the proven approach used in Providers.jsx. This avoids potential module duplication issues across Astro islands.

railway-app bot temporarily deployed to rivet-frontend / rivet-pr-4352 March 4, 2026 08:29 Destroyed

fix(website): initialize PostHog in form islands before capture

8afcd1a

Astro islands have isolated module scopes, so the PostHog instance in the form island is separate from the one initialized in Providers. Ensure PostHog is initialized before capturing events.

railway-app bot deployed to rivet-frontend / rivet-pr-4352 March 4, 2026 08:33 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(website): use PostHog React hook instead of direct import#4352

fix(website): use PostHog React hook instead of direct import#4352
NicholasKissel wants to merge 3 commits intomainfrom
NicholasKissel/fix-posthog-forms

NicholasKissel commented Mar 4, 2026

Uh oh!

railway-app bot commented Mar 4, 2026 •

edited

Loading

Uh oh!

claude bot commented Mar 4, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Mar 4, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

NicholasKissel commented Mar 4, 2026

Description

Type of change

How Has This Been Tested?

Checklist:

Uh oh!

railway-app bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: fix(website): use PostHog React hook instead of direct import

What This PR Does

Issue: PR Title and Description Are Inaccurate

Code Observations

Suggestions

Uh oh!

pkg-pr-new bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

railway-app bot commented Mar 4, 2026 •

edited

Loading

claude bot commented Mar 4, 2026 •

edited

Loading

pkg-pr-new bot commented Mar 4, 2026 •

edited

Loading