storyboard
A library for hierarchical, end-to-end, real-time logging with a Chrome DevTools extension for visualization.
What is storyboard?
Storyboard is a logging library that structures application logs into hierarchical stories, providing context for debugging asynchronous and concurrent operations. It enables end-to-end tracing of user actions across client and server, with real-time log visualization through a Chrome DevTools extension. The library solves the problem of tangled, hard-to-follow logs in modern web applications.
Developers building complex JavaScript applications, especially those with asynchronous workflows, client-server interactions, or microservices architectures who need better log organization and visualization.
Developers choose Storyboard for its unique combination of hierarchical logging, real-time cross-boundary tracing, and integrated DevTools visualization, which together provide unparalleled context for debugging distributed application flows.
Overview
End-to-end, hierarchical, real-time, colorful logs and stories
Use Cases
Best For
- Debugging asynchronous user interactions in single-page applications
- Tracing end-to-end request flows across client and server
- Monitoring logs from mobile devices or non-Chrome browsers remotely
- Organizing logs from concurrent processes into coherent stories
- Dynamically adjusting log verbosity in production without restarts
- Visualizing application logs with a rich, interactive interface
Not Ideal For
- Applications with simple, synchronous logic where basic console.log suffices and hierarchical overhead is unnecessary
- Teams working exclusively in non-Chrome browsers or environments where DevTools extensions cannot be installed
- Projects requiring logging to niche or proprietary systems not supported by the limited plugin ecosystem
- Systems where minimal logging latency and resource usage are critical, as WebSocket and plugin layers add overhead
Pros & Cons
Pros
Groups logs into nested stories, explicitly designed to maintain context across concurrent actions and async events, solving tangled logs in complex applications.
Links client and server logs into unified stories triggered by user actions, enabling full lifecycle visibility without manual correlation.
Offers a Chrome extension for real-time log monitoring with interactive filtering, remote access, and attachment inspection, enhancing debugging efficiency.
Allows adjusting log detail levels on the server remotely via WebSockets without restarting, useful for production troubleshooting.
Cons
The core DevTools extension is Chrome-exclusive, limiting accessibility for developers using other browsers or server-only environments.
Requires installing multiple packages (core library, listeners, presets) and configuring WebSocket servers, which can be overkill for simpler logging needs.
Only a few plugins are available (e.g., Console, WebSocket, File, PostgreSQL Database), and writing custom listeners may be necessary for unsupported integrations.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.