lumely-react

AI-powered error handling for React applications. Automatically catches errors, explains them to users in plain language then provides developers with error notification and fix suggestions.

Installation

npm install lumely-react

Quick Start

Just wrap your app with LumelyProvider and add your API key:

import { LumelyProvider } from 'lumely-react';

function App() {
  return (
    <LumelyProvider apiKey={import.meta.env.VITE_LUMELY_API_KEY ?? ''}>
      <YourApp />
    </LumelyProvider>
  );
}

That's it! Lumely will automatically:

• Catch errors and display a user-friendly overlay
• Send error data to Lumely's hosted backend
• Generate AI-powered explanations and fix suggestions
• Store errors in your Lumely dashboard

Get Your API Key

1. Sign up at lumely.vercel.app
2. Create a project
3. Copy your API key from the project settings

Environment Variables

Add your API key to your environment file:

Vite:

VITE_LUMELY_API_KEY=lum_your_api_key_here

Create React App:

REACT_APP_LUMELY_API_KEY=lum_your_api_key_here

Features

• AI-Powered Explanations - Errors are explained in plain language
• User Feedback - Collect context about what users were doing
• Modern Glassmorphism UI - Beautiful, customizable overlay
• Fast Response - User message appears in ~2s, detailed analysis runs in background
• Zero Config - Works out of the box with Lumely's hosted backend

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiKey | string | Yes | - | Your Lumely API key | | environment | 'development' | 'production' | No | 'production' | Current environment | | userId | string | No | - | Optional user identifier |

Manual Error Reporting

Report caught errors that don't crash the app:

import { useLumelyReport } from 'lumely-react';

function MyComponent() {
  const { reportError } = useLumelyReport();

  const handleClick = async () => {
    try {
      await fetch('/api/action');
    } catch (error) {
      reportError(error, { action: 'button_click' });
    }
  };

  return <button onClick={handleClick}>Action</button>;
}

License

MIT