Browser SDK

Capture frontend errors and events directly from the browser — including unhandled exceptions and promise rejections.

Installation

bash
npm install @getlogflow/browser

Script tag (no bundler)

html
<script src="https://unpkg.com/@getlogflow/browser/dist/browser.iife.js"></script>
<script>
  LogFlowBrowser.init({
    apiKey: 'lf_YOUR_API_KEY',
    environment: 'production',
    release: 'v1.2.3',
  })
</script>

ES module

typescript
import { init, log } from '@getlogflow/browser'

init({
  apiKey: 'lf_YOUR_API_KEY',
  environment: 'production',
  release: 'v1.2.3',
})

// Manual logging
log.info('User clicked checkout')
log.error('Payment form validation failed', { field: 'cardNumber' })

Auto-captured events

  • window.onerror — uncaught JavaScript errors
  • unhandledrejection — unhandled Promise rejections
  • Page URL, user agent, and environment added to every log

Configuration

typescript
init({
  apiKey: 'lf_YOUR_API_KEY',
  environment: 'production',   // e.g. production, staging
  release: 'v1.2.3',          // app version / git SHA
  ignorePatterns: [            // skip logs matching these strings
    'ResizeObserver loop',
    'Script error',
  ],
  maxErrorsPerMinute: 20,      // rate limit (default: 20)
})
ℹ️
The Browser SDK uses keepalive: true on pagehide and visibilitychange events to flush pending logs before the page unloads — so errors during navigation are not lost.

Next.js

typescript
// app/layout.tsx
import { init } from '@getlogflow/browser'

if (typeof window !== 'undefined') {
  init({
    apiKey: process.env.NEXT_PUBLIC_LOGFLOW_API_KEY!,
    environment: process.env.NODE_ENV,
    release: process.env.NEXT_PUBLIC_APP_VERSION,
  })
}