}>


);
}
`

📖 Usage Examples

$3

`tsx
fallback={(error, errorInfo) => (



)}
>


`

$3

`tsx
onError={(error, errorInfo) => {
console.log('Error caught:', error);
analytics.track('error_occurred', {
error: error.message,
componentStack: errorInfo.componentStack
});
}}
>


`

$3

`tsx
import { useBugShot } from '@bugshot/react';

function MyComponent() {
const { captureError, captureMessage, setUser } = useBugShot();

const handleClick = async () => {
try {
await fetchData();
} catch (error) {
captureError(error);
}
};

useEffect(() => {
setUser({
id: '123',
email: 'user@example.com'
});

captureMessage('Component mounted', 'info');
}, []);

return Click me;
}
`

$3

`tsx
// app/providers.tsx
'use client';

import { BugShotProvider, ErrorBoundary } from '@bugshot/react';

export function Providers({ children }) {
return (
config={{
apiKey: process.env.NEXT_PUBLIC_BUGSHOT_API_KEY!,
environment: process.env.NODE_ENV
}}
>

{children}


);
}
`

`tsx
// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }) {
return (


{children}


);
}
`

$3

`tsx
// pages/_app.tsx
import { BugShotProvider, ErrorBoundary } from '@bugshot/react';

function MyApp({ Component, pageProps }) {
return (
config={{
apiKey: process.env.NEXT_PUBLIC_BUGSHOT_API_KEY!,
environment: process.env.NODE_ENV,
release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
}}
>




);
}

export default MyApp;
`

🎯 API Reference

$3

Provider component to initialize BugShot SDK.

Props:
- config (BugShotConfig): SDK configuration
- children (ReactNode): Child components

`tsx



`

$3

React Error Boundary component.

Props:
- children (ReactNode): Components to monitor
- fallback (ReactNode | Function): Fallback UI to show on error
- onError (Function): Callback when error occurs
- reportToBugShot (boolean): Send errors to BugShot (default: true)

`tsx
fallback={}
onError={(error, errorInfo) => {
console.log('Error:', error);
}}
>


`

$3

React Hook for error tracking in functional components.

Returns:
- captureError(error, additionalInfo?): Capture an error
- captureMessage(message, level?): Capture a message
- setUser(user): Set user info
- setContext(key, value): Add context

`tsx
const { captureError, captureMessage, setUser, setContext } = useBugShot();
`

🛠️ TypeScript

Full TypeScript support included:

`tsx
import type { BugShotConfig } from '@bugshot/react';

const config: BugShotConfig = {
apiKey: 'your-api-key',
environment: 'production',
release: '1.0.0'
};
``

📝 License

MIT © BugShot Team

🔗 Links

- Documentation
- Browser SDK
- GitHub