Astro analytics, error tracking and uptime

Analytics: one script in your layout

1. 1

   Add your site in BugOtter

   Paste the URL, or import every project from Netlify, Cloudflare or Vercel. Uptime checks start right away. Your app id is on the site's page.

2. 2

   Put the script in the layout every page uses

   Most Astro sites have one base layout. Put the tag in its <head>, with is:inline so Astro leaves it alone. Every page that uses the layout is counted, with no cookies and no banner.

   ---
   // src/layouts/Layout.astro
   const { title } = Astro.props;
   ---
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <title>{title}</title>
       <script is:inline defer src="https://bugotter.com/bo.js" data-app="YOUR_APP_ID"></script>
     </head>
     <body>
       <slot />
     </body>
   </html>

   Show all 14 lines

3. 3

   View Transitions just work

   Without a client router, every Astro page is a full page load and counts on its own. With <ClientRouter />, Astro uses history.pushState, which the script follows, and it doesn't run the same head script twice. Each new path is one page view, with its own time on page and scroll depth.

4. 4

   Goals without a framework

   A content site's goals are usually a newsletter form, a download or an outbound link. Forms, file downloads and outbound clicks are counted with no code. Name a form with data-bo-name. For anything else, call window.bo?.track() from a small script:

   <!-- src/components/Newsletter.astro -->
   <form id="newsletter" data-bo-name="newsletter" action="/api/subscribe" method="post">
     <input type="email" name="email" required />
     <button>Subscribe</button>
   </form>
   
   <a href="https://github.com/you/project" data-goal="star">Star on GitHub</a>
   
   <script>
     // Astro bundles this script; it runs once per page load.
     document.querySelectorAll<HTMLElement>("[data-goal]").forEach((el) =>
       el.addEventListener("click", () => window.bo?.track(el.dataset.goal!)),
     );
   </script>

   Show all 14 lines

   Using TypeScript? Declare window.bo once:

   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: browser errors free, server errors with @sentry/astro

1. 1

   Install the SDK

   npm install @sentry/astro

2. 2

   Add the integration, server side only

   enabled.client: false keeps the Sentry browser SDK out of your pages, since the script covers the browser. sourcemaps.disable stops it trying to upload to Sentry.

   // astro.config.mjs
   import { defineConfig } from "astro/config";
   import node from "@astrojs/node";
   import sentry from "@sentry/astro";
   
   export default defineConfig({
     output: "server",
     adapter: node({ mode: "standalone" }),
     integrations: [
       sentry({
         enabled: { client: false, server: true }, // the script already catches browser errors
         sourcemaps: { disable: true },             // maps go to BugOtter, not Sentry
         telemetry: false,
       }),
     ],
     vite: { build: { sourcemap: "hidden" } },
   });

   Show all 17 lines

3. 3

   Init it with your DSN

   // sentry.server.config.ts (project root)
   import * as Sentry from "@sentry/astro";
   
   Sentry.init({
     dsn: process.env.BUGOTTER_DSN,
     // release: process.env.VERCEL_GIT_COMMIT_SHA, // on Vercel: ties errors to deploys
     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.

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

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 Astro's docs on scripts, view transitions and routing (the underscore rule), and Sentry's Astro guide and source map options. The enabled option is from the @sentry/astro 11.10 types. BugOtter isn't affiliated with Sentry or Astro.