Nuxt analytics, error tracking and uptime

Analytics: one entry in app.head

1. 1

   Add the script in nuxt.config.ts

   Nuxt renders app.head into every page, on the server and in nuxt generate output. Quoted keys like "data-app" come out as attributes on the tag. No cookies, no banner.

   // nuxt.config.ts
   export default defineNuxtConfig({
     app: {
       head: {
         script: [
           { src: "https://bugotter.com/bo.js", defer: true, "data-app": "YOUR_APP_ID" },
         ],
       },
     },
   });

   Show all 10 lines

2. 2

   Route changes are page views

   Nuxt's router changes pages with history.pushState, which the script follows. Each new path counts once, with its own time on page, scroll depth and Web Vitals. Keep private pages out with "data-exclude": "/dashboard" in the same object.

3. 3

   Goals from components

   Call window.bo?.track() in an event handler, never at the top of <script setup>: that part also runs on the server, where there's no window. Forms, file downloads and outbound links are counted with no code.

   <!-- app/components/UpgradeButton.vue -->
   <script setup lang="ts">
   const props = defineProps<{ plan: string }>();
   function upgrade() {
     window.bo?.track("upgrade_click", { plan: props.plan });
   }
   </script>
   
   <template>
     <button @click="upgrade">Upgrade</button>
   </template>

   Show all 11 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

npx bugotter init --token bo_… writes your keys (BUGOTTER_DSN, BUGOTTER_PROJECT, BUGOTTER_KEY) to .env.local, or to .env if that's the file you have. Nuxt reads .env in development, so keep them there. It prints the tag for you to place in nuxt.config.ts.

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/nuxt on the server, sent to BugOtter

1. 1

   Install the module

   npm install @sentry/nuxt

2. 2

   Add it, without Sentry's source map upload

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ["@sentry/nuxt/module"],
     sentry: {
       sourcemaps: { disable: true }, // maps go to BugOtter, not Sentry
       telemetry: false,
     },
     sourcemap: { client: "hidden" },
   });

   Show all 9 lines

3. 3

   Init it with your DSN, server only

   // sentry.server.config.ts (project root)
   import * as Sentry from "@sentry/nuxt";
   
   Sentry.init({
     dsn: process.env.BUGOTTER_DSN, // process.env: runtime config isn't ready this early
     dataCollection: { userInfo: false, cookies: false, httpBodies: [], databaseQueryData: false },
   });

   The dataCollection line is for SDK v11; on v10 use sendDefaultPii: false. Leave out tracesSampleRate: BugOtter keeps errors, not traces. Don't add sentry.client.config.ts.

On the Cloudflare presets, sentry.server.config.ts isn't used, and Sentry's Cloudflare Nitro plugin takes its place (see Sentry's Nuxt deployment notes). Node, Vercel and Netlify presets work as shown.

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

// server/api/health.get.ts
export default defineEventHandler(async () => {
  await useDatabase().sql`select 1`; // or your own client: prove the database answers
  return { 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 Nuxt config reference (app.head, sourcemap), Nitro route rules, and Sentry's Nuxt install guide. The sourcemaps.disable option is from the @sentry/nuxt 11.10 module source. BugOtter isn't affiliated with Sentry or Nuxt.