Add Vident to React

Set up error tracking, session replay, and Web Vitals in React apps. Works with Create React App, Vite, and custom setups.

Features

Two-line setup with createVidentBrowser()
Session replay with DOM recording
Core Web Vitals (LCP, CLS, INP)
React Router integration for page views

Setup

Install

npm install vident-browser

src/main.tsx

import { createVidentBrowser } from 'vident-browser';

// Initialize before React renders
createVidentBrowser({
  apiKey: import.meta.env.VITE_VIDENT_API_KEY,
});

import { createRoot } from 'react-dom/client';
import App from './App';

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

Route tracking (React Router)

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { trackPageView } from 'vident-browser';

function App() {
  const location = useLocation();

  useEffect(() => {
    trackPageView({ path: location.pathname });
  }, [location]);

  return <Routes>{/* ... */}</Routes>;
}

Other Frameworks

Add Vident to Next.js

Add Vident to Vue

Add Vident to Angular

Add Vident to Any Website

Start catching errors in minutes

Create your free account and add Vident to your app. Two lines of code, no credit card.

Get started free