autotel-framework-setup

Files (1)

• SKILL.md

SKILL.md (first lines)

# Autotel Framework Setup

Framework-specific setup guides for integrating autotel into your application.

## Purpose

Quick-start guide for wiring autotel into each supported framework. Covers package installation, init placement, middleware setup, and handler patterns.

## When to Use

- Setting up autotel in a new project
- Adding autotel to an existing framework app
- Checking if you're using the right framework-specific package
- Looking up the correct middleware or wrapper API

## Hono

**Package:** `autotel-hono`

**Install:**

```bash
pnpm add autotel autotel-hono
```

**Setup:**

```typescript
import { Hono } from 'hono';
import { init, getRequestLogger } from 'autotel';
import { otel } from 'autotel-hono';

init({ service: 'my-api' });

const app = new Hono();
app.use(otel({ serviceName: 'my-api' }));

app.post('/api/checkout', async (c) => {
  const log = getRequestLogger(); // no args — middleware created the span
  const user = await getAuth(c);
  log.set({ user: { id: user.id } });

  const result = await processCheckout(user.id, await c.req.json());
  log.set({ result: { orderId: result.id } });
  log.emitNow();
  return c.json(result);
});

export default app;
```

**Key points:**

- Register `otel()` middleware once with `app.use()`, not per-route
- `getRequestLogger()` needs no args inside handlers (middleware sets up AsyncLocalStorage)
- Optional config: `captureRequestHeaders`, `captureResponseHeaders`, `spanNameFactory`

---

## TanStack Start

**Package:** `autotel-tanstack`

**Install:**

```bash
pnpm add autotel autotel-tanstack
```

**Setup, Middleware approach (recommended):**

```typescript
// app/ssr.tsx or server entry
import { wrapStartHandler } from 'autotel-tanstack/handlers';

export default wrapStartHandler({
  service: 'my-app',
  endpoint: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,
})(createStartHandler(defaultStreamHandler));
```

```typescript
// Server functions
import { createServerFn } from '@tanstack/react-start';
import { tracingMiddleware } from 'autotel-tanstack/middleware';
import { getRequestLogger } from 'autotel';

export const getUser = createServerFn({ method: 'GET' })
  .middleware([tracingMiddleware({ type: 'function' })])
  .handler(async ({ data: id }) => {
    const log = getRequestLogger();
    log.set({ user: { id } });
    const user = await db.users.findUnique({ where: { id } });
    log.emitNow();
    return user;
  });
```

```typescript
// Route loaders
import { traceLoader } from 'autotel-tanstack/loaders';

export const Route = createFileRoute('/users/$userId')({
  loader: (ctx) =>
    traceLoader(ctx, async ({ params }) => {
      return await getUser({ data: params.userId });
    }),
});
```

**Zero-config alternative:**

```typescript
import 'autotel-tanstack/auto';
// Set OTEL_SERVICE_NAME, OTEL_EXPORTER_OTLP_ENDPOINT, OTEL_EXPORTER_OTLP_HEADERS
```

**Key points:**

From jagreehal/autotel, Apache-2.0.

More from jagreehal/autotel