React

React (Vite, CRA, Remix client) + @millimetric/track.

Install

npm i @millimetric/track

Init at the root

// src/main.tsx (Vite)
import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { init } from "@millimetric/track";
import App from "./App";

function Analytics({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    init({
      key: import.meta.env.VITE_AOA_KEY!,
      host: import.meta.env.VITE_AOA_HOST ?? "https://api.millimetric.ai"
    });
  }, []);
  return <>{children}</>;
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Analytics>
      <App />
    </Analytics>
  </StrictMode>
);

The SDK auto-fires $pageview on init and on every history.pushState / popstate, so React Router and Tanstack Router are handled without extra wiring.

Identify on login

import { useEffect } from "react";
import { identify } from "@millimetric/track";
import { useUser } from "./auth";

export function IdentifyOnAuth() {
  const user = useUser();
  useEffect(() => {
    if (user) identify(user.id, { email: user.email, plan: user.plan });
  }, [user?.id]);
  return null;
}

Drop <IdentifyOnAuth /> once near the top of your tree — usually next to your auth provider.

Track on intent

import { track } from "@millimetric/track";

export function PricingCard({ plan }: { plan: "free" | "pro" }) {
  return (
    <button onClick={() => track("clicked_pricing", { plan })}>
      Choose {plan}
    </button>
  );
}

A tiny custom hook (optional)

import { useCallback } from "react";
import { track } from "@millimetric/track";

export function useTrack() {
  return useCallback(
    (event: string, properties?: Record<string, unknown>) => track(event, properties),
    []
  );
}

It's a one-liner — no global provider needed. The SDK is its own singleton.

React Router — manual page() if you turn off auto

Auto-pageviews handle most apps. Turn them off only if you need full control:

init({ key, autoPageView: false });

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { page } from "@millimetric/track";

export function ManualPageviews() {
  const location = useLocation();
  useEffect(() => {
    page(location.pathname);
  }, [location.pathname]);
  return null;
}

React Server Components / SSR

Don't call SDK functions in components rendered on the server — the SDK reads localStorage and navigator. Mark anything analytics-related "use client" (Next.js / RSC) or render it inside a client-only boundary (Remix ClientOnly).

For Next.js specifically, see the Next.js page.

Tracking errors / boundaries

import { Component } from "react";
import { track } from "@millimetric/track";

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

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    track("ui_error", {
      message: error.message,
      component_stack: info.componentStack?.slice(0, 1000)
    });
  }

  render() {
    return this.state.hasError ? <p>Something went wrong.</p> : this.props.children;
  }
}