# Error Tracking Setup (Sentry, self-hosted friendly)

Track production errors automatically so you know about issues before your users report them. Sentry's SaaS free tier works fine even on a self-hosted app — it's just a DSN endpoint, no coupling to any specific host.

## Setup (5 minutes)

### 1. Create Sentry Account
- Go to [sentry.io](https://sentry.io) (free tier available for small apps)
- Create a project of type "Node" for the backend and one of type "React" for the frontend (or one combined project)

### 2. Install SDKs
```bash
# backend/
npm install @sentry/node

# frontend/
npm install @sentry/react
```

### 3. Initialize

Backend (`backend/src/server.ts`, before anything else runs):
```ts
import * as Sentry from "@sentry/node";
Sentry.init({ dsn: process.env.SENTRY_DSN });
```

Frontend (`frontend/src/main.tsx`, before rendering):
```ts
import * as Sentry from "@sentry/react";
Sentry.init({ dsn: import.meta.env.VITE_SENTRY_DSN });
```

### 4. Add Environment Variables
Backend `.env`:
```bash
SENTRY_DSN=https://xxx@xxx.ingest.sentry.io/xxx
```
Frontend `.env` (baked in at build time, so rebuild after changing it):
```bash
VITE_SENTRY_DSN=https://xxx@xxx.ingest.sentry.io/xxx
```

### 5. Verify Setup
Trigger a test error and check the Sentry Dashboard:
```typescript
// Temporary test - remove after verification
throw new Error("Sentry test error")
```

## What You Get
- Automatic error capture (client + server)
- Stack traces with source maps (upload via `@sentry/vite-plugin` / `@sentry/esbuild-plugin` in the build step)
- Error grouping and deduplication
- Email alerts for new errors
- Performance monitoring (optional)

## Alternative
Self-hosted **GlitchTip** — an open-source, Sentry-protocol-compatible error tracker you can run on your own server if sending errors to a third-party SaaS is not acceptable.