BugShot React integration
npm install @bugshot/reactOfficial BugShot integration for React applications.


- ✅ Error Boundary - Catch React component errors
- ✅ Provider Component - Easy setup
- ✅ React Hooks - Functional components support
- ✅ TypeScript Support - Full type definitions
- ✅ Automatic Error Capture - Works out of the box
- ✅ Custom Fallback UI - Show friendly error messages
``bash`
npm install @bugshot/react @bugshot/browser-sdk
`tsx
import { BugShotProvider, ErrorBoundary } from '@bugshot/react';
function App() {
return (
);
}
`
`tsx
import { ErrorBoundary } from '@bugshot/react';
import BugShot from '@bugshot/browser-sdk';
// Initialize SDK first
BugShot.init({ apiKey: 'your-api-key' });
function App() {
return (
📖 Usage Examples
$3
`tsx
fallback={(error, errorInfo) => (
Error Occurred
{error.message}
)}
>
`$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 ;
}
`$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'
};
``MIT © BugShot Team