logo

Vedatrace

Javascript sdk

Framework Integrations

Learn how to use the VedaTrace SDK with popular frameworks like Express.js, Next.js, and React.

The VedaTrace SDK provides integrations for popular frameworks to make it even easier to capture logs and context.

The vedaTraceMiddleware for Express.js automatically creates a child logger for each request, adding a requestId to the context.

import express from 'express'
import { vedaTraceMiddleware } from 'vedatrace/express'

const app = express()
app.use(vedaTraceMiddleware({ 
  apiKey: process.env.VEDATRACE_API_KEY 
}))

app.get('/', (req, res) => {
  // The logger is available on the request object
  req.vedatrace.info('Home page visited')
  res.json({ ok: true })
})

The withVedaTrace higher-order function for Next.js API routes provides a logger instance with context about the request.

import { withVedaTrace } from 'vedatrace/next'

export const GET = withVedaTrace(async (req, { logger }) => {
  logger.info('API called')
  return Response.json({ success: true })
}, { apiKey: '...' })

The VedaTraceProvider and useVedaTrace hook allow you to easily access a logger instance within your React components.

import { VedaTraceProvider, useVedaTrace } from 'vedatrace/react'

function App() {
  return (
    <VedaTraceProvider apiKey="..." service="frontend">
      <MyComponent />
    </VedaTraceProvider>
  )
}

function MyComponent() {
  const logger = useVedaTrace()
  
  useEffect(() => {
    logger.info('Component mounted')
  }, [])
  
  return <div>Hello</div>
}

Cloudflare Workers terminate shortly after returning a Response. To ensure logs are sent reliably, use one of these approaches:

Import waitUntil from cloudflare:workers and pass it in the config. Flushing happens automatically — no manual calls needed.

import { vedatrace } from 'vedatrace'
import { waitUntil } from 'cloudflare:workers'

export default {
  async fetch(req, env, ctx) {
    const logger = vedatrace({ 
      apiKey: env.VEDATRACE_API_KEY,
      service: 'worker',
      waitUntil,  // Keeps worker alive during log delivery
    })
    
    logger.info('Request received', { 
      method: req.method,
      url: req.url 
    })
    
    return new Response('OK')
  }
}

Alternative: Use .withContext(ctx)

If you prefer not to import waitUntil, attach the execution context to the logger:

import { vedatrace } from 'vedatrace'

const logger = vedatrace({ 
  apiKey: env.VEDATRACE_API_KEY,
  service: 'worker',
})

export default {
  async fetch(req, env, ctx) {
    logger.withContext(ctx)
    logger.info('Request received')
    return new Response('OK')
  }
}

Legacy: Manual ctx.waitUntil(logger.flush())

logger.info('Request received')
ctx.waitUntil(logger.flush())

On this page