React Router (Remix) analytics, error tracking and uptime

Analytics: the script in your root Layout

1. 1

   Add the script to app/root.tsx

   The Layout export renders the document for every route, including your error boundary. Put the tag in its <head>. It loads after the page, sets no cookies and needs no banner.

   // app/root.tsx
   import { Links, Meta, Scripts, ScrollRestoration } from "react-router";
   
   export function Layout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <head>
           <meta charSet="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <Meta />
           <Links />
           <script defer src="https://bugotter.com/bo.js" data-app="YOUR_APP_ID" />
         </head>
         <body>
           {children}
           <ScrollRestoration />
           <Scripts />
         </body>
       </html>
     );
   }

   Show all 21 lines

2. 2

   Navigation is counted on its own

   Links and navigate() change pages with history.pushState. The script follows that and the back button, so each new path is a page view, with time on page, scroll depth and Web Vitals for each. Keep signed-in pages out with data-exclude="/dashboard".

3. 3

   Goals from components

   Call window.bo?.track() from an event handler. The ?. covers the moment before the deferred script has loaded. Forms, downloads and outbound links need no code.

   // app/components/upgrade-button.tsx
   export function UpgradeButton({ plan }: { plan: string }) {
     return (
       <button onClick={() => window.bo?.track("upgrade_click", { plan })}>
         Upgrade
       </button>
     );
   }

   Using TypeScript? Declare window.bo once, so track() type-checks:

   declare global {
     interface Window {
       bo?: {
         track(name: string, props?: Record<string, string | number | boolean>): void;
         visitorId(): string | null;
       };
     }
   }
   export {};

   Show all 9 lines

npx bugotter init --token bo_… writes BUGOTTER_DSN, BUGOTTER_PROJECT and BUGOTTER_KEY to .env.local and prints the tag. It doesn't edit root.tsx, so paste the tag as above.

1234

1. 1
   Payments on the chart. A green marker shows the day a big payment came in.
2. 2
   Error spikes, too. A red marker lines up a bad day with the error behind it.
3. 3
   Last period, dashed, so a drop or a launch spike is obvious at a glance.
4. 4
   Bots kept out of every number, with the count one click away.

Errors: @sentry/react-router with your BugOtter DSN

1. 1

   Install the SDK

   npm install @sentry/react-router

2. 2

   Init it before the server starts

   // instrument.server.mjs (project root)
   import * as Sentry from "@sentry/react-router";
   
   Sentry.init({
     dsn: process.env.BUGOTTER_DSN,
     dataCollection: { userInfo: false, cookies: false, httpBodies: [], databaseQueryData: false },
   });

   Load it before anything else when the server starts. The same package.json also uploads source maps after the build:

   // package.json
   "scripts": {
     "build": "react-router build && npx bugotter sourcemaps build/client --delete",
     "start": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router-serve ./build/server/index.js"
   }

   The dataCollection line is for SDK v11; on v10 use sendDefaultPii: false. Leave out tracesSampleRate: BugOtter keeps errors, not traces.

3. 3

   Report errors from loaders and actions

   // app/entry.server.tsx (run `npx react-router reveal` if you don't have one)
   import * as Sentry from "@sentry/react-router";
   // On Vercel or Netlify, where you can't set NODE_OPTIONS, import it here instead:
   // import "../instrument.server.mjs";
   
   export const handleError = Sentry.createSentryHandleError({ logErrors: false });

   Skip entry.client.tsx changes: the script covers the browser, and the Sentry browser SDK would report the same errors twice.

123

1. 1
   A plain summary written from the evidence: page, browser, release and visits.
2. 2
   Fix with agent hands the whole issue to Claude Code, Cursor or Codex.
3. 3
   Where your code broke, mapped back to your file and line with your source maps.

Uptime, a status page and deploys

// add route("api/health", "routes/api.health.ts") to app/routes.ts
import { db } from "~/db.server";

export async function loader() {
  await db.execute("select 1");
  return Response.json({ ok: true });
}

123

1. 1
   Every day at a glance. Amber means a short outage that day.
2. 2
   Response time, median and p95, and the slowest region.
3. 3
   Three regions check your URL. An outage only counts when two agree.

Questions

Sources

Checked Nov 4, 2026 against React Router's docs on routes.ts and file route conventions, and Sentry's React Router manual setup. BugOtter isn't affiliated with Sentry, Shopify or the React Router team.