React Monitoring & Logging

Monitor React apps in production.

Sentry for Error Tracking

npm install @sentry/react

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

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

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

Analytics

// 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!