Zero-dependency React lifecycle debugger with micro-kernel plugin architecture
npm install @oxog/reactlogZero-dependency React lifecycle debugger with micro-kernel plugin architecture.
- Zero Dependencies - No runtime dependencies, everything implemented from scratch
- Micro-Kernel Architecture - Minimal core with powerful plugin system
- Beautiful Console Output - Styled, collapsible log groups with icons
- Full Lifecycle Tracking - Mount, unmount, updates, props, state, effects
- Debug Panel - Optional floating UI panel with Shadow DOM isolation
- Remote Logging - Send logs to external endpoints
- Export Functionality - Export logs as JSON or CSV
- Tree-Shakeable - Only bundle what you use
- TypeScript First - Full type definitions included
``bash`
npm install @oxog/reactlog
`bash`
yarn add @oxog/reactlog
`bash`
pnpm add @oxog/reactlog
`tsx
import { ReactLogProvider, useLog } from '@oxog/reactlog'
// Wrap your app with the provider
function App() {
return (
)
}
// Add logging to any component
function MyComponent({ userId }) {
useLog('MyComponent', {
trackProps: true,
trackState: true,
trackEffects: true,
})
const [count, setCount] = useState(0)
useEffect(() => {
fetchUser(userId)
}, [userId])
return (
)
}
`
``
┌─ MyComponent ─────────────────────────────────
│ ⬆️ MOUNT 12:34:56.789
│ 📦 Props: { userId: 123 }
│ 📊 State[0]: 0
│ 🔄 Effect[0] RUN (mount)
├─────────────────────────────────────────────────
│ 🔃 UPDATE 12:34:58.123
│ 📦 Props changed:
│ userId: 123 → 456
│ 🧹 Effect[0] CLEANUP
│ 🔄 Effect[0] RUN (deps changed: [0])
├─────────────────────────────────────────────────
│ ⬇️ UNMOUNT 12:35:01.456
│ 🧹 Effect[0] CLEANUP
│ ⏱️ Lifetime: 4.667s
└─────────────────────────────────────────────────
1. lifecycle-logger - Tracks mount, unmount, and update events
2. props-tracker - Tracks all props changes with diff analysis
3. state-tracker - Tracks useState and useReducer changes
4. effect-tracker - Tracks useEffect execution and cleanup
5. console-output - Formats beautiful console logs
`tsx
import { panelUI, fileExporter, remoteLogger } from '@oxog/reactlog/plugins'
fileExporter({ format: 'json' }),
remoteLogger({ endpoint: 'https://logs.example.com' }),
]}>
`
- context-tracker - Tracks useContext value changes
- error-tracker - Tracks Error Boundary catches
- render-timer - Measures render duration
- render-chain - Tracks parent→child render propagation
- panel-ui - Debug panel overlay with Shadow DOM
- file-exporter - Export logs to JSON/CSV
- remote-logger - Send logs to remote endpoint
- - Main provider component
- - Debug panel (requires panelUI plugin)
- - Wrapper component for logging
- useLog(name, options) - Main debug hookuseLogContext()
- - Access kernel directlyuseLogMetrics(componentName)
- - Get metrics for a component
- withLog(Component, options) - Higher-order component wrapper
- getKernel() - Access kernel instancegetLogs()
- - Get all logsclearLogs()
- - Clear all logsfilterLogs(filter)
- - Filter logsexportLogs()
- - Export as JSON stringcreatePlugin(config)
- - Create custom plugin
`tsx
import { createPlugin } from '@oxog/reactlog'
const analyticsPlugin = createPlugin({
name: 'my-analytics',
version: '1.0.0',
type: 'optional',
hooks: {
onMount: (event) => {
analytics.track('component_mount', {
name: event.componentName,
})
},
onError: (event) => {
errorReporter.capture(event.error)
},
},
})
``
Full documentation available at https://reactlog.oxog.dev
MIT