React Monitoring & Logging

Monitor React apps in production.

Sentry for Error Tracking

```bash npm install @sentry/react ```

```javascript import * as Sentry from '@sentry/react';

Sentry.init({ dsn: 'your-dsn', environment: 'production' });

function App() { return ( <Sentry.ErrorBoundary fallback={<ErrorPage />}> <MyApp /> </Sentry.ErrorBoundary> ); } ```

Custom Logging

```javascript const logger = { info: (message, meta) => { console.log('[INFO]', message, meta); // Send to logging service }, error: (message, error) => { console.error('[ERROR]', message, error); Sentry.captureException(error); } };

logger.error('API call failed', error); ```

Performance Monitoring

```javascript // Measure component render time const startTime = performance.now(); // Component renders const endTime = performance.now(); console.log(`Render time: ${endTime - startTime}ms`); ```

Analytics

```javascript // Track page views useEffect(() => { analytics.page(window.location.pathname); }, []);

// Track events const handleClick = () => { analytics.track('Button Clicked', { buttonName: 'signup' }); }; ```

Remember

- Use error tracking service - Log important events - Monitor performance - Track user behavior - Set up alerts

> Next: Learn design patterns!