@getlogflow/browser

Browser SDK for LogFlow — automatically captures JavaScript errors, unhandled promise rejections, and lets you send custom log events from your frontend.

Install

npm install @getlogflow/browser

Quick start

import { LogFlowBrowser } from '@getlogflow/browser'

const logger = new LogFlowBrowser({
  apiKey: 'lf_your_api_key',
  service: 'my-frontend',
  environment: 'production',
  release: '1.2.3',           // optional: app version or git SHA
})

// That's it — window.onerror and unhandledrejection are captured automatically.

// Manual logging:
logger.info('Page loaded', { route: '/dashboard' })
logger.error('Payment failed', { userId: '123', amount: 99 })

Via <script> tag (CDN)

<script src="https://unpkg.com/@getlogflow/browser/dist/index.global.js"></script>
<script>
  const logger = new LogFlowBrowser.LogFlowBrowser({
    apiKey: 'lf_your_api_key',
    service: 'my-frontend',
  })
</script>

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | required | Your LogFlow project API key | | service | string | "browser" | Service name shown in LogFlow | | baseUrl | string | "https://api.getlogflow.com" | API endpoint override | | captureErrors | boolean | true | Auto-capture window.onerror | | captureUnhandled | boolean | true | Auto-capture unhandledrejection | | captureConsoleErrors | boolean | false | Intercept console.error calls | | ignoreErrors | (string \| RegExp)[] | [] | Patterns to ignore | | maxErrorsPerMinute | number | 20 | Rate limit for auto-captured errors | | environment | string | — | Added to every log's metadata | | release | string | — | App version / git SHA | | onError | (err: Error) => void | — | Called when SDK fails to send |

Auto-captured metadata

Every error captured automatically includes:

• url — current page URL
• userAgent — browser user agent
• filename, lineno, colno — error source location
• stack — full stack trace
• type — "uncaught_error" | "unhandled_rejection" | "console_error"
• environment, release — if provided in options

React example

// app/error-boundary.tsx
import { LogFlowBrowser } from '@getlogflow/browser'

const logger = new LogFlowBrowser({
  apiKey: process.env.NEXT_PUBLIC_LOGFLOW_API_KEY!,
  service: 'web',
  environment: process.env.NODE_ENV,
})

export function reportError(error: Error, context?: Record<string, unknown>) {
  logger.error(error.message, { stack: error.stack, ...context })
}

Page unload

The SDK uses fetch with keepalive: true on pagehide and visibilitychange, so queued logs are flushed even when the user closes the tab.

License

MIT