React error tracking installation

npm install posthog-js @posthog/react

VITE_PUBLIC_POSTHOG_KEY=<ph_project_api_key>
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { PostHogProvider } from '@posthog/react'

const options = {
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
  defaults: '2026-01-30',
} as const

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <PostHogProvider apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY} options={options}>
      <App />
    </PostHogProvider>
  </StrictMode>
)

import { usePostHog } from '@posthog/react'

function MyComponent() {
    const posthog = usePostHog()

    function handleClick() {
        posthog.capture('button_clicked', { button_name: 'signup' })
    }

    return <button onClick={handleClick}>Sign up</button>
}

import posthog from 'posthog-js'

export function trackPurchase(amount: number) {
    posthog.capture('purchase_completed', { amount })
}

posthog.capture('my_custom_event', { property: 'value' })

import { PostHogProvider, PostHogErrorBoundary } from '@posthog/react'
const Layout = () => {
  return (
    <PostHogProvider apiKey="<ph_project_api_key>">
      <PostHogErrorBoundary
        fallback={<YourFallbackComponent />} // (Optional) Add a fallback component that's shown when an error happens.
      >
        <YourApp />
      </PostHogErrorBoundary>
    </PostHogProvider>
  )
}
const YourFallbackComponent = ({ error, componentStack, exceptionEvent }) => {
  return <div>Something went wrong. Please try again later.</div>
}

posthog.captureException(error, additionalProperties)