From 3cff9088402d8cd62adc4a9f410e71e79d28beac Mon Sep 17 00:00:00 2001 From: ablaszkiewicz Date: Tue, 15 Sep 2026 13:26:57 +0200 Subject: [PATCH] Error tracking docs: recommend the error-tracking wizard command behind a flag Co-Authored-By: Claude Fable 5.1 --- .../error-tracking/installation/index.mdx | 2 +- .../_snippets/wizard-section.mdx | 2 +- .../upload-source-maps/index.mdx | 2 +- src/components/WizardCommand/index.tsx | 65 +++++++++++++++---- 4 files changed, 57 insertions(+), 14 deletions(-) diff --git a/contents/docs/error-tracking/installation/index.mdx b/contents/docs/error-tracking/installation/index.mdx index 0656d07d26af..8d94968040f2 100644 --- a/contents/docs/error-tracking/installation/index.mdx +++ b/contents/docs/error-tracking/installation/index.mdx @@ -9,7 +9,7 @@ import WizardCommand from 'components/WizardCommand' Install PostHog in seconds with our wizard by running this command in your project directory with your terminal (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt): - + Wait for it to finish and test the setup once the wizard is complete. diff --git a/contents/docs/error-tracking/upload-source-maps/_snippets/wizard-section.mdx b/contents/docs/error-tracking/upload-source-maps/_snippets/wizard-section.mdx index 2af77ab7733e..a98c6730eee7 100644 --- a/contents/docs/error-tracking/upload-source-maps/_snippets/wizard-section.mdx +++ b/contents/docs/error-tracking/upload-source-maps/_snippets/wizard-section.mdx @@ -4,4 +4,4 @@ import WizardCommand from 'components/WizardCommand' Set up source map uploading automatically with our wizard by running this command in your project directory with your terminal (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt): - + diff --git a/contents/docs/error-tracking/upload-source-maps/index.mdx b/contents/docs/error-tracking/upload-source-maps/index.mdx index 62cd716484b4..5f772e20c272 100644 --- a/contents/docs/error-tracking/upload-source-maps/index.mdx +++ b/contents/docs/error-tracking/upload-source-maps/index.mdx @@ -18,7 +18,7 @@ If your source maps are not publicly hosted, you will need to upload them during If you're using a JavaScript or TypeScript framework, set up source map uploading automatically with our wizard by running this command in your project directory with your terminal (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt): - + Otherwise, choose your platform below for manual instructions. diff --git a/src/components/WizardCommand/index.tsx b/src/components/WizardCommand/index.tsx index d04556480c6e..7060e23a4040 100644 --- a/src/components/WizardCommand/index.tsx +++ b/src/components/WizardCommand/index.tsx @@ -1,5 +1,33 @@ import React from 'react' import PlatformInstall from 'components/PlatformInstall' +import { RenderInClient } from 'components/RenderInClient' +import usePostHog from 'hooks/usePostHog' + +/** + * A subcommand that replaces `command` while a PostHog feature flag is on, so a page can + * recommend a new wizard command before it is released to everyone. + */ +export type FlagCommand = { + /** The PostHog feature flag key, evaluated in the browser. */ + flag: string + /** The subcommand to show while the flag is on, e.g. `error-tracking`. */ + command: string +} + +type WizardCommandProps = { + className?: string + command?: string + selfDriving?: boolean + slim?: boolean + variant?: 'default' | 'bordered' + onCopy?: () => void + /** + * Swap `command` for another subcommand while a feature flag is on. The server render and the + * first client render show `command`; the swap happens once flags load, or not at all when they + * do not load (an ad blocker), so the page always has a working command. + */ + flagCommand?: FlagCommand +} /** * Thin backward-compatible alias for the inline PlatformInstall command. @@ -7,24 +35,39 @@ import PlatformInstall from 'components/PlatformInstall' * WizardCommand was the original install-command component; PlatformInstall is now the single source * of truth for both rendering and command-building. This wrapper is kept so the existing * `` call sites (many in MDX prose, plus the global shortcode) render the consolidated - * component with zero changes — it owns no logic, it just maps the old prop names onto - * ``. + * component with zero changes — it maps the old prop names onto ``, + * and resolves the optional `flagCommand` rollout. */ -export default function WizardCommand({ +export default function WizardCommand({ flagCommand, ...props }: WizardCommandProps): JSX.Element { + if (!flagCommand) { + return + } + return ( + } + render={() => } + /> + ) +} + +function FlaggedWizardCommand({ + flagCommand, + command, + ...props +}: Omit & { flagCommand: FlagCommand }): JSX.Element { + const posthog = usePostHog() + const enabled = posthog?.isFeatureEnabled?.(flagCommand.flag) + return +} + +function InlineWizardCommand({ className = '', command = '', selfDriving = false, slim = false, variant = 'default', onCopy, -}: { - className?: string - command?: string - selfDriving?: boolean - slim?: boolean - variant?: 'default' | 'bordered' - onCopy?: () => void -}): JSX.Element { +}: Omit): JSX.Element { return (