React · logzai-js/browser

Auto-capture route changes and errors in your React SPA

Two plugins, one init call. logzai-js instruments your React Router navigation and unhandled errors automatically — with Redux state injected on every event.

Get ingest token

npm install logzai-js

No credit card required. 5M events free/month.

What you get out of the box

Automatic route context

Every error includes currentRoute from React Router, injected at capture time.

Error filtering

Skip noisy errors like ResizeObserver or chunk load failures before they hit your quota.

Redux state injection

User ID, email, and org are pulled from your Redux store on every event.

Mirror to console

In development, all captured events appear in your browser DevTools console.

Environment tagging

process.env.NODE_ENV is attached to every event for easy production vs dev filtering.

logger.ts

import logzai, { browserPlugin, spaPlugin } from 'logzai-js/browser'
import { store } from './store'
import { selectCurrentUser } from './store/auth'
import { selectSelectedOrg } from './store/organizations'

logzai.init({
  ingestToken: process.env.REACT_APP_LOGZAI_TOKEN!,
  ingestEndpoint: 'https://ingest.logzai.com',
  serviceName: 'my-react-app',
  environment: process.env.NODE_ENV,
  mirrorToConsole: process.env.NODE_ENV === 'development',
})

// Capture unhandled errors and promise rejections
logzai.plugin('browser', browserPlugin, {
  errorFilter: (error) => {
    // Suppress noisy ResizeObserver errors
    const msg = error?.reason?.message ?? error?.message ?? ''
    return !msg.includes('ResizeObserver loop limit exceeded')
  },
  contextInjector: () => {
    const state = store.getState()
    return {
      userId: selectCurrentUser(state)?.id,
      userEmail: selectCurrentUser(state)?.email,
      orgId: selectSelectedOrg(state)?.id,
      currentRoute: window.location.pathname,
    }
  },
})

// Track React Router navigations
logzai.plugin('spa', spaPlugin, {
  logNavigation: true,
  skipRoutes: ['/health', '/favicon.ico'],
  contextInjector: () => {
    const state = store.getState()
    return {
      userId: selectCurrentUser(state)?.id,
      orgId: selectSelectedOrg(state)?.id,
    }
  },
})

Every event arrives enriched

When React captures an error or navigation, LogzAI receives these fields automatically.

Field	Example value	Captured from
serviceName	my-react-app	logzai.init config
environment	production	process.env.NODE_ENV
userId	usr_01j8x...	Redux selectCurrentUser
userEmail	jane@acme.com	Redux store
orgId	org_9xk...	Redux selectSelectedOrg
currentRoute	/dashboard/reports	window.location.pathname
level	error	browserPlugin
message	Cannot read properties of undefined	error.message

Start sending events in 2 minutes

Add npm install logzai-js to your React app and you're done.

No infrastructure to manage. 5M events free/month.

Analyze your logs with AI

Once events are flowing, ask LogzAI questions in plain English. Find root causes in seconds.

Try LogzAI Free