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

# Full-Stack Tracing

> Automatically trace requests from your client to your server and see the complete picture in one place.

When Limelight is installed on both your client and server, it automatically links outgoing client requests to their corresponding incoming server requests — giving you a unified view of the entire request lifecycle.

## How It Works

1. **Client sends a request** — The client SDK attaches an `x-limelight-trace-id` header to every outgoing `fetch` and `XHR` request
2. **Server receives the request** — The server middleware reads the trace ID from the header and associates the incoming request with the same trace
3. **Limelight correlates both sides** — In the UI, the client request and server request are grouped under the same trace, so you can inspect both in one place

This happens automatically with no extra configuration.

## What You Can See

With full-stack tracing enabled, each traced request shows:

**Client side:**

* Outgoing request URL, method, headers, and body
* Response status, headers, body, and timing
* Which React component initiated the request

**Server side:**

* Incoming request URL, method, headers, and parsed body
* Response status, headers, body, and duration
* Server-side processing time

**Combined:**

* Total round-trip time (client send → server process → client receive)
* Network latency vs. server processing time
* Matched request/response pairs under a single trace ID

## Setup

### 1. Client SDK

Add Limelight to your React Native or React app:

```tsx theme={null}
import { Limelight } from "@getlimelight/sdk";

Limelight.connect();
```

### 2. Server Middleware

Add Limelight to your server. Choose the integration that fits your stack:

<Tabs>
  <Tab title="Express">
    ```ts theme={null}
    import express from "express";
    import { Limelight } from "@getlimelight/sdk";

    Limelight.connect({ platform: "node" });

    const app = express();
    app.use(express.json());
    app.use(Limelight.middleware());
    ```
  </Tab>

  <Tab title="Next.js Pages Router">
    ```ts theme={null}
    // pages/api/users.ts
    import { Limelight } from "@getlimelight/sdk";

    Limelight.connect({ platform: "node" });

    export default Limelight.withLimelight((req, res) => {
      res.status(200).json({ users: [] });
    });
    ```
  </Tab>
</Tabs>

That's it — no additional configuration needed. The client and server SDKs coordinate automatically through the trace header.

## Custom Trace Header

By default, Limelight uses `x-limelight-trace-id` as the trace header. If this conflicts with existing headers in your infrastructure, you can customize the name on both sides:

```ts theme={null}
// Client
Limelight.connect({
  traceHeaderName: "x-my-trace-id",
});

// Server
Limelight.connect({
  platform: "node",
  traceHeaderName: "x-my-trace-id",
});
```

Both sides must use the same header name for tracing to work.

## Client-Only or Server-Only

You don't need both sides. Limelight works independently on either:

* **Client only** — See all outgoing requests, console logs, renders, and state
* **Server only** — See all incoming requests and responses with timing
* **Both** — Everything above, plus automatic full-stack trace correlation