SvelteKit analytics, error tracking and uptime

Analytics: one line in src/app.html

1. 1

   Add the script to the page shell

   src/app.html is the HTML every page starts from, so it's the one place to add the tag. npx bugotter init --token bo_… finds it and adds the tag for you, and writes your keys to .env.local.

   <!-- src/app.html -->
   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <script defer src="https://bugotter.com/bo.js" data-app="YOUR_APP_ID"></script>
       %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
       <div style="display: contents">%sveltekit.body%</div>
     </body>
   </html>

   Show all 13 lines

2. 2

   Client-side navigation is counted

   SvelteKit's router moves between pages with history.pushState. The script follows it, so each new path is a page view with its own time on page, scroll depth and Web Vitals. Keep signed-in pages out with data-exclude="/app,/account" on the tag.

3. 3

   Goals from any component

   Call window.bo?.track() in an event handler. Form submissions, including use:enhance forms, file downloads and outbound links are counted with no code.

   <!-- src/routes/pricing/+page.svelte -->
   <script lang="ts">
     let plan = $state("pro");
   </script>
   
   <button onclick={() => window.bo?.track("upgrade_click", { plan })}>
     Upgrade
   </button>

   Add the type to src/app.d.ts (it already has a declare global block):

   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/sveltekit with your BugOtter DSN

1. 1

   Install the SDK

   npm install @sentry/sveltekit

2. 2

   Turn on server instrumentation and init

   // svelte.config.js (SvelteKit 2.31 or newer)
   const config = {
     kit: {
       adapter: adapter(),
       experimental: { instrumentation: { server: true } },
     },
   };

   Then init the SDK with your DSN, in its own file next to hooks.server.ts:

   // src/instrumentation.server.ts
   import * as Sentry from "@sentry/sveltekit";
   
   Sentry.init({
     dsn: "YOUR_BUGOTTER_DSN", // from your app's page; it can only send errors
     dataCollection: { userInfo: false, cookies: false, httpBodies: [], databaseQueryData: false },
   });

   On SvelteKit older than 2.31, put the same Sentry.init call at the top of src/hooks.server.ts instead. The dataCollection line is for SDK v11; on v10 use sendDefaultPii: false.

3. 3

   Catch errors in hooks

   handleErrorWithSentry reports unexpected errors from load functions, form actions and endpoints. Don't add a hooks.client.ts init: the script covers the browser.

   // src/hooks.server.ts
   import * as Sentry from "@sentry/sveltekit";
   import { sequence } from "@sveltejs/kit/hooks";
   
   export const handleError = Sentry.handleErrorWithSentry();
   export const handle = sequence(Sentry.sentryHandle() /*, your own handle */);

On adapter-cloudflare, Sentry's SvelteKit SDK needs its extra Cloudflare setup from Sentry's docs. The Node, Vercel and Netlify adapters 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

// src/routes/api/health/+server.ts
import { json } from "@sveltejs/kit";
import { db } from "$lib/server/db";

export async function GET() {
  await db.execute("select 1"); // prove the database answers, not just the server
  return 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 SvelteKit's docs on project structure, routing and hooks, and Sentry's SvelteKit manual setup. BugOtter isn't affiliated with Sentry or Svelte.