# @lovable.dev/vite-plugin-dev-server-bridge

Vite dev-server plugin for connecting Lovable's sandbox control plane to a live browser preview.

> Source lives in [`npm-packages/lovable-vite-tanstack/src/dev-server-bridge`](../lovable-vite-tanstack/src/dev-server-bridge); this package is a self-contained standalone build of it for plain-Vite projects.

## What It Does

- Exposes a dev-only restart endpoint that tells connected preview tabs when the server is about to restart.
- Exposes a preview execution endpoint for short diagnostics in connected viewer tabs.
- Delivers both messages through Vite's HMR WebSocket, so the browser preview can react without polling.
- Captures browser runtime, unhandled rejection, and resource-load errors in `/tmp/runtime-errors.log`.

## Error Collector

`devServerBridgePlugin()` enables the collector by default. Use it independently when the other bridge endpoints are not needed:

```ts
import { errorCollectorPlugin } from "@lovable.dev/vite-plugin-dev-server-bridge";

export default { plugins: [errorCollectorPlugin()] };
```

The plugin injects a capture-phase browser listener before app scripts, posts reports to `POST /__lovable/error-collector`, and resets the JSONL output when the dev server starts. Other dev-server plugins can append their own reports to the same JSONL log with `createErrorReportAppender()`.

| Option | Default | Purpose |
| --- | --- | --- |
| `endpoint` | `/__lovable/error-collector` | Root-relative report endpoint |
| `outputFile` | `/tmp/runtime-errors.log` | JSONL output path; relative paths resolve from Vite's project root |
| `maxBodyBytes` | `65536` | Maximum accepted report size |
| `resetOnStart` | `true` | Clear reports from the previous dev-server session |

Set `errorCollector: false` in `devServerBridgePlugin()` options to disable it.

## Scope

Runs only during `vite serve`; production builds are unchanged.