@logui/react

Official React SDK for LogUI - Simple, powerful logging for React and Next.js applications.

Features

• React Provider Pattern: Easy integration with React context
• React Hooks: useLogui hook for functional components
• Error Boundaries: Automatic React error capture and reporting
• Client-Side Context: Captures browser information, URL, viewport, etc.
• Console Interception: Optionally intercepts browser console methods
• TypeScript Support: Full TypeScript definitions included

Installation

npm install @logui/react

Quick Start

1. Wrap your app with LoguiProvider

import { LoguiProvider } from "@logui/react";

export default function App({ Component, pageProps }) {
  return (
    <LoguiProvider
      apiKey="your-api-key-here"
      apiUrl="https://api.logui.xyz"
    >
      <Component {...pageProps} />
    </LoguiProvider>
  );
}

2. Use the hook in your components

import { useLogui } from "@logui/react";

function MyComponent() {
  const logui = useLogui();

  const handleClick = () => {
    logui.info("Button clicked", {
      component: "MyComponent",
      action: "button_click",
    });
  };

  return <button onClick={handleClick}>Click me</button>;
}

Configuration

<LoguiProvider
  apiKey="your-api-key"
  apiUrl="https://api.logui.xyz"
  metadata={{
    environment: "production",
    version: "1.2.3",
    app: "my-react-app",
  }}
  captureConsole={true}
  captureErrors={true}
  fallback={<div>Error occurred</div>}
>
  {children}
</LoguiProvider>

Logging Methods

const logui = useLogui();

logui.debug("Debug message", { data: "value" });
logui.info("Info message", { data: "value" });
logui.warn("Warning message", { data: "value" });
logui.error("Error message", { data: "value" });

Automatic Features

• Error Boundaries: React errors are automatically captured
• Console Interception: Console methods can be intercepted when enabled
• Client Context: Browser info, URL, viewport, and more are automatically captured

Framework Support

•  Next.js (App Router & Pages Router)
•  Create React App
•  Vite
•  Any React application

Full Documentation

For comprehensive documentation, advanced usage, and examples, visit:

docs.logui.xyz/sdk/react

Links

• Documentation
• GitHub Repository
• Website

License

MIT