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

# Monitoring

> Automatic error tracking, web vitals, and custom event reporting for Canvas apps — with optional Sentry and PostHog integration.

## Overview

Canvas automatically captures client-side errors, web performance metrics, and custom events for every app. Data flows to Mixpeek's analytics backend (ClickHouse) and optionally to your own Sentry or PostHog instance.

***

## Built-in error tracking

Canvas injects a lightweight error boundary that captures:

* **Unhandled exceptions** — `window.onerror` and `unhandledrejection` events
* **Error details** — message, stack trace, source URL, line/column numbers
* **Context** — app ID, user agent, page URL

Errors are sent to the `canvas_errors` ClickHouse table and visible in Studio's Analytics panel.

### Querying errors via API

```bash theme={null}
curl "https://api.mixpeek.com/v1/apps/$APP_ID/analytics/errors?minutes=60" \
  -H "Authorization: Bearer $API_KEY"
```

***

## Web vitals

Canvas automatically reports [Core Web Vitals](https://web.dev/vitals/) for every page load:

| Metric                             | What it measures    |
| ---------------------------------- | ------------------- |
| **LCP** (Largest Contentful Paint) | Loading performance |
| **FID** (First Input Delay)        | Interactivity       |
| **CLS** (Cumulative Layout Shift)  | Visual stability    |

Vitals are stored in `canvas_vitals` and visible in Studio.

***

## Custom events

Track custom events from your app using the Canvas analytics API:

```javascript theme={null}
// In your app code
fetch('/_canvas/events', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    event_type: 'search',
    event_name: 'query_executed',
    event_data: JSON.stringify({ query: 'red shoes', results: 42 }),
  }),
})
```

***

## Sentry integration

Send errors to your own Sentry project by configuring the monitoring settings:

```bash theme={null}
curl -X PATCH https://api.mixpeek.com/v1/apps/$APP_ID \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "monitoring": {
      "sentry_dsn": "https://abc123@o456.ingest.sentry.io/789"
    }
  }'
```

Canvas injects the Sentry SDK automatically — no code changes needed in your app.

***

## PostHog integration

Enable PostHog product analytics:

```bash theme={null}
curl -X PATCH https://api.mixpeek.com/v1/apps/$APP_ID \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "monitoring": {
      "posthog_api_key": "phc_abc123",
      "posthog_host": "https://app.posthog.com"
    }
  }'
```

Canvas injects the PostHog snippet automatically. Page views, sessions, and custom events are tracked.

***

## Studio

The **Analytics** panel in Studio shows:

* **Error rate** — errors per minute over the selected time range
* **Web vitals** — LCP, FID, CLS distributions
* **Custom events** — event counts by type
* **Runtime logs** — server function console output (see [Runtime Logs](/canvas/apps/logs))
* **Request logs** — HTTP request log with status codes and latency

***

## Related

* [Runtime Logs & Analytics](/canvas/apps/logs)
* [Server Functions](/canvas/apps/server-functions)
* [Apps Overview](/canvas/apps)