@lognitor/react

Official Lognitor SDK for React — error boundaries, context provider, and hooks.

Install

npm install @lognitor/react

Quick Start

import { LognitorProvider, LognitorErrorBoundary } from '@lognitor/react';
import { useLognitor } from '@lognitor/react';

function App() {
  return (
    <LognitorProvider apiKey="your-api-key" service="my-react-app" environment="production">
      <LognitorErrorBoundary fallback={<div>Something went wrong</div>}>
        <MainContent />
      </LognitorErrorBoundary>
    </LognitorProvider>
  );
}

function MainContent() {
  const lognitor = useLognitor();
  return <button onClick={() => lognitor.info('Clicked')}>Click me</button>;
}

Logging Outside Components

For utility functions, stores, or API helpers — no hooks needed:

import Lognitor from '@lognitor/react';

export async function fetchUsers() {
  try {
    return await fetch('/api/users').then(r => r.json());
  } catch (err) {
    Lognitor.captureException(err);
    throw err;
  }
}

Error Boundary

<LognitorErrorBoundary
  fallback={({ error, resetError }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetError}>Try Again</button>
    </div>
  )}
  onError={(error, errorInfo) => console.log(errorInfo.componentStack)}
>
  <MyComponent />
</LognitorErrorBoundary>

useLognitor Hook

const { info, error, captureException, setUser, startTimer, flush } = useLognitor();

Returns the full Lognitor client with all methods.

Configuration

<LognitorProvider> accepts all @lognitor/browser config options as props.

Full documentation: docs.lognitor.com