Open Analytics
React 18 / 19, Vite, CRA & React Router

Open-source web analytics and RUM for React

Lightweight, cookieless analytics SDK for React Single Page Applications. Automatic React Router transition capture, Core Web Vitals, and runtime error triage.

Launch DashboardUniversal Integration
React Router v6 / v7 CompatibleVite & CRA SupportDynamic useEffect LoadingError Boundary HooksZero Third-Party CookiesSub-3.2KB Brotli Weight
Quick Installation
Add 1-line script tag to index.html or load dynamically in useEffect

Complete React Integration Guide

Follow these steps to track pageviews, custom events, Core Web Vitals, and errors.

1Option A: Embed directly in index.html (Recommended)

Placing the deferred script in `index.html` requires zero JavaScript build tooling changes and guarantees capture of initial page paint and errors.

index.html
<!-- index.html (before </head>) -->
<script
  defer
  src="https://api.openanalytics.org.in/open.js"
  data-project-id="prj_your_project_id"
></script>

2Option B: Dynamic Initialization via React Hook

For microfrontends or applications requiring runtime project ID injection, initialize via a custom React hook.

src/hooks/useOpenAnalytics.ts
// src/hooks/useOpenAnalytics.ts
import { useEffect } from "react";

export function useOpenAnalytics(projectId: string) {
  useEffect(() => {
    if (document.querySelector("script[data-open-analytics]")) return;
    const s = document.createElement("script");
    s.src = "https://api.openanalytics.org.in/open.js";
    s.setAttribute("data-project-id", projectId);
    s.setAttribute("data-open-analytics", "true");
    s.defer = true;
    document.head.appendChild(s);
  }, [projectId]);
}

3React Error Boundary Hook

Forward caught exceptions inside React Error Boundaries to the Open Analytics error triage console.

src/components/ErrorBoundary.tsx
// src/components/ErrorBoundary.tsx
import React from "react";

interface State { hasError: boolean; }

export class ErrorBoundary extends React.Component<{ children: React.ReactNode }, State> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    if (window.OpenAnalytics) {
      window.OpenAnalytics.captureError(error, {
        componentStack: errorInfo.componentStack,
      });
    }
  }

  render() {
    if (this.state.hasError) return <div>An unexpected error occurred.</div>;
    return this.props.children;
  }
}
Custom Events & Conversions

Custom Event Hook in React

Encapsulate conversion events in a clean reusable hook.

import { useCallback } from "react";

export function useTrackEvent() {
  return useCallback((eventName: string, props?: Record<string, unknown>) => {
    if (typeof window !== "undefined" && window.OpenAnalytics) {
      window.OpenAnalytics.track(eventName, props);
    }
  }, []);
}

// Usage inside a React component:
// const track = useTrackEvent();
// track("newsletter_subscribed", { source: "footer_modal" });
Core Web Vitals RUM

Automated Field Performance

In React Single Page Apps, Core Web Vitals automatically collect initial load paints (LCP, FCP, TTFB) as well as continuous interaction responsiveness (INP) across user state updates without manual timer instrumentation.

Error Observability

Runtime Crash Triage

Captures unhandled errors and async promise rejections globally, with support for forwarding caught React render exceptions and component stacks from Error Boundaries directly to error logs.

Developer Questions

Frequently Asked Questions

Add Open Analytics to your React app today

Zero cookies, sub-3.2 KB payload, real-time Core Web Vitals RUM, and automated crash triage.

Launch Dashboard FreeExplore Documentation