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

Add to your dependencies in mix.exs:

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

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

use PhoenixEcho.Endpoint

Configure in config/dev.exs:

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

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
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