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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions