Manual Error Reporting

Cluebase automatically catches React crashes and unhandled exceptions. But for errors you catch and handle gracefully—like failed API calls or validation errors—use the useCluebaseReport hook.

When to use manual reporting

Use reportError() when you catch an error but still want it logged to your dashboard.

Basic Usage

PaymentForm.tsx

import { useCluebaseReport } from 'cluebase-next';

function PaymentForm() {
    const { reportError } = useCluebaseReport();

    const handlePayment = async () => {
        try {
            const res = await fetch('/api/payments', { 
                method: 'POST' 
            });

            if (!res.ok) {
                // Report the API error to Cluebase
                const error = new Error(`Payment failed: ${res.status}`);
                await reportError(error, { 
                    action: 'payment',
                    statusCode: res.status 
                });
                
                alert('Payment failed. Please try again.');
            }
        } catch (err) {
            // Network errors
            await reportError(err as Error, { action: 'payment' });
            alert('Network error. Check your connection.');
        }
    };

    return <button onClick={handlePayment}>Pay Now</button>;
}

Adding Context

Pass additional context as the second argument to help with debugging.

tsx

await reportError(error, {
    action: 'user_signup',
    userId: user.id,
    email: user.email,
    formStep: 'payment',
});

Reusable Fetch Wrapper

Create a wrapper function that automatically reports API failures.

lib/fetchWithCluebase.ts

import { useCluebaseReport } from 'cluebase-next';

// Create a hook-based fetch wrapper
export function useFetchWithCluebase() {
    const { reportError } = useCluebaseReport();
    
    return async (url: string, options?: RequestInit) => {
        try {
            const res = await fetch(url, options);
            
            if (!res.ok) {
                const error = new Error(`${res.status}: ${url}`);
                await reportError(error, { 
                    url, 
                    status: res.status,
                    method: options?.method || 'GET'
                });
                throw error;
            }
            
            return res;
        } catch (err) {
            if (err instanceof Error) {
                await reportError(err, { url });
            }
            throw err;
        }
    };
}

// Usage:
const fetchWithCluebase = useFetchWithCluebase();
const data = await fetchWithCluebase('/api/users');

What Gets Captured

When you call reportError(), Cluebase captures:

Error message & stack trace
Current URL and user agent
Session ID for grouping
Timestamp
Your custom context

Avoid sensitive data

Don't include passwords, credit cards, or PII in the error context.

Behavior

Silent: No overlay shown to user
Instant: Sent to API immediately
Full Analysis: AI analysis included