diff --git a/contents/blog/best-feature-flag-software-for-developers.mdx b/contents/blog/best-feature-flag-software-for-developers.mdx index 79adadfa2147..5adc05425303 100644 --- a/contents/blog/best-feature-flag-software-for-developers.mdx +++ b/contents/blog/best-feature-flag-software-for-developers.mdx @@ -210,7 +210,7 @@ DevCycle is a feature flag platform that prioritizes speed, simplicity, and tigh DevCycle supports boolean and multivariate flags, percentage rollouts, user targeting, and environment management. It integrates with GitHub and Jira for flag lifecycle management, and includes built-in stale flag detection to help teams clean up technical debt. -What sets DevCycle apart is its obsession with developer workflow. It supports CLI and IDE-first ways to work with flags, plus integrations with tools like GitHub and Jira so flags show up naturally in code review and planning. And their edge and local-bucketing style options help keep evaluation fast without you managing a full flag platform yourself. +What sets DevCycle apart is its obsession with developer workflow. It supports CLI and [IDE-first ways to work with flags](/docs/vscode-extension/flag-management), plus integrations with tools like GitHub and Jira so flags show up naturally in code review and planning. And their edge and local-bucketing style options help keep evaluation fast without you managing a full flag platform yourself. DevCycle offers a free tier for up to 1,000 MAUs, with paid plans based on MAU volume. diff --git a/contents/docs/feature-flags/cutting-costs.mdx b/contents/docs/feature-flags/cutting-costs.mdx index 2a2e3c64d76d..ae6c7df4e3df 100644 --- a/contents/docs/feature-flags/cutting-costs.mdx +++ b/contents/docs/feature-flags/cutting-costs.mdx @@ -42,7 +42,7 @@ The number of `/flags` requests and the number of `$feature_flag_called` events Active feature flags you're not using in your code are still evaluated (and charged) every time the `/flags` endpoint is called. This includes when surveys are loaded, as survey targeting evaluates all active flags to determine eligibility. - To stop charges for unused flags, you must **disable, delete, or archive** them in the PostHog UI – simply removing them from your code is not enough. + To stop charges for unused flags, you must **disable, delete, or archive** them in the PostHog UI – [simply removing them from your code](/docs/vscode-extension/stale-flag-cleanup) is not enough. diff --git a/contents/docs/feature-flags/manage-flags-ai.mdx b/contents/docs/feature-flags/manage-flags-ai.mdx index 95afee554e6d..de241eea282a 100644 --- a/contents/docs/feature-flags/manage-flags-ai.mdx +++ b/contents/docs/feature-flags/manage-flags-ai.mdx @@ -6,7 +6,7 @@ title: Manage Feature Flags with PostHog AI ## How it works -When you ask PostHog AI to create a flag, it creates it with your specified key and rollout percentage, configures targeting rules based on user properties, cohorts, or groups, and sets up variants and payloads for multivariate flags. It can also search your existing flags, identify stale flags not modified recently, and help you plan flag cleanup. +When you ask PostHog AI to create a flag, it creates it with your specified key and rollout percentage, configures targeting rules based on user properties, cohorts, or groups, and sets up variants and payloads for multivariate flags. It can also search your existing flags, identify stale flags not modified recently, and help you plan [flag cleanup](/docs/vscode-extension/stale-flag-cleanup). ## Manage existing flags diff --git a/contents/docs/getting-started/next-steps.mdx b/contents/docs/getting-started/next-steps.mdx index 1d5ce4afd354..79fc9fbbaabb 100644 --- a/contents/docs/getting-started/next-steps.mdx +++ b/contents/docs/getting-started/next-steps.mdx @@ -89,6 +89,7 @@ Read more about: - [Installing feature flags](/docs/feature-flags/installation) and [creating your first flag](/docs/feature-flags/creating-feature-flags) - [How we test in production](/product-engineers/testing-in-production) at PostHog using feature flags - [Best practices for using feature flags](/docs/feature-flags/best-practices) in your product +- [VS Code extension](/docs/vscode-extension) — manage flags, see analytics, and clean up stale flags without leaving your editor ## 8. Try PostHog AI diff --git a/contents/docs/libraries/js/index.mdx b/contents/docs/libraries/js/index.mdx index 1c368d2fd42c..93e35380f1d7 100644 --- a/contents/docs/libraries/js/index.mdx +++ b/contents/docs/libraries/js/index.mdx @@ -31,7 +31,7 @@ import IdentifyFrontendCallout from '../../_snippets/identify-frontend-callout.m -Once you've installed PostHog, see our [features doc](/docs/libraries/js/features) for more information about what you can do with it. +Once you've installed PostHog, see our [features doc](/docs/libraries/js/features) for more information about what you can do with it. You can also install the [PostHog VS Code extension](/docs/vscode-extension) to see live analytics, flag status, and session replay links inline in your code. ### Track across marketing website & app diff --git a/contents/docs/model-context-protocol/index.mdx b/contents/docs/model-context-protocol/index.mdx index c967ce0e2949..dab470fb2415 100644 --- a/contents/docs/model-context-protocol/index.mdx +++ b/contents/docs/model-context-protocol/index.mdx @@ -34,5 +34,6 @@ We're working on adding more supported tools to the wizard. If you're using anot - [Replit integration](/docs/integrations/replit): Set up PostHog with Replit Agent - [v0 integration](/docs/integrations/v0): Set up PostHog with v0 and the Vercel Flags SDK - [PostHog MCP server](https://github.com/PostHog/posthog/tree/master/services/mcp): Check out GitHub repository for the MCP server +- [PostHog VS Code extension](/docs/vscode-extension): Inline analytics, flag management, and session replay links in your editor - [Model Context Protocol](https://modelcontextprotocol.io/introduction): Learn more about the Model Context Protocol specification - [MCP: machine/copy paste](/blog/machine-copy-paste-mcp-intro): What exactly is MCP again? diff --git a/contents/docs/model-context-protocol/vscode.mdx b/contents/docs/model-context-protocol/vscode.mdx index fe753b9b6582..b4e511293883 100644 --- a/contents/docs/model-context-protocol/vscode.mdx +++ b/contents/docs/model-context-protocol/vscode.mdx @@ -8,6 +8,8 @@ import SharedContent from "./_snippets/shared.mdx" The PostHog [MCP server](https://modelcontextprotocol.io/introduction) enables VS Code to directly interact with your PostHog data – managing feature flags, querying analytics, investigating errors, and more. +> **Note:** This is different from the [PostHog VS Code extension](/docs/vscode-extension), which provides inline analytics, flag management, and session replay links directly in your editor. They complement each other. + ## Server URL | Region | URL | diff --git a/contents/docs/vscode-extension/_snippets/configuration-reference.mdx b/contents/docs/vscode-extension/_snippets/configuration-reference.mdx new file mode 100644 index 000000000000..5f9f8771bdeb --- /dev/null +++ b/contents/docs/vscode-extension/_snippets/configuration-reference.mdx @@ -0,0 +1,13 @@ +## Configuration reference + +| Setting | Description | Default | +|---|---|---| +| `posthog.additionalClientNames` | Additional variable names the extension should recognize as instances of PostHog clients (e.g., `["analytics", "ph"]`) | `[]` | +| `posthog.additionalFlagFunctions` | Additional bare function names that accept a flag key as the first argument (e.g., `["useMyFlag"]`) | `[]` | +| `posthog.detectNestedClients` | Detect PostHog clients accessed via nested member expressions like `window.posthog?.capture()` | `true` | +| `posthog.showInlineDecorations` | Show inline annotations (sparklines, flag status) in the editor | `true` | +| `posthog.inlineHintsMode` | When to show inline hints: `always` or `currentLine` | `always` | +| `posthog.staleFlagAgeDays` | Minimum number of days before a fully rolled out flag is considered stale | `30` | +| `posthog.staleFlagExcludePatterns` | Glob patterns for files and directories to exclude from stale flag scanning | `[]` | +| `posthog.useWorkspaceConfig` | Load configuration from a `.posthog.json` file in the workspace root | `true` | +| `posthog.multiProjectNotifications` | Show notifications when switching between projects in a multi-project workspace | `true` | diff --git a/contents/docs/vscode-extension/flag-management.mdx b/contents/docs/vscode-extension/flag-management.mdx new file mode 100644 index 000000000000..6d343097bd70 --- /dev/null +++ b/contents/docs/vscode-extension/flag-management.mdx @@ -0,0 +1,76 @@ +--- +title: Flag management in the VS Code extension +sidebar: Docs +showTitle: true +--- + +The VS Code extension lets you create, toggle, edit, and manage [feature flags](/docs/feature-flags) without leaving your editor. + +## Toggling flags + +You can toggle a feature flag on or off from multiple places: + +- **CodeLens** — Click the toggle action above a flag call in your code +- **Right-click context menu** — Right-click on a flag key string and select the toggle option +- **Sidebar Flags tab** — Click the toggle next to any flag in the list + +A confirmation dialog appears before the change is applied to prevent accidental toggles. The change takes effect in PostHog immediately. + + + +## Editing rollout and variants + +From the flag detail panel (accessible via **PostHog: Show Flag Detail** or clicking a flag in the sidebar), you can edit: + +- **Rollout percentage** — Adjust the percentage of users who see the flag +- **Variant configuration** — Modify variant names, weights, and distribution +- **Payloads** — Update the JSON payload associated with each variant + +Changes are saved directly to PostHog. + +## Creating flags from unrecognized keys + +When the extension detects a flag key in your code that doesn't exist in your PostHog project, it shows a **yellow underline warning**. Hover over the warning to see a quick-fix action: + +1. Click **Create Feature Flag** in the quick-fix menu +2. The extension creates the flag in PostHog using the key from your code +3. The warning disappears after the next sync + +This lets you write code with new flags first and create them in PostHog without switching context. + + + +## Generating TypeScript types + +The extension can generate TypeScript types from your feature flag payload configurations, giving you type safety when working with flag values. + +### All flags at once + +Run **PostHog: Generate Flag Types** from the command palette to generate types for all flags in your project that have payload schemas defined. + +### Individual flags + +Right-click on a flag key in your code and select **PostHog: Generate Type** to generate a type for just that flag's payload. + +The generated types reflect the structure of your flag payloads as configured in PostHog. + +## Wrapping code in flag checks + +Select a block of code, then use the context menu or command palette to **wrap it in a feature flag check**. The extension inserts the appropriate `isFeatureEnabled()` or `getFeatureFlag()` call around your selection, prompting you to choose which flag to use. + +## Other flag actions + +| Action | How to access | Command | +|---|---|---| +| **Copy flag key** | Right-click context menu or CodeLens | `PostHog: Copy Flag Key` | +| **Open in PostHog** | CodeLens or sidebar — opens the flag in your browser | `PostHog: Open in PostHog` | +| **Find all references** | Searches your workspace for every usage of a flag key | `PostHog: Find Flag References` | +| **View flag detail** | Click a flag in the sidebar | `PostHog: Show Flag Detail` | diff --git a/contents/docs/vscode-extension/index.mdx b/contents/docs/vscode-extension/index.mdx new file mode 100644 index 000000000000..91f9691dabfb --- /dev/null +++ b/contents/docs/vscode-extension/index.mdx @@ -0,0 +1,174 @@ +--- +title: VS Code extension +sidebar: Docs +showTitle: true +--- + +import ConfigurationReference from "./_snippets/configuration-reference.mdx" + +The [PostHog VS Code extension](https://marketplace.visualstudio.com/items?itemName=PostHog.posthog-vscode) brings feature flags, experiments, event analytics, and session replay data directly into your editor. It works with JavaScript, TypeScript, Go and Ruby files (`.js`, `.jsx`, `.ts`, `.tsx`, `.go`, `.rb`). + +With it, you can see live analytics data inline in your code, [manage feature flags](/docs/vscode-extension/flag-management) without leaving your editor, [clean up stale flags](/docs/vscode-extension/stale-flag-cleanup) with AST-based refactoring, and [jump to session replays](/docs/vscode-extension/session-replay) for events in your codebase. + +> **Note:** This extension is different from the [PostHog MCP server for VS Code](/docs/model-context-protocol/vscode), which enables AI agents and Copilot to interact with PostHog. The VS Code extension provides direct, visual tooling for developers in the editor. They complement each other. + +## Installation + +Install directly from your editor: + + + +VS Code +Cursor + + + + +[Install in VS Code](vscode:extension/PostHog.posthog-vscode) + + + + +[Install in Cursor](cursor:extension/PostHog.posthog-vscode) + + + + + +Or install manually: + +1. Open the Extensions panel (`Cmd+Shift+X` on Mac, `Ctrl+Shift+X` on Windows/Linux) +2. Search for **"PostHog"** +3. Click **Install** + +The extension is also available on the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=PostHog.posthog-vscode) and the [Open VSX Registry](https://open-vsx.org/extension/PostHog/posthog-vscode). + + + +> **Requirements:** +> - VS Code 1.109.0 or later +> - A PostHog account + +## Authentication + +Once installed, authenticate the extension with your PostHog account: + +1. Open the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) +2. Run `PostHog: Sign In` +3. Click the sign-in button — this opens PostHog in your browser where you authenticate via OAuth +4. Once authenticated, run **PostHog: Select Project** to choose which project to connect to + +After authenticating, the status bar at the bottom of VS Code shows your active project and last sync time. + + + +## Quick start + +Once connected, the extension immediately starts analyzing your code: + +- **SDK initialization diagnostics** help you verify that your PostHog `init()` calls are configured correctly, surfacing warnings if something looks off +- **Inline decorations** appear next to `posthog.capture()` calls showing 7-day event volume sparklines +- **Feature flag status** indicators show next to `posthog.isFeatureEnabled()` and `posthog.getFeatureFlag()` calls +- **CodeLens** actions appear above flag and capture calls with contextual links +- The **sidebar** populates with your feature flags, experiments, and saved insights + + + +For details on each feature, see: + +| Feature | Description | +|---|---| +| [Inline code intelligence](/docs/vscode-extension/inline-code-intelligence) | Sparklines, flag status, autocomplete, and more | +| [Sidebar dashboard](/docs/vscode-extension/sidebar-dashboard) | Flags, experiments, analytics, and X-ray tabs | +| [Flag management](/docs/vscode-extension/flag-management) | Toggle, edit, create, and generate types for flags | +| [Stale flag cleanup](/docs/vscode-extension/stale-flag-cleanup) | Find and remove outdated flag checks | +| [Session replay](/docs/vscode-extension/session-replay) | See session and user counts, jump to replays | + +## Team configuration + +Share extension settings across your team by committing a `.posthog.json` file to your repository root: + +```json +{ + "projectId": 12345, + "additionalClientNames": ["analytics"], + "additionalFlagFunctions": ["useMyFlag"] +} +``` + +This ensures everyone on the team connects to the correct project and the extension recognizes your custom PostHog client variable names and flag wrapper functions. + +### Multi-project workspaces + +If your VS Code workspace contains multiple folders connected to different PostHog projects, the extension detects this automatically. Each folder can have its own `.posthog.json` with a different `projectId`. The extension switches context as you navigate between files in different folders. + +Set `posthog.multiProjectNotifications` to `true` (default) to get notified when the active project changes. + +### Automatic sync + +The extension periodically refreshes its cache of feature flags, experiments, and event data from PostHog. The status bar shows when the last sync occurred. You can also manually refresh with the **PostHog: Refresh Feature Flags** command. + + + +## Commands reference + +Open the command palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) and type "PostHog" to see all available commands. + +### Authentication and setup + +| Command | Description | +|---|---| +| `PostHog: Sign In` | Authenticate with your PostHog personal API key | +| `PostHog: Sign Out` | Disconnect from PostHog | +| `PostHog: Select Project` | Choose which PostHog project to use | +| `PostHog: Run Setup Wizard` | Guided setup for first-time configuration | + +### Feature flags + +| Command | Description | +|---|---| +| `PostHog: Refresh Feature Flags` | Fetch the latest flags from PostHog | +| `PostHog: Create Feature Flag` | Create a new flag in PostHog | +| `PostHog: Copy Flag Key` | Copy a flag key to the clipboard | +| `PostHog: Show Flag Detail` | Open the detail panel for a flag | +| `PostHog: Open in PostHog` | Open the flag or experiment in your browser | +| `PostHog: Find Flag References` | Search the workspace for all usages of a flag key | +| `PostHog: Generate Flag Types` | Generate TypeScript types for all flag payloads | +| `PostHog: Generate Type` | Generate a TypeScript type for a single flag (context menu) | + +### Experiments + +| Command | Description | +|---|---| +| `PostHog: Show Experiment Detail` | Open the detail panel for an experiment | + +### Session replay + +| Command | Description | +|---|---| +| `PostHog: Watch Sessions` | View sessions for an event in your browser | + +### Stale flags + +| Command | Description | +|---|---| +| `PostHog: Scan for Stale Flags` | Scan the workspace for stale feature flag references | +| `PostHog: Clean Up Stale Flag` | Remove a stale flag check from the code | + +## Further reading + +- [PostHog VS Code extension on GitHub](https://github.com/PostHog/posthog-vscode) +- [PostHog MCP server for VS Code](/docs/model-context-protocol/vscode) — AI agent integration +- [Feature flags documentation](/docs/feature-flags) diff --git a/contents/docs/vscode-extension/inline-code-intelligence.mdx b/contents/docs/vscode-extension/inline-code-intelligence.mdx new file mode 100644 index 000000000000..d7601b2ebfa7 --- /dev/null +++ b/contents/docs/vscode-extension/inline-code-intelligence.mdx @@ -0,0 +1,111 @@ +--- +title: Inline code intelligence and annotations +sidebar: Docs +showTitle: true +--- + +The VS Code extension analyzes your source code in real time and overlays PostHog data directly in the editor. It detects PostHog SDK calls — `capture()`, `isFeatureEnabled()`, `getFeatureFlag()`, and others — and annotates them with live analytics, flag status, and contextual actions. + +## SDK detection + +The extension automatically recognizes standard PostHog client patterns like `posthog.capture()`, `posthog.isFeatureEnabled()`, and similar calls. It also detects SDK initialization and shows a summary of your configuration with validation warnings if something looks off. + +### Custom client names + +If your codebase wraps the PostHog client in a custom variable, configure the extension to recognize it: + +- `posthog.additionalClientNames` — Add variable names like `["analytics", "ph"]` so the extension recognizes `analytics.capture()` the same way it recognizes `posthog.capture()`. +- `posthog.detectNestedClients` — When enabled (default), detects nested member expressions like `window.posthog?.capture()` or `this.analytics.posthog.capture()`. +- `posthog.additionalFlagFunctions` — Add bare function names like `["useMyFlag"]` that accept a flag key as the first argument. This is useful for custom hooks or wrapper functions. + +These settings can also be shared across your team via a [`.posthog.json` configuration file](/docs/vscode-extension#team-configuration). + +## Feature flag status + +Next to every `isFeatureEnabled()`, `getFeatureFlag()`, or similar call, the extension shows the current flag status: + +- **Enabled/disabled** indicator with color coding +- **Rollout percentage** for partially rolled out flags +- **Variant name** for multivariate flags +- **Experiment status** if the flag is linked to an experiment, including win/loss/inconclusive results + + + +### Unrecognized flag keys + +If you reference a flag key that doesn't exist in your PostHog project, the extension shows a **yellow underline warning**. You can use the quick-fix action to [create the flag directly from your editor](/docs/vscode-extension/flag-management#creating-flags-from-unrecognized-keys). + + + +## Event sparklines + +Every `capture()` call in your code gets a **7-day event volume sparkline** displayed inline. This shows you at a glance how frequently each event fires, helping you identify dead events or unexpected spikes without leaving your editor. + + + +### Display modes + +Control how inline hints appear with `posthog.inlineHintsMode`: + +- **`always`** (default) — Annotations are visible on every line with a detected PostHog call +- **`currentLine`** — Annotations only appear on the line your cursor is on, keeping the editor cleaner + +You can also toggle all inline decorations on or off with `posthog.showInlineDecorations`. + +## Experiment variant highlighting + +When a feature flag is part of an experiment, the extension highlights the code paths for each variant with **color coding**. This makes it easy to see which code runs for which variant at a glance. + +The extension also shows the experiment results inline — whether a variant is winning, losing, or still inconclusive. + + + +## Autocomplete + +The extension provides IntelliSense autocomplete suggestions for: + +- **Feature flag keys** — When typing a string argument to `isFeatureEnabled()` or `getFeatureFlag()` +- **Event names** — When typing a string argument to `capture()` +- **Event properties** — When typing property keys in a `capture()` properties object +- **Variant names** — When typing expected variant values + +Suggestions are pulled from your PostHog project data, so they always reflect your actual flags and events. + + + +## Typo detection + +The extension uses **Levenshtein distance matching** to detect likely typos in event names. If you type `capture("page_veiw")` but your project has an event called `page_view`, the extension flags it with a warning and suggests the correct name. + +## CodeLens + +Above each `capture()`, `isFeatureEnabled()`, and `getFeatureFlag()` call, the extension displays **CodeLens** links with contextual actions: + +- **Open in PostHog** — Jump to the flag, experiment, or event definition in your browser +- **View sessions** — See sessions where this event was triggered +- **Show detail** — Open the flag or experiment detail panel in the sidebar +- **Session and user counts** — See how many sessions and users triggered this event (see [session replay](/docs/vscode-extension/session-replay)) + +## Cmd+click navigation + +You can **Cmd+click** (or Ctrl+click) on a feature flag key or event name string to open its details directly in PostHog in your browser. This works anywhere a flag key or event name appears as a string literal in your code. diff --git a/contents/docs/vscode-extension/session-replay.mdx b/contents/docs/vscode-extension/session-replay.mdx new file mode 100644 index 000000000000..1dd7b8a5bbfd --- /dev/null +++ b/contents/docs/vscode-extension/session-replay.mdx @@ -0,0 +1,40 @@ +--- +title: Session replays in the VS Code extension +sidebar: Docs +showTitle: true +--- + +The VS Code extension connects your code to [Session Replay](/docs/session-replay) data, showing you how many sessions and users are triggering events and letting you jump directly to replays in PostHog. + +## CodeLens session and user counts + +Above each `capture()` call and feature flag check in your code, the extension shows **CodeLens indicators** with: + +- **Session count** — How many sessions triggered this event +- **User count** — How many unique users triggered this event + +These counts give you a quick sense of how actively a piece of code is being exercised in production, without needing to check PostHog separately. + + + +## Watching sessions + +To view session replays for a specific event: + +1. Click the **sessions CodeLens** link above a `capture()` call, or +2. Run **PostHog: Watch Sessions** from the command palette + +This opens the relevant session replays in PostHog in your browser, filtered to the event you selected. From there you can watch full session recordings to understand user behavior in context. + +## Connecting events to code + +The session replay integration works in both directions: + +- **Code to replays** — From a `capture()` call in your editor, jump to sessions where that event fired +- **Flags to replays** — From a feature flag check, see sessions where that flag was evaluated + +This makes it easy to go from reading code to understanding how real users interact with that code in production. diff --git a/contents/docs/vscode-extension/sidebar-dashboard.mdx b/contents/docs/vscode-extension/sidebar-dashboard.mdx new file mode 100644 index 000000000000..5c27fff43487 --- /dev/null +++ b/contents/docs/vscode-extension/sidebar-dashboard.mdx @@ -0,0 +1,72 @@ +--- +title: Sidebar dashboard in the VS Code extension +sidebar: Docs +showTitle: true +--- + +The extension adds a **PostHog panel** to the VS Code sidebar (activity bar), giving you a dashboard-like interface with tabs for feature flags, experiments, analytics, and code-level event analysis. + +## Flags tab + +The Flags tab lists all feature flags in your connected PostHog project. From here you can: + +- **Search** for flags by name or key +- **Filter** by status (enabled, disabled, etc.) +- **Toggle** flags on or off directly +- **Edit rollout** percentages and variant configurations +- **Quick actions** — copy flag key, open in PostHog, show detail panel + +This is a convenient way to manage flags without context-switching to the PostHog web interface. For more on flag management features, see [flag management](/docs/vscode-extension/flag-management). + + + +## Experiments tab + +The Experiments tab shows all experiments in your project with: + +- **Status indicators** — draft, running, or complete +- **Results summary** — significance level, winning variant +- Click on any experiment to open its **detail panel** or jump to PostHog in your browser + + + +## Analytics tab + +The Analytics tab displays your **saved insights** from PostHog. Browse through your team's charts and metrics without leaving the editor. Insights auto-refresh periodically to show current data. + +## X-ray tab + +The X-ray tab provides a deep look at the **currently open file**. It finds every `capture()` call in the file and shows **14-day event trends** for each one. + +This is useful for: + +- Understanding which events in a file are actively firing +- Spotting events that have stopped firing (potential bugs or dead code) +- Seeing relative volume between events in the same file + +The X-ray tab updates automatically as you switch between files. + + + +## Stale flags tree view + +At the bottom of the sidebar, the **stale flags tree view** shows feature flags in your codebase that may be ready for cleanup. Flags are grouped by staleness reason: + +- **Fully rolled out** — at 100% for all users +- **Inactive** — not evaluated recently +- **Experiment complete** — linked experiment has concluded +- **Not in PostHog** — flag key exists in code but not in the project + +Click on any flag to navigate to its location in the code. For the full cleanup workflow, see [stale flag cleanup](/docs/vscode-extension/stale-flag-cleanup). diff --git a/contents/docs/vscode-extension/stale-flag-cleanup.mdx b/contents/docs/vscode-extension/stale-flag-cleanup.mdx new file mode 100644 index 000000000000..5848dc6194dc --- /dev/null +++ b/contents/docs/vscode-extension/stale-flag-cleanup.mdx @@ -0,0 +1,73 @@ +--- +title: Stale flag cleanup +sidebar: Docs +showTitle: true +--- + +Over time, feature flags accumulate in codebases. Flags that were fully rolled out, linked to completed experiments, or simply forgotten can clutter your code and make it harder to reason about. The VS Code extension uses **AST-based scanning** (via tree-sitter) to find stale flag references across your project and help you remove them safely. + +## Running a scan + +Open the command palette and run **PostHog: Scan for Stale Flags**. The extension scans all JavaScript and TypeScript files in your workspace, building a tree of every feature flag reference it finds. + +Results appear in the **stale flags tree view** in the sidebar, grouped by staleness reason. + + + +### Configuration + +Two settings control how the scan behaves: + +- **`posthog.staleFlagAgeDays`** (default: `30`) — The minimum number of days a flag must have been fully rolled out before it's considered stale. Lower this if you want to catch flags sooner. +- **`posthog.staleFlagExcludePatterns`** — Glob patterns for files or directories to skip during scanning (e.g., `["**/test/**", "**/migrations/**"]`). The extension already excludes `node_modules` and common build output directories. + +## Staleness categories + +The scan classifies each flag into one of four categories: + +### Fully rolled out + +The flag is set to **100% rollout** for all users. The code path gated by this flag is always taken, so the flag check can be removed and the code kept. + +### Inactive + +The flag has **not been evaluated** in the time period defined by `posthog.staleFlagAgeDays`. This suggests it's no longer being used in production. + +### Experiment complete + +The flag is linked to an **experiment that has concluded**. The experiment results are in, and the flag check can be replaced with the winning variant's code path. + +### Not in PostHog + +The flag key exists in your code but **doesn't exist in your PostHog project**. This could mean the flag was deleted from PostHog, was created in a different project, or is a typo. + +## Navigating stale flags + +Click on any flag in the stale flags tree view to **jump to its location** in your codebase. If a flag is referenced in multiple files, the tree view shows each reference as a child node you can click individually. + +## Cleaning up a flag + +To remove a single flag check: + +1. Click the flag in the tree view (or place your cursor on the flag call in code) +2. Run **PostHog: Clean Up Stale Flag** from the command palette or context menu +3. The extension uses **AST-based refactoring** to: + - Remove the `isFeatureEnabled()` or `getFeatureFlag()` check + - Keep the code from the correct branch (the "enabled" path for fully rolled out flags, or the winning variant path for completed experiments) + - Clean up any unused `else` branches or variable declarations + +This is safer than a manual find-and-replace because the extension understands the code structure and preserves the correct code paths. + +## Batch cleanup + +To clean up multiple stale flags at once: + +1. Select multiple flags in the stale flags tree view +2. Run the cleanup action +3. Review the proposed changes before applying + +This is useful when you have a large number of stale flags to remove after a cleanup sprint. \ No newline at end of file diff --git a/src/navs/index.js b/src/navs/index.js index c9b80ac87140..19b7ee708d38 100644 --- a/src/navs/index.js +++ b/src/navs/index.js @@ -2851,6 +2851,36 @@ export const docsMenu = { name: 'Activity', url: '/docs/activity', }, + { + name: 'VS Code extension', + url: '/docs/vscode-extension', + children: [ + { + name: 'Overview', + url: '/docs/vscode-extension', + }, + { + name: 'Inline code intelligence', + url: '/docs/vscode-extension/inline-code-intelligence', + }, + { + name: 'Sidebar dashboard', + url: '/docs/vscode-extension/sidebar-dashboard', + }, + { + name: 'Flag management', + url: '/docs/vscode-extension/flag-management', + }, + { + name: 'Stale flag cleanup', + url: '/docs/vscode-extension/stale-flag-cleanup', + }, + { + name: 'Session replay', + url: '/docs/vscode-extension/session-replay', + }, + ], + }, { name: 'SDK doctor', url: '/docs/sdk-doctor', diff --git a/vercel.json b/vercel.json index 993d88bd27d6..a7dc91d1e6eb 100644 --- a/vercel.json +++ b/vercel.json @@ -13,6 +13,19 @@ { "source": "/handbook/:path*", "headers": [{ "key": "Vary", "value": "Accept" }] + }, + { + "source": "/(.*)", + "headers": [ + { + "key": "Content-Security-Policy-Report-Only", + "value": "default-src 'self'; script-src 'self' https://*.posthog.com https://www.youtube.com https://fast.wistia.com https://import-cdn.default.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://*.posthog.com https://res.cloudinary.com https://www.gravatar.com https://raw.githubusercontent.com https://obuldanrptloktxcffvn.supabase.co https://cdn.shopify.com https://i.ytimg.com https://embed-ssl.wistia.com https://fast.wistia.com https://cdn.jsdelivr.net https://user-images.githubusercontent.com https://brandbadge.clearbit.com; font-src 'self' data: https://d27nj4tzr3d5tm.cloudfront.net https://res.cloudinary.com https://fonts.gstatic.com https://r2cdn.perplexity.ai https://fast.wistia.com https://use.typekit.net; connect-src 'self' https://*.posthog.com https://api.github.com https://lottie.host https://better-animal-d658c56969.strapiapp.com https://forms.default.com https://nucleus.default.com https://import-cdn.default.com https://posthog.myshopify.com https://*.algolia.net https://*.algolianet.com https://api.io.inkeep.com https://fast.wistia.net https://fast.wistia.com https://embed-cloudfront.wistia.com https://api.inkeep.com; media-src 'self' https://d1hovhsvet4m1p.cloudfront.net https://res.cloudinary.com blob:; frame-src 'self' https://www.youtube-nocookie.com https://hogwars.vercel.app https://hedgehog-mode-playground.vercel.app; worker-src 'self' blob:; child-src 'self' blob:; object-src 'none'; frame-ancestors 'none'; report-uri https://us.i.posthog.com/report/?token=sTMFPsFhdP1Ssg&sample_rate=0.1&v=1; report-to posthog" + }, + { + "key": "Reporting-Endpoints", + "value": "posthog=\"https://us.i.posthog.com/report/?token=sTMFPsFhdP1Ssg&sample_rate=0.1&v=1\"" + } + ] } ], "rewrites": [ @@ -1837,20 +1850,5 @@ { "source": "/professional-services", "destination": "/services" }, { "source": "/posthug", "destination": "/" }, { "source": "/mcp", "destination": "/docs/model-context-protocol" } - ], - "headers": [ - { - "source": "/(.*)", - "headers": [ - { - "key": "Content-Security-Policy-Report-Only", - "value": "default-src 'self'; script-src 'self' https://*.posthog.com https://www.youtube.com https://fast.wistia.com https://import-cdn.default.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://*.posthog.com https://res.cloudinary.com https://www.gravatar.com https://raw.githubusercontent.com https://obuldanrptloktxcffvn.supabase.co https://cdn.shopify.com https://i.ytimg.com https://embed-ssl.wistia.com https://fast.wistia.com https://cdn.jsdelivr.net https://user-images.githubusercontent.com https://brandbadge.clearbit.com; font-src 'self' data: https://d27nj4tzr3d5tm.cloudfront.net https://res.cloudinary.com https://fonts.gstatic.com https://r2cdn.perplexity.ai https://fast.wistia.com https://use.typekit.net; connect-src 'self' https://*.posthog.com https://api.github.com https://lottie.host https://better-animal-d658c56969.strapiapp.com https://forms.default.com https://nucleus.default.com https://import-cdn.default.com https://posthog.myshopify.com https://*.algolia.net https://*.algolianet.com https://api.io.inkeep.com https://fast.wistia.net https://fast.wistia.com https://embed-cloudfront.wistia.com https://api.inkeep.com; media-src 'self' https://d1hovhsvet4m1p.cloudfront.net https://res.cloudinary.com blob:; frame-src 'self' https://www.youtube-nocookie.com https://hogwars.vercel.app https://hedgehog-mode-playground.vercel.app; worker-src 'self' blob:; child-src 'self' blob:; object-src 'none'; frame-ancestors 'none'; report-uri https://us.i.posthog.com/report/?token=sTMFPsFhdP1Ssg&sample_rate=0.1&v=1; report-to posthog" - }, - { - "key": "Reporting-Endpoints", - "value": "posthog=\"https://us.i.posthog.com/report/?token=sTMFPsFhdP1Ssg&sample_rate=0.1&v=1\"" - } - ] - } ] }