Skip to content

Add step property to onboarding_skipped PostHog event #298

Description

@parsakhaz

What

Add a step property to the onboarding_skipped PostHog event so we can see exactly which step the user was on when they clicked "Skip."

Why

Right now the skip event fires with no metadata:

// frontend/src/components/OnboardingDialog.tsx, line 464
capture('onboarding_skipped');

We know from PostHog data that 79 of 120 users skip onboarding each month (66% skip rate), and we've confirmed through funnel analysis that the GitHub CLI setup step is where most users bail — but we had to infer this manually by comparing event counts across onboarding_started, onboarding_github_cli_setup_started, and onboarding_github_cli_ready.

With a step property on the skip event, future data pulls will immediately show which step is causing skips without manual funnel analysis.

Where

File: frontend/src/components/OnboardingDialog.tsx

The onboarding dialog has these states (starting at line 552):

  1. detecting — "Checking your setup..." spinner (line 545-549)
  2. ghReady — happy path, "Start developing with Pane" (line 554)
  3. !gitInstalled — "Git Required" (line 625)
  4. !ghInstalled — "GitHub CLI Required" with install link (line 637)
  5. gitInstalled but not ghReady — "Connect GitHub for Pane" with terminal auth (line 652)

The skip button is rendered in the ModalFooter at line 714/721 and calls handleSkip at line 463.

How

Change handleSkip to pass the current step as a property:

const handleSkip = async () => {
  let currentStep = 'unknown';
  if (step === 'detecting') {
    currentStep = 'detecting';
  } else if (!env) {
    currentStep = 'detecting';
  } else if (env.ghReady) {
    currentStep = 'ready';
  } else if (!env.gitInstalled) {
    currentStep = 'git_required';
  } else if (!env.ghInstalled) {
    currentStep = 'gh_install_required';
  } else {
    currentStep = 'gh_auth_required';
  }
  
  capture('onboarding_skipped', { step: currentStep });
  await markOnboardingComplete();
  onClose();
};

The step values should match the UI states:

Value What the user sees
detecting "Checking your setup..." spinner
ready Happy path (unlikely to skip here, but possible)
git_required "Git Required" + install link
gh_install_required "GitHub CLI Required" + install link
gh_auth_required "Connect GitHub for Pane" + terminal auth

How to verify

  1. Build and run Pane locally
  2. Clear the onboarding preference so the dialog shows: in dev tools, run await window.electron.invoke('preferences:set', 'onboarding_repo_setup', '') (or delete the preference)
  3. Relaunch — onboarding dialog should appear
  4. Click "Skip" at different steps
  5. Check PostHog (or the dev console network tab for the capture call) — the onboarding_skipped event should now include a step property matching the table above

Expected result in PostHog

After this ships, a PostHog query like:

SELECT properties.step, count() 
FROM events 
WHERE event = 'onboarding_skipped' 
  AND timestamp >= now() - interval 30 day 
GROUP BY properties.step 
ORDER BY count() DESC

Should show something like:

gh_auth_required:    45
gh_install_required: 25
detecting:            5
git_required:         3
ready:                1

This tells us immediately where the friction is without needing to cross-reference multiple events.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions