> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tracelit.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Tracelit watches your frontend and your backend — then turns real failures into pull requests. Session replay, OpenTelemetry, incidents, and AI fixes in one workspace.

<img src="https://mintcdn.com/tracelit/Mdr8MXu5ncxQ7PIu/images/dashboard-overview.png?fit=max&auto=format&n=Mdr8MXu5ncxQ7PIu&q=85&s=88641051e5a729ef48d846e7a136a55b" alt="Tracelit dashboard spanning frontend sites and backend services" className="rounded-lg" width="1390" height="1244" data-path="images/dashboard-overview.png" />

## What Tracelit is

Tracelit is the monitoring stack you reach for when something breaks in production — on the **website** *and* the **API**.

One workspace. Two surfaces:

| Surface                | You install                      | You get                                                  |
| ---------------------- | -------------------------------- | -------------------------------------------------------- |
| **Sites** (frontend)   | One script / `@tracelit/tracker` | Session replay, heatmaps, JS & API errors, live visitors |
| **Services** (backend) | OpenTelemetry → Tracelit ingest  | Logs, traces, metrics, fingerprinted incidents           |

Then the part vibe coders actually care about: when something spikes, Tracelit can **explain it**, draft a fix, and **open a PR**. You review. Merge when you're ready.

<Note title="The loop">
  Detect → explain → PR. Same flow for a rage-click checkout bug and a panicking Go handler.
</Note>

***

## Frontend — Sites

Drop the tracker on any site. No cookies. No PII by default. Under 20 KB.

| Feature                                                                             | What you get                                                                                              |
| ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| <Icon icon="video" /> **[Session replay](/features/session-replay)**                | Watch what the user saw — scrolls, clicks, route changes — then jump to the exact moment something failed |
| <Icon icon="fire-flame-curved" /> **Heatmaps**                                      | Click, move, and scroll heat on every page path                                                           |
| <Icon icon="triangle-exclamation" /> **[Error tracking](/features/error-tracking)** | Runtime, promise, API, resource, websocket, and long-task failures — each linked to a replay              |
| <Icon icon="tag" /> **[Feature tagging](/features/feature-tagging)**                | Mark flows like `checkout` or `onboarding` so you can filter and seek in replays                          |
| <Icon icon="user-check" /> **[Identify users](/tracking/identify-users)**           | Attach your own user IDs and traits after login                                                           |
| <Icon icon="users" /> **Live visitors**                                             | Who is on the site right now                                                                              |
| <Icon icon="gauge-high" /> **Performance**                                          | TTFB, LCP, FCP, page load — no extra setup                                                                |
| <Icon icon="shield-halved" /> **[Privacy controls](/tracking/privacy-consent)**     | Block paths, mask inputs, opt out — built for compliance without killing signal                           |

Always set `environment` to `production` or `development` when you init. Ingest only accepts those two for sites.

***

## Backend — Services

Point OpenTelemetry at Tracelit. Same workspace as your sites. Same incident and resolution loop.

| Feature                                                                     | What you get                                                                             |
| --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| <Icon icon="terminal" /> **[Structured logs](/features/structured-logs)**   | Search, filter, and tail logs correlated to `trace_id` / `span_id`                       |
| <Icon icon="sitemap" /> **[Logs & Tracing](/features/distributed-tracing)** | Request trees across HTTP, gRPC, DB, queues — auto + manual spans                        |
| <Icon icon="chart-pie" /> **[Metrics](/features/metrics)**                  | Counters, histograms, gauges, plus runtime metrics from the SDKs                         |
| <Icon icon="cube" /> **Services & Env**                                     | `local` / `development` / `production`, per-env ingest keys, repo/branch mapping         |
| <Icon icon="diagram-project" /> **[OpenTelemetry](/otel/overview)**         | Language recipes for Go, Node, Python, Java, .NET, Ruby, Rust — traces *and* log bridges |

Prefer guided setup? In the app, add a service as an engineer and Tracelit walks language → framework → logger with a live connection check.

***

## Agentic process

This is the shared brain across sites and services.

| Feature                                                                  | What you get                                                                                                       |
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| <Icon icon="triangle-exclamation" /> **[Incidents](/agentic/incidents)** | Fingerprinted issues from error spikes, new exceptions, anomalies, SLO burn — triage, acknowledge, resolve, ignore |
| <Icon icon="sparkles" /> **[Resolutions](/agentic/resolutions)**         | AI reads the failing context, writes a minimal patch, and opens a PR for review                                    |
| <Icon icon="wrench" /> **[Utilities](/agentic/utilities)**               | Gates for incidents / resolution / code analysis, repo linking, archive                                            |
| <Icon icon="code-pull-request" /> **[GitHub PR](/features/github-pr)**   | Connect a repo, optional auto-merge behind CI + confidence threshold                                               |

You stay in control. Tracelit never pushes straight to your default branch.

***

## Integrations

Wire Tracelit into how your team already ships.

| Integration                                                                          | What it does                                      |
| ------------------------------------------------------------------------------------ | ------------------------------------------------- |
| <Icon icon="github" iconType="brands" /> **[GitHub](/integrations/github)**          | Repo link, fix PRs, webhook reconciliation        |
| <Icon icon="gitlab" iconType="brands" /> **[GitLab](/integrations/gitlab)**          | Same resolution path for GitLab repos             |
| <Icon icon="bitbucket" iconType="brands" /> **[Bitbucket](/integrations/bitbucket)** | Same resolution path for Bitbucket repos          |
| <Icon icon="slack" iconType="brands" /> **Slack**                                    | Incident cards, quick actions, resolution updates |
| <Icon icon="microsoft" iconType="brands" /> **Microsoft Teams**                      | Same alert surface in Teams channels              |

***

## Pick a starting point

| You are…                                     | Start here                                                            |
| -------------------------------------------- | --------------------------------------------------------------------- |
| Shipping a site and want signal in 5 minutes | [Frontend quickstart](/quickstart)                                    |
| Wiring a backend with OpenTelemetry          | [OpenTelemetry setup](/otel/overview)                                 |
| Using React / Next / Vue / etc.              | [Frontend SDK](/installation/overview)                                |
| Ready for detect → PR                        | [Incidents](/agentic/incidents) → [Resolutions](/agentic/resolutions) |
| Tuning tracker options                       | [Configuration reference](/configuration/reference)                   |