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.
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:42TypeScript 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"See It In
Action
import React from 'react';import { LogClass, Log, LogRender, LogAsync } from 'loggerect';@LogClass() // Logs all methods automaticallyclass 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> ); }}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.