All the parts

Build · Add powers

Observability

How will I know when something breaks, before my users tell me?

What it is

Once real people use your app, things will fail in ways you cannot see. Observability tools tell you: error trackers catch crashes with the exact line, logs record what happened, metrics show trends like speed, analytics shows what users do, and uptime checks tell you when the site is down. You do not need all five on day one.

It is the dashboard lights in a car: you do not drive differently, but you find out about trouble before the engine dies.

Add it when Real users depend on your app, or you have ever asked 'did that work in production?'

It can wait when You are the only user and you watch it run on your own machine.

1 Which one should I pick?

Answer what you can. The ranking updates as you go, and you can ignore it if you disagree.

What do you want to learn?
How big is your setup?
What matters most right now?

Most people start with

2 Side by side

Three pips is strong, one is weak. Pick a row to read about it below.

OptionQuick to set upCheap while smallEasy to leaveRoom to growPrice
Free tier, then by number of events
Free tier on some, then pay per amount stored
Free tier, then by number of checks
Free tier or open source, then per host or per metric
Free tier, then pay per event

3 Look closer, then wire it in

Managed service

Sentry

Catches crashes in your app and shows the exact line, user and steps.

Pick it when You want to hear about errors the moment they happen, with the details to fix them.

Skip it if You want to track business numbers or server health; it is for errors first.

  • Setup in Next.js takes a few minutes
  • Groups repeats into one issue
  • Emails or messages you on new errors
  • Can get noisy until you filter
  • Volume-based pricing
Quick to set up
Cheap while small
Easy to leave
Room to grow

PriceFree tier, then by number of events

How to connect it

  1. Create a project in Sentry and copy its DSN, the address your app sends errors to.
  2. Run the Next.js setup wizard, which adds config files.
  3. Set the DSN in your environment.
  4. Trigger a test error, then add an alert rule to message you.
Put these in your .env file
  • NEXT_PUBLIC_SENTRY_DSN
  • SENTRY_AUTH_TOKEN
sentry.client.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.1, // watch a tenth of requests for speed
});

// anywhere in your code
Sentry.captureException(new Error("checkout failed"));

4 Watch it work

Press play, or step through one message at a time.

Press Play to watch it run · 7 steps

An error happens, the SDK reports it, and the tool alerts you with the details.

From a crash to your phoneAn error happens, the SDK reports it, and the tool alerts you with the details.Click PayCode throws an errorSDK sends the error, stack and user idFriendly error pageGroup with similar errorsAlert: new error in checkoutOpen the issue, see the line
  • Client
  • Service
  • External API
Text description
  1. User → Your app: Click Pay
  2. Your app: Code throws an error
  3. Your app sends (async) to Error tracker: SDK sends the error, stack and user id
  4. Your app replies to User: Friendly error page
  5. Error tracker: Group with similar errors
  6. Error tracker sends (async) to You: Alert: new error in checkout
  7. You → Error tracker: Open the issue, see the line

5 Mistakes to skip

  • Logging secrets, tokens or personal data.

    Log ids, not private values, and scrub fields like password before sending.

  • Setting up alerts that fire all day.

    Alert only on what needs action, or you will learn to ignore them all.

  • Adding monitoring only after the first outage.

    Add an error tracker and an uptime check before launch. They take minutes.

See where it sits in a whole app

The stack builder draws your product with observability in it and animates a request through it.

Open the stack builder

Works closely with