Debug View

Real-time stream of every event with per-destination forwarding status — verify your integration in seconds.

The Debug View shows a real-time stream of every event your site sends to vTilt, including forwarding status for each configured destination. It works like Google Analytics DebugView — you can see individual events as they arrive, inspect their properties, and verify that forwarding to GA4, Meta CAPI, or PostHog is working correctly.

#How it works

Events flow through the normal ingestion pipeline and are simultaneously buffered to a real-time stream. The dashboard connects via Server-Sent Events (SSE) and receives events within ~1 second of ingestion.

SDK sends events to /api/e as normal.
Server processes, enriches, and stores events in ClickHouse.
Events are buffered to a Redis sorted set for the debug stream.
Dashboard connects via SSE and renders events in real time.
Forwarding results arrive moments later with per-destination status.

#Enable debug mode in the SDK

When debug mode is active, every event includes a $debug: true property. This is useful for filtering debug traffic in the Debug View.

vt.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://www.vtilt.com',
  debug: true,
})

typescript

You can also enable debug mode via a URL parameter — no code change needed:

https://your-site.com/?vtilt_debug=1

text

#Using the Debug View

Navigate to the Debug page from the project sidebar.

Feature	Description
Event Timeline	Live stream of events, newest first. Click any event to expand its full properties JSON.
Forwarding Status	Each event shows badges per configured destination — green for sent, red for failed, gray for filtered.
Filters	Filter by event type in the sidebar. See live counts per event name.
Pause / Resume	Pause the stream to inspect events without them scrolling away; resume to catch up with buffered events.
Connection Status	Live indicator shows connection state. Auto-reconnects on disconnect.

#SSE stream (advanced)

The debug stream is a standard Server-Sent Events endpoint. Connect to it programmatically when you need to integrate with custom tooling:

const source = new EventSource(
  '/api/projects/<projectId>/debug/stream?project_id=<projectId>',
  { withCredentials: true },
)

source.addEventListener('debug_event', e => {
  const event = JSON.parse(e.data)
  console.log('Event:', event.eventName, event.properties)
})

source.addEventListener('forwarding', e => {
  const result = JSON.parse(e.data)
  console.log('Forwarding:', result.eventId, result.destinations)
})

typescript

#How it works

SDK sends events to /api/e as normal.

Server processes, enriches, and stores events in ClickHouse.

Events are buffered to a Redis sorted set for the debug stream.

Dashboard connects via SSE and renders events in real time.

Forwarding results arrive moments later with per-destination status.

#Enable debug mode in the SDK

When debug mode is active, every event includes a $debug: true property. This is useful for filtering debug traffic in the Debug View.

vt.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://www.vtilt.com',
  debug: true,
})

typescript

You can also enable debug mode via a URL parameter — no code change needed:

https://your-site.com/?vtilt_debug=1

text

#Using the Debug View

Navigate to the Debug page from the project sidebar.

Feature	Description
Event Timeline	Live stream of events, newest first. Click any event to expand its full properties JSON.
Forwarding Status	Each event shows badges per configured destination — green for sent, red for failed, gray for filtered.
Filters	Filter by event type in the sidebar. See live counts per event name.
Pause / Resume	Pause the stream to inspect events without them scrolling away; resume to catch up with buffered events.
Connection Status	Live indicator shows connection state. Auto-reconnects on disconnect.

#SSE stream (advanced)

The debug stream is a standard Server-Sent Events endpoint. Connect to it programmatically when you need to integrate with custom tooling:

const source = new EventSource(
  '/api/projects/<projectId>/debug/stream?project_id=<projectId>',
  { withCredentials: true },
)

source.addEventListener('debug_event', e => {
  const event = JSON.parse(e.data)
  console.log('Event:', event.eventName, event.properties)
})

source.addEventListener('forwarding', e => {
  const result = JSON.parse(e.data)
  console.log('Forwarding:', result.eventId, result.destinations)
})

typescript