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.

Filter by Tag

Search

Light Theme

Installation

npm install yoink-my-logs

Usage

1. Add logs to your code

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

2. Start the viewer

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.

Option A: ES Module Import

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

Option B: Script Tag

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

<script src="http://localhost:7337/yoink.js"></script>
<script>
  yoink({ id: "submit" }, "button clicked")
  yoink.error({ code: 500 }, "something broke")
</script>

Custom Port or Host

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

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

Environment Variables

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

Examples

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

Replacing console.log

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

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:

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

yoink(data) / yoink(data, message)

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

Tagged methods

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 |

Array slicing methods

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 |

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

Browser module

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

Quick Demo Script

Generate sample logs to test the UI:

npm run demo

Or after installing the package:

npx yoink-demo

Demo Project

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

npm test

License

MIT