Best Practices

src/
├── components/
│   ├── ui/           # Reusable UI components
│   └── features/     # Feature-specific components
├── hooks/            # Custom React hooks
├── lib/              # Utility functions
├── pages/            # Page components
└── services/         # API services

// Good: Structured error handling
try {
  const result = await api.getData();
  return result;
} catch (error) {
  // Log error with context
  logger.error('Failed to fetch data', {
    error: error.message,
    userId: user.id,
    timestamp: new Date().toISOString()
  });
  
  // Handle specific error types
  if (error.code === 'RATE_LIMITED') {
    // Implement backoff strategy
    await delay(error.retryAfter * 1000);
    return retryWithExponentialBackoff(() => api.getData());
  }
  
  throw error;
}

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

import { memo, useMemo, useCallback } from 'react';

const ExpensiveComponent = memo(({ data, onUpdate }) => {
  const processedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      computed: heavyComputation(item)
    }));
  }, [data]);
  
  const handleUpdate = useCallback((id, value) => {
    onUpdate(id, value);
  }, [onUpdate]);
  
  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} data={item} onUpdate={handleUpdate} />
      ))}
    </div>
  );
});

// Track business metrics
sophonz.track('user.signup', {
  plan: 'premium',
  source: 'landing_page',
  value: 29.99
});

// Track performance metrics
sophonz.time('api.response_time', async () => {
  return await api.fetchUserData();
});

// Track errors with context
sophonz.error('payment.failed', error, {
  userId: user.id,
  amount: payment.amount,
  gateway: 'stripe'
});

const alerts = [
  {
    name: 'High Error Rate',
    condition: 'error_rate > 5%',
    duration: '5m',
    severity: 'critical'
  },
  {
    name: 'Slow Response Time',
    condition: 'avg(response_time) > 2s',
    duration: '10m',
    severity: 'warning'
  },
  {
    name: 'Low User Engagement',
    condition: 'active_users < 100',
    duration: '1h',
    severity: 'info'
  }
];

// Good: Use environment variables
const apiKey = process.env.SOPHONZ_API_KEY;

// Good: Validate API key format
if (!apiKey || !apiKey.startsWith('sk_')) {
  throw new Error('Invalid API key format');
}

// Good: Use different keys for different environments
const config = {
  development: {
    apiKey: process.env.SOPHONZ_DEV_API_KEY
  },
  production: {
    apiKey: process.env.SOPHONZ_PROD_API_KEY
  }
};

// Good: Sanitize sensitive data before logging
const sanitizedUser = {
  id: user.id,
  email: user.email.replace(/(.{2}).*(@.*)/, '$1***$2'),
  // Never log passwords, tokens, or PII
};

sophonz.track('user.action', {
  user: sanitizedUser,
  action: 'profile_update'
});

class RateLimiter {
  constructor(maxRequests, windowMs) {
    this.maxRequests = maxRequests;
    this.windowMs = windowMs;
    this.requests = [];
  }
  
  async request(fn) {
    const now = Date.now();
    this.requests = this.requests.filter(time => now - time < this.windowMs);
    
    if (this.requests.length >= this.maxRequests) {
      const waitTime = this.windowMs - (now - this.requests[0]);
      await new Promise(resolve => setTimeout(resolve, waitTime));
      return this.request(fn);
    }
    
    this.requests.push(now);
    return fn();
  }
}

// Mock Sophonz for testing
jest.mock('@sophonz/sdk');

test('tracks user signup correctly', async () => {
  const mockTrack = jest.fn();
  Sophonz.prototype.track = mockTrack;
  
  await signupUser({ email: 'test@example.com', plan: 'pro' });
  
  expect(mockTrack).toHaveBeenCalledWith('user.signup', {
    plan: 'pro',
    source: 'test'
  });
});

// Use test API keys for integration tests
const testClient = new Sophonz({
  apiKey: process.env.SOPHONZ_TEST_API_KEY,
  environment: 'test'
});

test('real API integration', async () => {
  const result = await testClient.track('test.event', {
    value: 123
  });
  
  expect(result.success).toBe(true);
});

const deployment = {
  strategy: 'blue-green',
  healthCheck: {
    url: '/health',
    timeout: 30000,
    expectedStatus: 200
  },
  rollback: {
    onFailure: true,
    threshold: {
      errorRate: 0.05,
      responseTime: 2000
    }
  }
};

// Gradual feature rollout
const useNewFeature = sophonz.feature('new-dashboard', {
  userId: user.id,
  rolloutPercentage: 10
});

if (useNewFeature) {
  return <NewDashboard />;
} else {
  return <OldDashboard />;
}

// Environment-specific configuration
const config = {
  development: {
    logLevel: 'debug',
    apiTimeout: 30000
  },
  staging: {
    logLevel: 'info',
    apiTimeout: 10000
  },
  production: {
    logLevel: 'error',
    apiTimeout: 5000
  }
};

// Track page load performance
window.addEventListener('load', () => {
  const perfData = performance.getEntriesByType('navigation')[0];
  
  sophonz.track('page.performance', {
    loadTime: perfData.loadEventEnd - perfData.loadEventStart,
    domContentLoaded: perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart,
    firstByte: perfData.responseStart - perfData.requestStart
  });
});