Examples

This section showcases interactive demos of Loggical functionality. All demos are self-contained HTML pages that you can run directly in your browser.

Note: These interactive demos complement the API documentation. Check the API Reference for detailed technical documentation.

🚀 Running Interactive Demos

# Build the package first
pnpm run build

# Start the demo server
node examples/serve.js
# Then open http://localhost:3000

# Or open individual demos directly:
# http://localhost:3000/basic-demo.html
# http://localhost:3000/formatting-demo.html
# http://localhost:3000/context-demo.html
# http://localhost:3000/security-demo.html
# http://localhost:3000/performance-demo.html

📝 Available Interactive Demos

Getting Started

📱 Basic Demo

Interactive introduction to Loggical with all log levels, basic configuration, and object logging. Perfect starting point for new users.

View Example →

Core Features & Formatting

🎨 Formatting Demo

Comprehensive showcase of formatting options including presets, colors, timestamps, and object display with live configuration builder.

View Example →

🔗 Context Demo

Demonstrates prefixes, context attachment, method chaining, and context inheritance with interactive flow diagrams.

View Example →

Security & Performance

🔒 Security Demo

Advanced redaction capabilities for sensitive data protection with real-world security scenarios and custom redaction rules.

View Example →

⚡ Performance Demo

Interactive benchmarking tool to measure logging performance, throughput, and memory usage across different configurations.

View Example →

🎯 Integration Patterns

🚀 Express.js Integration

import express from 'express'
import { serverLogger } from 'loggical'

const app = express()
const logger = serverLogger.withPrefix('EXPRESS')

// Request logging middleware
app.use((req, res, next) => {
  const requestLogger = logger.withContext({
    requestId: req.id,
    method: req.method,
    url: req.url
  })
  
  req.logger = requestLogger
  next()
})

app.post('/api/users', (req, res) => {
  req.logger.info('Creating user', { email: req.body.email })
  // ... handle request
  req.logger.info('User created successfully', { userId: newUser.id })
})

⚛️ React/Vue Integration

import { readableLogger } from 'loggical'

const componentLogger = readableLogger.withPrefix('REACT')

function UserProfile({ userId }) {
  const logger = componentLogger.withContext({ userId, component: 'UserProfile' })
  
  useEffect(() => {
    logger.debug('Component mounted')
    
    fetchUser(userId)
      .then(user => logger.info('User data loaded', { name: user.name }))
      .catch(error => logger.error('Failed to load user', { error: error.message }))
      
    return () => logger.debug('Component unmounted')
  }, [userId])
}

🔗 Related Documentation

• API Reference - Complete technical documentation with integrated examples
• Getting Started Guide - Installation and basic setup
• Quick Start Guide - 30-second setup examples