Skip to main content
Autter Runtime tracks runtime errors and usage from your frontend and backend with two small packages and one ingest endpoint. This guide takes you from zero to seeing data in ClickHouse.
Prefer to have an AI coding agent set this up for you? See AI agent skills — npx skills add Autter-dev/autter-skills --all, then tell your agent “install Autter Runtime in this project.”

Concepts

Two kinds of keys — never mix them up: Two ways to send browser events:
  • Relay (recommended, including static sites) — the browser posts to a same-origin route on your server, Worker, or edge function, which forwards to the ingester with your server key. No key in the browser, immune to ad-blockers, no CSP changes. See Stack integrations for the serverless relay.
  • Direct (lossy fallback for pure-static only) — the browser posts straight to the ingester with a publishable client key. Ad-blockers silently drop these cross-origin requests.
What is never sent: cookies, DOM content, form values, request/response bodies, headers, emails, full URLs with query strings.
1

Run the ingester

For a local try-out, clone the repo and start ClickHouse plus the ingester with Docker Compose:
For real deployments, see Self-hosting or use Autter’s hosted ingester at otlp.autter.dev.
2

Instrument your backend

Create instrument.cjs — it must load before your app:
Reuse your existing SDK initialization if you already have one. The example opts into bounded, local slow-request trace retention. Set GIT_SHA to the deployed commit SHA. See Endpoint regressions for metric requirements and retention limits.This records HTTP request metrics and captures crashes. For handled errors:
3

Instrument your frontend

Add a relay route to your backend (the key stays server-side):
Then initialize the tracker in your frontend entry point:
No backend? See the direct setup and full walkthrough in Installation.
4

Verify data is flowing

In a local test environment, trigger a test error, then query ClickHouse. In production, inspect existing traffic instead; do not generate artificial errors or requests:
With the local Compose setup: docker compose exec clickhouse clickhouse-client --password dev.

Production checklist

  • Server keys only in backend env vars; client keys only where a relay is genuinely impossible.
  • Client keys have allowedOrigins set to your exact app origins.
  • release is wired to your git SHA in both frontend and backend — it powers regression detection (“broke in release X”).
  • Keep trace sampling at ~1% (traceSampleRate) — errors are always captured regardless.
  • Check export volume after enabling retainTracesAboveMs. The platform rollout does not enable this option in existing applications.
  • The relay route keeps its built-in per-IP rate limit, or your WAF covers it (perIpRateLimit: false).
  • Direct browser ingest: your CSP includes connect-src https://your-ingester…, and you accept that ad-blockers may drop some events (the relay avoids this).
  • The ingester’s /healthz is wired to your load balancer health check.

Installation

Install the right package for your stack, including Next.js.

Stack integrations

Per-stack setup for React, Node, Next.js, Go, Rust, and any OpenTelemetry SDK.