Browser-side logging with PII sanitization
Click buttons to emit logs at different levels
Enter sensitive data and watch it get automatically sanitized in the logs
Simulate a typical user interaction flow with multiple log entries
'use client'
import { useEffect } from 'react'
import { useLogger, useCorrelationContext } from '@vestig/next/client'
export default function MyClientComponent() {
const log = useLogger('my-component')
const ctx = useCorrelationContext()
useEffect(() => {
log.info('Component mounted', { requestId: ctx.requestId })
return () => log.debug('Component unmounting')
}, [log, ctx.requestId])
const handleClick = () => {
log.info('Button clicked', {
email: 'user@example.com', // → auto-sanitized!
})
}
return <button onClick={handleClick}>Click me</button>
}