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.
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
instrument.cjs — it must load before your app: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
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
allowedOriginsset to your exact app origins. releaseis 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
/healthzis 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.

