Next.js analytics, error tracking and uptime

What BugOtter gives a Next.js app

• Cookieless analytics

  One tag in the root layout. App Router navigation counts on its own, with Web Vitals per page.

• Errors from both sides

  The script catches browser errors. @sentry/nextjs sends server errors to your BugOtter DSN.

• Uptime and deploys

  Checks from three regions, a status page, and every issue tied to the deploy it started after.

Analytics: the script tag in your root layout

1. 1

   Add the script to app/layout.tsx

   Put it in <head> of the root layout. It loads after the page, sets no cookies, and needs no consent banner. Your app id is on the app's page in BugOtter.

   // app/layout.tsx
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <head>
           <script
             defer
             src="https://bugotter.com/bo.js"
             data-app="YOUR_APP_ID"
             data-release={process.env.VERCEL_GIT_COMMIT_SHA?.slice(0, 12)}
           />
         </head>
         <body>{children}</body>
       </html>
     );
   }

   Show all 16 lines

   data-release is optional. It tags browser errors with the commit, so they match the source maps you upload for that build. On Vercel the variable is set for you.

2. 2

   Route changes count on their own

   The App Router moves between pages with history.pushState. The script listens for it and for the back button, so each new path is a page view, with time on page, scroll depth and Web Vitals for each. Keep your signed-in pages out with data-exclude="/dashboard,/settings".

3. 3

   Track goals from client components

   Call window.bo?.track() from any event handler. The ?. matters: the script loads with defer, so it may not be there on the very first render. Form submissions, file downloads and outbound links are counted without code.

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

   Show all 9 lines

   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

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/nextjs on the server, pointed at BugOtter

BugOtter accepts the Sentry SDK's format. You don't need a Sentry account. You only change where the SDK sends.

1. 1

   Install the SDK

   npm install @sentry/nextjs

2. 2

   Init it in instrumentation.ts

   Next.js runs register() once when the server starts, for both the Node.js and Edge runtimes. onRequestError reports errors thrown while rendering Server Components and running route handlers and server actions.

   // instrumentation.ts (next to app/, or in src/)
   import * as Sentry from "@sentry/nextjs";
   
   export function register() {
     Sentry.init({
       dsn: process.env.BUGOTTER_DSN,
       release: process.env.VERCEL_GIT_COMMIT_SHA,
       dataCollection: { userInfo: false, cookies: false, httpBodies: [], databaseQueryData: false },
     });
   }
   
   // Errors thrown in Server Components, route handlers and server actions
   export const onRequestError = Sentry.captureRequestError;

   Show all 13 lines

   The dataCollection line is for SDK v11, which collects headers, cookies and bodies unless told not to. BugOtter scrubs emails, keys and tokens before storage anyway.

   On v10 or older, use sendDefaultPii: false instead. Leave tracesSampleRate out: BugOtter doesn't store traces.

3. 3

   Skip the browser SDK

   The script tag already catches browser errors with page and request breadcrumbs. No instrumentation-client.ts, no wizard, no withSentryConfig. If you already have those, keep them, swap the DSN, and set sourcemaps: { disable: true } so the build doesn't try to upload to Sentry.

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

// app/api/health/route.ts
import { db } from "@/lib/db";
import { sql } from "drizzle-orm";

export const dynamic = "force-dynamic";

export async function GET() {
  await db.execute(sql`select 1`); // touch the database, not just the server
  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 the Next.js docs for rewrites, proxy.ts, next/script and productionBrowserSourceMaps, and Sentry's Next.js manual setup and v11 migration notes. BugOtter isn't affiliated with Sentry or Vercel.