React SPA Setup

Using Next.js? Use the Next.js Quickstart instead — it includes server-side monitoring too.

Install

npm install @deeptracer/react

pnpm add @deeptracer/react

yarn add @deeptracer/react

bun add @deeptracer/react

Add the provider

Wrap your app with DeepTracerProvider. This captures browser errors automatically.

src/main.tsx

import { DeepTracerProvider } from "@deeptracer/react"

function App() {
  return (
    <DeepTracerProvider
      config={{
        apiKey: import.meta.env.VITE_DEEPTRACER_KEY,
        endpoint: import.meta.env.VITE_DEEPTRACER_ENDPOINT,
      }}
    >
      <YourApp />
    </DeepTracerProvider>
  )
}

Environment variable names depend on your build tool:

Vite: VITE_DEEPTRACER_KEY, VITE_DEEPTRACER_ENDPOINT
Create React App: REACT_APP_DEEPTRACER_KEY, REACT_APP_DEEPTRACER_ENDPOINT
Next.js: Use the Next.js Quickstart instead

Log custom events

Use the useLogger hook anywhere in your app:

src/components/CheckoutButton.tsx

import { useLogger } from "@deeptracer/react"

export function CheckoutButton() {
  const logger = useLogger()

  const handleClick = () => {
    logger.info("Checkout started", { cartItems: 3 })
  }

  return <button onClick={handleClick}>Checkout</button>
}

Add an error boundary

Catch React rendering errors and report them automatically:

src/App.tsx

import { DeepTracerErrorBoundary } from "@deeptracer/react"

function App() {
  return (
    <DeepTracerProvider config={{ /* ... */ }}>
      <DeepTracerErrorBoundary>
        <YourApp />
      </DeepTracerErrorBoundary>
    </DeepTracerProvider>
  )
}

What's next?

User context — Attach user info to all events
Error capture — Manual error reporting with severity and breadcrumbs
Full configuration — All config options

Install

Add the provider

Log custom events

Add an error boundary

What's next?

On this page