# PhoenixEcho

Forward browser console logs and errors to your Phoenix server logs via WebSocket.

Send browser logs to your favourite clanker 🤖. 

## Features

- Intercepts `console.log`, `console.warn`, `console.error`, `console.info`, `console.debug`
- Captures `window.onerror` and `unhandledrejection` events
- Serializes complex objects (handles circular references, DOM elements, etc.)
- Auto-reconnects on WebSocket disconnection
- Configurable log levels and prefixes

## Installation

1. Add to your dependencies in `mix.exs`:

```elixir
def deps do
  [
    {:phoenix_echo, "~> 0.1.0"}
  ]
end
```

2. Add to your endpoint (`lib/my_app_web/endpoint.ex`):

```elixir
use PhoenixEcho.Endpoint
```

3. Configure in `config/dev.exs`:

```elixir
config :phoenix_echo,
  enabled: true,
  prefix: "[Browser]",
  log_level: :debug
```

## Configuration Options

| Option | Default | Description |
|--------|---------|-------------|
| `:enabled` | `true` | Enable/disable logging |
| `:prefix` | `"[Browser]"` | Prefix for log messages |
| `:log_level` | `:debug` | Minimum log level to display |
| `:include_stacktrace` | `true` | Include stacktrace for errors |

## How It Works

1. **Client-side**: JavaScript is injected into HTML responses that:
   - Wraps native console methods to intercept calls
   - Listens for global error events
   - Serializes arguments and sends via Phoenix Channel

2. **Server-side**: Phoenix Channel receives messages and:
   - Formats the browser logs
   - Outputs to Phoenix Logger with configured prefix

## Example Output

```
[info] [Browser] User clicked button {"id": "submit", "class": "btn-primary"}
[warning] [Browser] Deprecated API usage detected
[error] [Browser] Uncaught TypeError: Cannot read property 'foo' of undefined
      at handleClick (app.js:42:15)
      at HTMLButtonElement.onclick (index.html:10:1)
```

## License

MIT