Now with TypeScript Decorators & Source Tracking

React & Node.js LoggingThat Actually Works

A powerful, zero-dependency logger for React and Node.js with full source path tracking, TypeScript decorators, and environment-aware output. See exactly where your logs come from with accurate file:line references.

📚Documentation
0Dependencies
<5kbGzipped
100%TypeScript
Console
[10:30:45]â„šī¸ INFO|App→Application started
[10:30:45]🐛 DEBUG|UserProfile→fetchUser()@ src/components/UserProfile.tsx:42
📊 Data: { userId: 123, name: "John" }
[10:30:46]🐛 DEBUG|UserProfile→🎨 Render #1 (2.34ms)@ src/components/UserProfile.tsx:67
[10:30:47]âš ī¸ WARN|DataService→Cache miss for key: user_123
[10:30:48]🐛 DEBUG|UserProfile→đŸ“Ļ Props changed
{ name: { prev: null, next: "John Doe" } }
Features

Everything You Need for
Better Debugging

📍

Source Path Tracking

See exact file paths and line numbers in development. Know exactly where every log comes from.

@ src/components/UserProfile.tsx:42
đŸŽ¯

TypeScript Decorators

Beautiful decorator syntax for class components. Just add @Log() and you're done.

@Log() handleClick() { ... }
🔄

HOC Support

Higher-Order Components for functional components. Wrap once, log everything.

withLogger(MyComponent)
đŸŽŖ

React Hooks

Comprehensive hooks for functional components. useLogger, useStateLogger, and more.

const log = useLogger('MyComponent')
🌍

Environment Aware

Automatic dev/prod detection. Full details in development, minimal in production.

environment: "auto"
⚡

Performance Tracking

Built-in timing and measurement. Track render times, async operations, and more.

logger.measure('fetch', async () => ...)
🔍

Why Did You Render

Identify exactly why components re-rendered. Track prop and state changes.

useWhyDidYouRender('Component', props)
🎨

Beautiful Output

Styled console output with colors, badges, and grouped logs. Easy to scan and understand.

format: "pretty"
Examples

See It In
Action

UserProfile.tsx
import React from 'react';
import { LogClass, Log, LogRender, LogAsync } from 'loggerect';
@LogClass() // Logs all methods automatically
class UserProfile extends React.Component {
@LogAsync() // Perfect for async methods
async fetchUserData() {
const response = await fetch('/api/user');
return response.json();
}
@Log({ logArgs: true, logReturn: true })
handleClick(event) {
// Arguments and return value are logged
this.setState({ clicked: true });
}
@LogRender() // Tracks render count and performance
render() {
return (
<div onClick={this.handleClick}>
Hello, {this.props.name}!
</div>
);
}
}
Console Output
🐛 DEBUG|UserProfile → fetchUserData() started @ UserProfile.tsx:9
🐛 DEBUG|UserProfile → ✅ fetchUserData() completed (234.56ms)
🐛 DEBUG|UserProfile → handleClick() @ UserProfile.tsx:15
📊 Args: [MouseEvent]
🐛 DEBUG|UserProfile → 🎨 Render #3 (1.23ms)
Why loggerect?

Development vs
Production

đŸ› ī¸

Development Mode

  • ✓Full source paths with line numbers
  • ✓Detailed stack traces on errors
  • ✓Render tracking with timing
  • ✓Prop and state change detection
  • ✓Colored, grouped output
  • ✓Performance measurements
🚀

Production Mode

  • ✓Component names only
  • ✓Minimal output (warn/error)
  • ✓No performance overhead
  • ✓No source path exposure
  • ✓JSON format for log aggregation
  • ✓Custom transports for monitoring

Ready to Debug
Like a Pro?

Start using loggerect today and never wonder where a log came from again.

Read the Docs