Track AI crawlers on React Router

This guide adds the Notra tracker to a React Router app in framework mode in about five minutes, and you only touch one file, app/root.tsx.

The Traffic page has a Copy agent prompt button. Paste the prompt into Claude Code, Cursor or Codex and the agent runs these steps for you.

Get your token

Open Traffic in the GEO sidebar. Until the first event arrives the page shows No activity yet with the full install panel: Install the package, Set your token and Add the proxy. The token appears in the Set your token section, and the Copy agent prompt button copies an instruction block you can paste into a coding agent.Install the same project token on every domain the project tracks, and add extra hostnames under Tracked domains in GEO settings.

Install the package

npm install @usenotra/geo

yarn add @usenotra/geo

pnpm add @usenotra/geo

bun add @usenotra/geo

The package has zero dependencies and no Node APIs in the core, so it runs on edge runtimes. You can also install it with npm, pnpm or yarn.

Set the environment variable

Add the token as NOTRA_GEO_TOKEN in your site’s environment variables, both locally and at your hosting provider, and never hardcode or commit it.

Add the tracker

app/root.tsx

import { createGeoMiddleware } from "@usenotra/geo/react-router";
import type { Route } from "./+types/root";

const geo = createGeoMiddleware({
  token: process.env.NOTRA_GEO_TOKEN!,
  endpoint: "https://ingest.usenotra.com",
});

export const middleware: Route.MiddlewareFunction[] = [geo];

Root middleware runs on every server request. The tracker sends the event after your loaders and render have produced the response, so the visitor never waits for it, and it passes the response and errors through unchanged. If app/root.tsx already exports middleware, add geo to that array.React Router 8 always runs middleware. On React Router 7, upgrade to 7.9 or later and turn middleware on:

react-router.config.ts

import type { Config } from "@react-router/dev/config";

export default {
  future: { v8_middleware: true },
} satisfies Config;

Keep the send alive on serverless hosts

Long-running Node servers such as react-router-serve or Express need nothing extra. Serverless hosts can stop the function once the response is sent, so pass your host’s waitUntil to let the send finish:

import { waitUntil } from "@vercel/functions";

const geo = createGeoMiddleware({
  token: process.env.NOTRA_GEO_TOKEN!,
  endpoint: "https://ingest.usenotra.com",
  waitUntil,
});

import { waitUntil } from "cloudflare:workers";

const geo = createGeoMiddleware({
  token: process.env.NOTRA_GEO_TOKEN!,
  endpoint: "https://ingest.usenotra.com",
  waitUntil,
});

On Vercel, install @vercel/functions first.

Deploy and verify

After you deploy your site, the Traffic page switches from the install panel to the dashboard once Notra stores the first AI crawler visit or referral. Crawlers visit on their own schedule, so the first event can take a while on a quiet site.

AI traffic

Install the tracker

Reference

Troubleshooting

Track AI crawlers on React Router

Next steps

Tracker reference

Journey tagging

​Next steps

Tracker reference

Journey tagging

Next steps