Best Practices

1src/
2├── components/
3│   ├── ui/           # Reusable UI components
4│   └── features/     # Feature-specific components
5├── hooks/            # Custom React hooks
6├── lib/              # Utility functions
7├── pages/            # Page components
8└── services/         # API services

1// Good: Structured error handling
2try {
3  const result = await api.getData();
4  return result;
5} catch (error) {
6  // Log error with context
7  logger.error('Failed to fetch data', {
8    error: error.message,
9    userId: user.id,
10    timestamp: new Date().toISOString()
11  });
12  
13  // Handle specific error types
14  if (error.code === 'RATE_LIMITED') {
15    // Implement backoff strategy
16    await delay(error.retryAfter * 1000);
17    return retryWithExponentialBackoff(() => api.getData());
18  }
19  
20  throw error;
21}

1import { lazy, Suspense } from 'react';
2
3const Dashboard = lazy(() => import('./Dashboard'));
4
5function App() {
6  return (
7    <Suspense fallback={<div>Loading...</div>}>
8      <Dashboard />
9    </Suspense>
10  );
11}

1import { memo, useMemo, useCallback } from 'react';
2
3const ExpensiveComponent = memo(({ data, onUpdate }) => {
4  const processedData = useMemo(() => {
5    return data.map(item => ({
6      ...item,
7      computed: heavyComputation(item)
8    }));
9  }, [data]);
10  
11  const handleUpdate = useCallback((id, value) => {
12    onUpdate(id, value);
13  }, [onUpdate]);
14  
15  return (
16    <div>
17      {processedData.map(item => (
18        <Item key={item.id} data={item} onUpdate={handleUpdate} />
19      ))}
20    </div>
21  );
22});

1// Track business metrics
2sophonz.track('user.signup', {
3  plan: 'premium',
4  source: 'landing_page',
5  value: 29.99
6});
7
8// Track performance metrics
9sophonz.time('api.response_time', async () => {
10  return await api.fetchUserData();
11});
12
13// Track errors with context
14sophonz.error('payment.failed', error, {
15  userId: user.id,
16  amount: payment.amount,
17  gateway: 'stripe'
18});

1const alerts = [
2  {
3    name: 'High Error Rate',
4    condition: 'error_rate > 5%',
5    duration: '5m',
6    severity: 'critical'
7  },
8  {
9    name: 'Slow Response Time',
10    condition: 'avg(response_time) > 2s',
11    duration: '10m',
12    severity: 'warning'
13  },
14  {
15    name: 'Low User Engagement',
16    condition: 'active_users < 100',
17    duration: '1h',
18    severity: 'info'
19  }
20];

1// Good: Use environment variables
2const apiKey = process.env.SOPHONZ_API_KEY;
3
4// Good: Validate API key format
5if (!apiKey || !apiKey.startsWith('sk_')) {
6  throw new Error('Invalid API key format');
7}
8
9// Good: Use different keys for different environments
10const config = {
11  development: {
12    apiKey: process.env.SOPHONZ_DEV_API_KEY
13  },
14  production: {
15    apiKey: process.env.SOPHONZ_PROD_API_KEY
16  }
17};

1// Good: Sanitize sensitive data before logging
2const sanitizedUser = {
3  id: user.id,
4  email: user.email.replace(/(.{2}).*(@.*)/, '$1***$2'),
5  // Never log passwords, tokens, or PII
6};
7
8sophonz.track('user.action', {
9  user: sanitizedUser,
10  action: 'profile_update'
11});

1class RateLimiter {
2  constructor(maxRequests, windowMs) {
3    this.maxRequests = maxRequests;
4    this.windowMs = windowMs;
5    this.requests = [];
6  }
7  
8  async request(fn) {
9    const now = Date.now();
10    this.requests = this.requests.filter(time => now - time < this.windowMs);
11    
12    if (this.requests.length >= this.maxRequests) {
13      const waitTime = this.windowMs - (now - this.requests[0]);
14      await new Promise(resolve => setTimeout(resolve, waitTime));
15      return this.request(fn);
16    }
17    
18    this.requests.push(now);
19    return fn();
20  }
21}

1// Mock Sophonz for testing
2jest.mock('@sophonz/sdk');
3
4test('tracks user signup correctly', async () => {
5  const mockTrack = jest.fn();
6  Sophonz.prototype.track = mockTrack;
7  
8  await signupUser({ email: 'test@example.com', plan: 'pro' });
9  
10  expect(mockTrack).toHaveBeenCalledWith('user.signup', {
11    plan: 'pro',
12    source: 'test'
13  });
14});

1// Use test API keys for integration tests
2const testClient = new Sophonz({
3  apiKey: process.env.SOPHONZ_TEST_API_KEY,
4  environment: 'test'
5});
6
7test('real API integration', async () => {
8  const result = await testClient.track('test.event', {
9    value: 123
10  });
11  
12  expect(result.success).toBe(true);
13});

1const deployment = {
2  strategy: 'blue-green',
3  healthCheck: {
4    url: '/health',
5    timeout: 30000,
6    expectedStatus: 200
7  },
8  rollback: {
9    onFailure: true,
10    threshold: {
11      errorRate: 0.05,
12      responseTime: 2000
13    }
14  }
15};

1// Gradual feature rollout
2const useNewFeature = sophonz.feature('new-dashboard', {
3  userId: user.id,
4  rolloutPercentage: 10
5});
6
7if (useNewFeature) {
8  return <NewDashboard />;
9} else {
10  return <OldDashboard />;
11}

1// Environment-specific configuration
2const config = {
3  development: {
4    logLevel: 'debug',
5    apiTimeout: 30000
6  },
7  staging: {
8    logLevel: 'info',
9    apiTimeout: 10000
10  },
11  production: {
12    logLevel: 'error',
13    apiTimeout: 5000
14  }
15};

1// Track page load performance
2window.addEventListener('load', () => {
3  const perfData = performance.getEntriesByType('navigation')[0];
4  
5  sophonz.track('page.performance', {
6    loadTime: perfData.loadEventEnd - perfData.loadEventStart,
7    domContentLoaded: perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart,
8    firstByte: perfData.responseStart - perfData.requestStart
9  });
10});