Server Components

Logging in React Server Components with automatic runtime detection and context propagation.

NNode.jsServer
Runtime Detection
Vestig automatically detects the current runtime environment
Result
Runtime: node
Environment: Server
Request ID: 7152f157-08ef-4a4d-9129-94209414e706
Trace ID: 494c262c99b73be6511f885f22a8a893
Nested Components with Logging
Child components inherit context and create namespaced logs
User Profile Component
J
John Doe
john@example.com
2 posts · admin
Code Example
How to use vestig in Server Components with @vestig/next
typescript
import { getLogger, getRequestContext } from '@vestig/next'

export default async function MyServerComponent() {
  // Get logger with automatic request context from middleware
  const log = await getLogger('my-component')
  const ctx = await getRequestContext()

  log.info('Component rendering', {
    requestId: ctx.requestId
  })

  const data = await fetchData()
  log.debug('Data fetched', { count: data.length })

  return <div>...</div>
}

— Key Features

  • ›Runtime Detection — Automatically detects Node.js/Bun environment
  • ›Structured Logging — JSON output for server-side logs
  • ›Child Loggers — Namespaced logging for components
  • ›Context Propagation — Request IDs tracked across async operations
  • ›Real-time Streaming — Logs appear in the panel below