Client Components

Browser-side logging with PII sanitization. Logs are sent to the server for unified viewing.

Detecting runtime...
Log Levels
Click buttons to emit logs at different levels
Logs emitted: 0
PII Sanitization Demo
Enter sensitive data and watch it get automatically sanitized in the logs
! Sensitive fields like email, password, and creditCard are automatically sanitized in the log output
User Flow Simulation
Simulate a typical user interaction flow with multiple log entries
Code Example
How to use vestig in Client Components with @vestig/next
typescript
'use client'
import { useEffect } from 'react'
import { useLogger, useCorrelationContext } from '@vestig/next/client'

export default function MyClientComponent() {
  // Get logger from VestigProvider - stable reference, no useMemo needed!
  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>
}

— Key Features

  • ›Browser Detection — Runtime shows as 'browser'
  • ›PII Sanitization — Email, password, credit cards are redacted
  • ›Unified Logging — Client logs appear in the same panel as server logs
  • ›Pretty Console — Colored output in browser devtools
  • ›No AsyncLocalStorage — Graceful degradation in browser