A lightweight logging bridge that lets AI assistants (like GitHub Copilot) see browser-side errors. Zero dependencies, zero config.
When developing a web app locally with an AI assistant, there's a fundamental blind spot:
AI assistants can't see errors happening in the browser.
- JavaScript runtime errors
- Network failures (failed fetch, CORS, timeouts)
- Warnings and debug logs
- Application state at specific moments
All of this happens in the browser context — completely invisible to the AI trying to help you debug.
This project creates a bidirectional logging bridge:
┌─────────────────┐ HTTP POST ┌─────────────────┐
│ │ ──────────────────────────► │ │
│ Web App │ { level, message, ... } │ Logger Service │
│ (Browser) │ │ (Node.js) │
│ │ │ │
└─────────────────┘ └────────┬────────┘
│
▼ write
┌─────────────────┐
│ logs/ │
│ client.log │
└────────┬────────┘
│
▼ read
┌─────────────────┐
│ AI / Copilot │
│ (Reads file) │
└─────────────────┘
- Start the Logger Service → listens on
http://localhost:9876 - Inject the snippet into your web app → intercepts errors automatically
- Your app works normally → logs are sent to the service
- The AI reads
logs/client.log→ can diagnose problems
cd ai-eyes
node logger-service.jsYou'll see:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✓ Logger Service running
Endpoint: http://localhost:9876
Logs: ./logs/client.log
Health: http://localhost:9876/health
View: http://localhost:9876/logs
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Option A: As a script tag
<head>
<script src="path/to/client-snippet.js"></script>
<!-- Your app after -->
<script src="app.js"></script>
</head>Option B: As a module import
// In your entry point
import './client-snippet.js';// Manual logging
logger.info('User clicked button', { buttonId: 'submit' });
logger.error('Load failed', error);
logger.warn('API slow', { latency: 2300 });
// These are captured automatically:
// - Uncaught exceptions
// - Unhandled promise rejections
// - Failed fetch requestsJust tell the AI:
Read the file logs/client.log and check for recent errors
// src/main.jsx
import './client-snippet.js'; // First
import React from 'react';
import ReactDOM from 'react-dom/client';
// ...// src/main.js
import './client-snippet.js'; // First
import { createApp } from 'vue';
// ...// pages/_app.js or app/layout.js
import '@/lib/client-snippet.js'; // First
// ...// angular.json → scripts array
"scripts": ["src/client-snippet.js"]| Method | Route | Description |
|---|---|---|
| POST | / |
Send a log entry |
| GET | /logs |
View all logs |
| GET | /health |
Health check (JSON) |
{
"level": "ERROR",
"message": "Request failed",
"timestamp": "2024-01-15T10:30:00.000Z",
"meta": { "url": "/api/data", "status": 500 }
}| Method | Description |
|---|---|
logger.info(msg, ...meta) |
Info-level log |
logger.warn(msg, ...meta) |
Warning-level log |
logger.error(msg, ...meta) |
Error-level log |
logger.debug(msg, ...meta) |
Debug-level log |
logger.log(msg, ...meta) |
General log |
logger.event(element, event, data) |
DOM event logging |
logger.fetch(url, opts, response) |
Manual fetch logging |
| Level | Use Case | Console Color |
|---|---|---|
ERROR |
Critical errors | Red |
WARN |
Warnings | Yellow |
INFO |
General info | Cyan |
DEBUG |
Debug information | Gray |
LOG |
General logs | White |
| Solution | Complexity | AI-Accessible | Real-Time | Persistent | Setup |
|---|---|---|---|---|---|
| ai-eyes | ⭐⭐ | ✅ | ✅ | ✅ | Minimal |
| localStorage | ⭐ | ❌ | ❌ | ✅ | None |
| WebSocket | ⭐⭐⭐ | ✅ | ✅ | ❌* | Medium |
| Playwright | ⭐⭐⭐⭐⭐ | ✅ | ✅ | ✅ | High |
| CDP | ⭐⭐⭐⭐ | ✅ | ✅ | ✅ | High |
| Sentry/LogRocket | ⭐⭐⭐ | ✅ | ✅ | ✅ | Medium |
*WebSocket can persist if redirected to file
This tool occupies the sweet spot: zero dependencies, minimal setup, AI can read files directly.
LOGGER_PORT=3001 node logger-service.js// In client-snippet.js, change:
const LOG_ENDPOINT = 'http://localhost:3001';// In logger-service.js, before writing:
const MIN_LEVEL = ['ERROR', 'WARN', 'INFO', 'DEBUG', 'LOG'];
if (!MIN_LEVEL.includes(level.toUpperCase())) return;- Check service is running:
curl http://localhost:9876/health - Check CORS in DevTools (Network tab)
- Verify snippet loads before your app
The service includes CORS headers. If issues persist:
- Use
http://localhost:9876(not127.0.0.1) - Verify the port matches
- The service writes immediately (no buffering)
- Check write permissions on
./logs/
MIT - see LICENSE for details.
Made by Mario Raul Carbonell Martinez