yoink-my-logs

A better console.log for debugging. Zero dependencies. Drop yoink() calls anywhere in your code, Node.js or browser, and watch them stream live to a clean web UI with filtering, search, and proper JSON formatting.

More screenshots

Filter by Tag

Search

Light Theme

Installation

``bash
npm install yoink-my-logs
`

Usage

$3

`javascript
import yoink from "yoink-my-logs"

// Log data directly
yoink({ userId: 123, cart: items, total: 49.99 })

// Data with a message (data first, message second)
yoink({ userId: 123 }, "User signed in")

// With tags for different log levels
yoink.info({ port: 3000 }, "Server started")
yoink.success({ amount: 49.99 }, "Payment processed")
yoink.warn({ current: 95 }, "Rate limit approaching")
yoink.error({ code: "ETIMEDOUT" }, "Connection failed")
yoink.debug({ requestBody: data }) // data-only works with tags too
`

$3

`bash
npx yoink
`

Open http://localhost:7337 to see your logs stream in real-time.

Browser / Frontend Usage

You can also call yoink() from your frontend code. Logs are sent to the yoink server via HTTP.

$3

`javascript
import yoink from "yoink-my-logs/browser"

yoink({ url: location.href, user: currentUser }) // data only
yoink({ url: location.href }, "page loaded") // data + message
yoink.info({ type: "click" }, "user action")
`

$3

Add the script tag to your HTML (served by the yoink server):

`html


`

$3

If the yoink server is running on a non-default port or a different host:

`javascript
import yoink from "yoink-my-logs/browser"

// Custom port
yoink.init({ port: 8080 })

// Custom host (e.g., for LAN access from mobile)
yoink.init({ host: "192.168.1.50" })

// Both
yoink.init({ host: "192.168.1.50", port: 8080 })

yoink("hello from mobile")
`

The init() call is optional — if you don't call it, it defaults to localhost:7337.

How It Works

- Logs are stored in ~/.yoink-my-logs/ as daily JSON files (YYYY-MM-DD.log)
- The browser UI connects via Server-Sent Events (SSE) for live updates
- When you open the viewer, it shows today's log history and streams new entries as they arrive
- File rotation: When a log file exceeds 100MB, a new file is created (YYYY-MM-DD_2.log, YYYY-MM-DD_3.log, etc.)
- Entry limit: Individual log entries larger than 100KB are rejected to prevent runaway logging

Configuration

$3

| Variable | Default | Description |
|----------|---------|-------------|
| YOINK_PORT | 7337 | Port for the web UI |
| YOINK_LOG_DIR | ~/.yoink-my-logs | Directory where log files are stored |
| YOINK_REPLACE_CONSOLE_LOG | - | When set, replaces console.log, console.info, console.warn, console.error, and console.debug with yoink equivalents |

$3

`bash


Custom port

YOINK_PORT=8080 npx yoink

Custom log directory

YOINK_LOG_DIR=/tmp/my-logs npx yoink

Both

YOINK_PORT=8080 YOINK_LOG_DIR=/var/log/yoink npx yoink

Replace console.log with yoink

YOINK_REPLACE_CONSOLE_LOG=1 node your-app.js
`

Default port is 7337.

$3

You can automatically replace console.log and other console methods with yoink by setting the YOINK_REPLACE_CONSOLE_LOG environment variable:

`bash
YOINK_REPLACE_CONSOLE_LOG=1 node your-app.js
`

When enabled, the following console methods are replaced:
- console.log → yoink()
- console.info → yoink.info()
- console.warn → yoink.warn()
- console.error → yoink.error()
- console.debug → yoink.debug()

Other console methods (like console.dir, console.table, console.trace, etc.) remain unchanged.

Browser usage: In the browser, set window.YOINK_REPLACE_CONSOLE_LOG = true before importing yoink:

`javascript
window.YOINK_REPLACE_CONSOLE_LOG = true
import yoink from "yoink-my-logs/browser"

// Now console.log will use yoink
console.log("This goes to yoink!")
`

API

$3

Flexible argument handling:

| Call | Data | Message |
|------|------|---------|
| yoink({ user: 1 }) | { user: 1 } | "" |
| yoink({ id: 1 }, "clicked") | { id: 1 } | "clicked" |
| yoink("hello") | undefined | "hello" |

- Single non-string argument → treated as data
- Single string argument → treated as message
- Two arguments → first is data, second is message

$3

All tagged methods accept the same flexible arguments as yoink():

| Method | Tag | Color |
|--------|-----|-------|
| yoink.info() | INFO | Blue |
| yoink.success() | SUCCESS | Green |
| yoink.warn() | WARN | Amber |
| yoink.error() | ERROR | Red |
| yoink.debug() | DEBUG | Purple |

$3

When debugging large arrays, you often only need to see a subset of the data. These methods let you log only the first or last items:

| Method | Description |
|--------|-------------|
| yoink.first(data, message?) | Logs only the first item of an array |
| yoink.last(data, message?) | Logs only the last item of an array |
| yoink.five(data, message?) | Logs the first 5 items of an array |
| yoink.last.five(data, message?) | Logs the last 5 items of an array |
| yoink.ten(data, message?) | Logs the first 10 items of an array |
| yoink.last.ten(data, message?) | Logs the last 10 items of an array |

`javascript
const users = await fetchUsers() // Returns 500 users

// Log just the first user
yoink.first(users, "First user")

// Log just the last user
yoink.last(users, "Most recent user")

// Log first 5 users
yoink.five(users, "Top 5 users")

// Log last 5 users
yoink.last.five(users, "Recent signups")

// Log first 10 users
yoink.ten(users, "First page of users")

// Log last 10 users
yoink.last.ten(users, "Latest 10 users")
`

Behavior notes:
- If the data is not an array, it's logged as-is (no slicing applied)
- Empty arrays return [] for .five(), .ten(), .last.five(), .last.ten() and undefined for .first(), .last()
- If the array has fewer items than requested, all items are logged

$3

The browser module (yoink-my-logs/browser) has the same API as above, plus:

#### yoink.init(options?)

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| host | string | localhost | Hostname or IP address of the yoink server |
| port | number | 7337 | Port number of the yoink server |

Demo

$3

Generate sample logs to test the UI:

`bash
npm run demo
`

Or after installing the package:

`bash
npx yoink-demo
`

$3

For more comprehensive testing, check out the demo/ directory which includes:

- node-demo.js - A Node.js application demonstrating various logging scenarios
- browser-demo.html - A standalone HTML page for browser-based logging
- continuous-demo.js - Continuously generates logs for testing live streaming

To use the demo project:

1. Start the yoink server: npm run start (or npx yoink)
2. Run the Node.js demo: node demo/node-demo.js
3. Open demo/browser-demo.html in your browser

See demo/README.md for more details.

Development

`bash
npm test
``

License

MIT