Set up Overseer in your React application

React Integration

Set up Overseer in any React application (Create React App, Vite, etc.)

Installation

npm install @codmir/overseer

yarn add @codmir/overseer

pnpm add @codmir/overseer

bun add @codmir/overseer

Setup

Initialize Overseer at the entry point of your app:

// src/main.tsx or src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { init } from '@codmir/overseer';
import App from './App';

// Initialize Overseer before rendering
init({
  dsn: import.meta.env.VITE_OVERSEER_DSN,
  service: 'react-app',
  environment: import.meta.env.MODE,
  enableReplay: true,
  enablePerformance: true,
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Error Boundary

Create an error boundary component to catch and report errors:

// src/components/ErrorBoundary.tsx
import React, { Component, ReactNode } from 'react';
import { captureException } from '@codmir/overseer';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
  error?: Error;
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    captureException(error, {
      extra: { componentStack: errorInfo.componentStack },
    });
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div className="error-boundary">
          <h2>Something went wrong</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>
            Try again
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

Wrap your app with the error boundary:

// src/App.tsx
import { ErrorBoundary } from './components/ErrorBoundary';

function App() {
  return (
    <ErrorBoundary>
      <YourAppContent />
    </ErrorBoundary>
  );
}

Usage

import { captureException, addBreadcrumb, setUser } from '@codmir/overseer';

function UserProfile({ user }) {
  // Set user context when they log in
  useEffect(() => {
    setUser({
      id: user.id,
      email: user.email,
      username: user.name,
    });
  }, [user]);

  const handleAction = async () => {
    addBreadcrumb({
      category: 'user.action',
      message: 'User performed action',
      level: 'info',
    });

    try {
      await performAction();
    } catch (error) {
      captureException(error);
    }
  };

  return <button onClick={handleAction}>Do Action</button>;
}

Environment Variables

# .env (Vite)
VITE_OVERSEER_DSN=https://your-project.codmir.com/overseer

# .env (Create React App)
REACT_APP_OVERSEER_DSN=https://your-project.codmir.com/overseer