@jmruthers/pace-core 0.6.5 → 0.6.7

package/docs/best-practices/deployment.md

@@ -1,1103 +0,0 @@
----
-lastUpdated: 2025-11-18T17:00:00+11:00
-version: 0.5.181
-reviewedBy: documentation-standards-audit
----
-
-# Deployment Best Practices
-
-Proper deployment is crucial for production success. This guide provides comprehensive deployment strategies and best practices for `@jmruthers/pace-core` applications.
-
-## Overview
-
-Deployment in `@jmruthers/pace-core` covers multiple environments:
-
-- **Development**: Local development and testing
-- **Staging**: Pre-production testing and validation
-- **Production**: Live application with high availability
-- **CI/CD**: Automated build and deployment pipelines
-
-## Environment Configuration
-
-### 1. Environment Variables
-
-```typescript
-// .env.local (development)
-VITE_SUPABASE_URL=http://localhost:54321
-// Accepts both legacy anon keys and modern publishable keys (sb_publishable_...)
-VITE_SUPABASE_PUBLISHABLE_KEY=your-local-publishable-key
-VITE_APP_ENV=development
-VITE_DEBUG=true
-
-// .env.staging
-VITE_SUPABASE_URL=https://your-project.supabase.co
-// Accepts both legacy anon keys and modern publishable keys (sb_publishable_...)
-VITE_SUPABASE_PUBLISHABLE_KEY=your-staging-publishable-key
-VITE_APP_ENV=staging
-VITE_DEBUG=false
-
-// .env.production
-VITE_SUPABASE_URL=https://your-project.supabase.co
-// Accepts both legacy anon keys and modern publishable keys (sb_publishable_...)
-VITE_SUPABASE_PUBLISHABLE_KEY=your-production-publishable-key
-VITE_APP_ENV=production
-VITE_DEBUG=false
-```
-
-### 2. Environment-Specific Configuration
-
-```typescript
-// config/environment.ts
-export const getEnvironmentConfig = () => {
-  const env = import.meta.env.VITE_APP_ENV || 'development';
-  
-  const configs = {
-    development: {
-      apiUrl: 'http://localhost:54321',
-      debug: true,
-      logLevel: 'debug',
-      features: {
-        analytics: false,
-        monitoring: false,
-      },
-    },
-    staging: {
-      apiUrl: 'https://your-staging-project.supabase.co',
-      debug: false,
-      logLevel: 'info',
-      features: {
-        analytics: true,
-        monitoring: true,
-      },
-    },
-    production: {
-      apiUrl: 'https://your-production-project.supabase.co',
-      debug: false,
-      logLevel: 'warn',
-      features: {
-        analytics: true,
-        monitoring: true,
-      },
-    },
-  };
-
-  return configs[env] || configs.development;
-};
-```
-
-### 3. Feature Flags
-
-```typescript
-// utils/featureFlags.ts
-export const FEATURE_FLAGS = {
-  NEW_UI: process.env.VITE_FEATURE_NEW_UI === 'true',
-  BETA_FEATURES: process.env.VITE_FEATURE_BETA === 'true',
-  ANALYTICS: process.env.VITE_FEATURE_ANALYTICS === 'true',
-  DEBUG_MODE: process.env.VITE_DEBUG === 'true',
-};
-
-export const isFeatureEnabled = (feature: keyof typeof FEATURE_FLAGS) => {
-  return FEATURE_FLAGS[feature];
-};
-
-// Usage in components
-function MyComponent() {
-  if (isFeatureEnabled('NEW_UI')) {
-    return <NewUIComponent />;
-  }
-  return <LegacyComponent />;
-}
-```
-
-## Build Optimization
-
-### 1. Production Build Configuration
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { resolve } from 'path';
-
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    target: 'es2015',
-    outDir: 'dist',
-    sourcemap: false, // Disable in production
-    minify: 'terser',
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          vendor: ['react', 'react-dom'],
-          paceCore: ['@jmruthers/pace-core'],
-          supabase: ['@supabase/supabase-js'],
-        },
-      },
-    },
-    terserOptions: {
-      compress: {
-        drop_console: true, // Remove console.log in production
-        drop_debugger: true,
-      },
-    },
-  },
-  define: {
-    __DEV__: JSON.stringify(process.env.NODE_ENV === 'development'),
-  },
-});
-```
-
-### 2. Bundle Analysis
-
-```typescript
-// scripts/analyze-bundle.js
-import { build } from 'vite';
-import { visualizer } from 'rollup-plugin-visualizer';
-
-export default defineConfig({
-  plugins: [
-    visualizer({
-      filename: 'dist/stats.html',
-      open: true,
-      gzipSize: true,
-      brotliSize: true,
-    }),
-  ],
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          vendor: ['react', 'react-dom'],
-          paceCore: ['@jmruthers/pace-core'],
-          supabase: ['@supabase/supabase-js'],
-          utils: ['lodash', 'date-fns'],
-        },
-      },
-    },
-  },
-});
-```
-
-### 3. Code Splitting
-
-```typescript
-// Lazy load components based on routes
-import { lazy, Suspense } from 'react';
-
-const AdminDashboard = lazy(() => import('./AdminDashboard'));
-const UserDashboard = lazy(() => import('./UserDashboard'));
-const Analytics = lazy(() => import('./Analytics'));
-
-import { useCan } from '@jmruthers/pace-core/rbac';
-
-function App() {
-  const { user, selectedOrganisationId } = useUnifiedAuth();
-  const { can: canViewAdmin } = useCan(
-    user?.id || '',
-    { organisationId: selectedOrganisationId || '', eventId: undefined, appId: undefined },
-    'read:page.admin'
-  );
-
-  return (
-    <Suspense fallback={<LoadingSpinner />}>
-      {canViewAdmin ? (
-        <AdminDashboard />
-      ) : (
-        <UserDashboard />
-      )}
-      {canViewAdmin && (
-        <Suspense fallback={<div>Loading analytics...</div>}>
-          <Analytics />
-        </Suspense>
-      )}
-    </Suspense>
-  );
-}
-```
-
-## CI/CD Pipeline
-
-### 1. GitHub Actions Workflow
-
-```yaml
-# .github/workflows/deploy.yml
-name: Deploy
-
-on:
-  push:
-    branches: [main, develop]
-  pull_request:
-    branches: [main]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-          cache: 'npm'
-      
-      - name: Install dependencies
-        run: npm ci
-      
-      - name: Run tests
-        run: npm test
-      
-      - name: Run type check
-        run: npm run type-check
-      
-      - name: Run linting
-        run: npm run lint
-
-  build:
-    needs: test
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-          cache: 'npm'
-      
-      - name: Install dependencies
-        run: npm ci
-      
-      - name: Build application
-        run: npm run build
-        env:
-          VITE_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
-          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.SUPABASE_PUBLISHABLE_KEY }}
-          VITE_APP_ENV: production
-      
-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: build-files
-          path: dist/
-
-  deploy-staging:
-    needs: build
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/develop'
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Download build artifacts
-        uses: actions/download-artifact@v3
-        with:
-          name: build-files
-          path: dist/
-      
-      - name: Deploy to staging
-        run: |
-          # Deploy to staging environment
-          # This could be Vercel, Netlify, AWS, etc.
-          echo "Deploying to staging..."
-
-  deploy-production:
-    needs: build
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-    environment: production
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Download build artifacts
-        uses: actions/download-artifact@v3
-        with:
-          name: build-files
-          path: dist/
-      
-      - name: Deploy to production
-        run: |
-          # Deploy to production environment
-          echo "Deploying to production..."
-```
-
-### 2. Environment-Specific Deployments
-
-```yaml
-# .github/workflows/deploy-staging.yml
-name: Deploy to Staging
-
-on:
-  push:
-    branches: [develop]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-          cache: 'npm'
-      
-      - name: Install dependencies
-        run: npm ci
-      
-      - name: Run tests
-        run: npm test
-      
-      - name: Build for staging
-        run: npm run build:staging
-        env:
-          VITE_SUPABASE_URL: ${{ secrets.STAGING_SUPABASE_URL }}
-          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.STAGING_SUPABASE_PUBLISHABLE_KEY }}
-          VITE_APP_ENV: staging
-      
-      - name: Deploy to Vercel (Staging)
-        uses: amondnet/vercel-action@v25
-        with:
-          vercel-token: ${{ secrets.VERCEL_TOKEN }}
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
-          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
-          vercel-args: '--prod'
-```
-
-### 3. Automated Testing in CI
-
-```yaml
-# .github/workflows/test.yml
-name: Test
-
-on:
-  push:
-    branches: [main, develop]
-  pull_request:
-    branches: [main]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16, 18, 20]
-    
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      
-      - name: Install dependencies
-        run: npm ci
-      
-      - name: Run unit tests
-        run: npm run test:unit
-      
-      - name: Run integration tests
-        run: npm run test:integration
-      
-      - name: Run E2E tests
-        run: npm run test:e2e
-      
-      - name: Upload coverage
-        uses: codecov/codecov-action@v3
-        with:
-          file: ./coverage/lcov.info
-```
-
-## Deployment Platforms
-
-### 1. Vercel Deployment
-
-```json
-// vercel.json
-{
-  "version": 2,
-  "builds": [
-    {
-      "src": "package.json",
-      "use": "@vercel/static-build",
-      "config": {
-        "distDir": "dist"
-      }
-    }
-  ],
-  "routes": [
-    {
-      "src": "/api/(.*)",
-      "dest": "/api/$1"
-    },
-    {
-      "src": "/(.*)",
-      "dest": "/index.html"
-    }
-  ],
-  "env": {
-    "VITE_SUPABASE_URL": "@supabase-url",
-    "VITE_SUPABASE_PUBLISHABLE_KEY": "@supabase-publishable-key"
-  }
-}
-```
-
-### 2. Netlify Deployment
-
-```toml
-# netlify.toml
-[build]
-  command = "npm run build"
-  publish = "dist"
-
-[build.environment]
-  VITE_SUPABASE_URL = "https://your-project.supabase.co"
-  VITE_APP_ENV = "production"
-
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
-
-[[headers]]
-  for = "/*"
-  [headers.values]
-    X-Frame-Options = "DENY"
-    X-XSS-Protection = "1; mode=block"
-    X-Content-Type-Options = "nosniff"
-    Referrer-Policy = "strict-origin-when-cross-origin"
-```
-
-### 3. AWS S3 + CloudFront
-
-```typescript
-// scripts/deploy-aws.js
-import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
-import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
-import { readdir, readFile } from 'fs/promises';
-import { join } from 'path';
-
-const s3Client = new S3Client({ region: 'us-east-1' });
-const cloudFrontClient = new CloudFrontClient({ region: 'us-east-1' });
-
-async function deployToS3() {
-  const bucketName = process.env.AWS_S3_BUCKET;
-  const distributionId = process.env.AWS_CLOUDFRONT_DISTRIBUTION_ID;
-  
-  // Upload build files to S3
-  const buildDir = join(process.cwd(), 'dist');
-  const files = await readdir(buildDir, { recursive: true });
-  
-  for (const file of files) {
-    const filePath = join(buildDir, file);
-    const fileContent = await readFile(filePath);
-    
-    await s3Client.send(new PutObjectCommand({
-      Bucket: bucketName,
-      Key: file,
-      Body: fileContent,
-      ContentType: getContentType(file),
-      CacheControl: getCacheControl(file),
-    }));
-  }
-  
-  // Invalidate CloudFront cache
-  await cloudFrontClient.send(new CreateInvalidationCommand({
-    DistributionId: distributionId,
-    InvalidationBatch: {
-      Paths: {
-        Quantity: 1,
-        Items: ['/*'],
-      },
-      CallerReference: Date.now().toString(),
-    },
-  }));
-}
-
-function getContentType(filename) {
-  if (filename.endsWith('.html')) return 'text/html';
-  if (filename.endsWith('.css')) return 'text/css';
-  if (filename.endsWith('.js')) return 'application/javascript';
-  if (filename.endsWith('.json')) return 'application/json';
-  return 'application/octet-stream';
-}
-
-function getCacheControl(filename) {
-  if (filename.endsWith('.html')) return 'no-cache';
-  if (filename.endsWith('.css') || filename.endsWith('.js')) return 'public, max-age=31536000';
-  return 'public, max-age=86400';
-}
-
-deployToS3().catch(console.error);
-```
-
-## Security Deployment
-
-### 1. Security Headers
-
-```typescript
-// server/security-headers.js
-export const securityHeaders = {
-  'Content-Security-Policy': [
-    "default-src 'self'",
-    "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
-    "style-src 'self' 'unsafe-inline'",
-    "img-src 'self' data: https:",
-    "font-src 'self'",
-    "connect-src 'self' https://*.supabase.co",
-    "frame-ancestors 'none'",
-  ].join('; '),
-  
-  'X-Frame-Options': 'DENY',
-  'X-Content-Type-Options': 'nosniff',
-  'X-XSS-Protection': '1; mode=block',
-  'Referrer-Policy': 'strict-origin-when-cross-origin',
-  'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',
-  'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
-};
-```
-
-### 2. Environment Variable Security
-
-```bash
-# .env.example (template for required variables)
-VITE_SUPABASE_URL=
-VITE_SUPABASE_PUBLISHABLE_KEY=
-VITE_APP_ENV=development
-VITE_DEBUG=false
-
-# .env.production (actual production values - never commit)
-VITE_SUPABASE_URL=https://your-project.supabase.co
-VITE_SUPABASE_PUBLISHABLE_KEY=your-production-publishable-key
-VITE_APP_ENV=production
-VITE_DEBUG=false
-```
-
-### 3. SSL/TLS Configuration
-
-```nginx
-# nginx.conf
-server {
-    listen 443 ssl http2;
-    server_name your-domain.com;
-    
-    ssl_certificate /path/to/certificate.crt;
-    ssl_certificate_key /path/to/private.key;
-    
-    ssl_protocols TLSv1.2 TLSv1.3;
-    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
-    ssl_prefer_server_ciphers off;
-    
-    ssl_session_cache shared:SSL:10m;
-    ssl_session_timeout 10m;
-    
-    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
-    add_header X-Frame-Options DENY always;
-    add_header X-Content-Type-Options nosniff always;
-    add_header X-XSS-Protection "1; mode=block" always;
-    
-    location / {
-        root /var/www/html;
-        try_files $uri $uri/ /index.html;
-    }
-}
-```
-
-## Monitoring and Logging
-
-### 1. Application Monitoring
-
-```typescript
-// utils/monitoring.ts
-export class ApplicationMonitor {
-  private static instance: ApplicationMonitor;
-  private metrics: Map<string, number> = new Map();
-  private errors: Error[] = [];
-
-  static getInstance(): ApplicationMonitor {
-    if (!ApplicationMonitor.instance) {
-      ApplicationMonitor.instance = new ApplicationMonitor();
-    }
-    return ApplicationMonitor.instance;
-  }
-
-  trackEvent(eventName: string, properties?: Record<string, any>) {
-    // Send to analytics service
-    if (typeof gtag !== 'undefined') {
-      gtag('event', eventName, properties);
-    }
-    
-    // Track custom metrics
-    this.metrics.set(eventName, (this.metrics.get(eventName) || 0) + 1);
-  }
-
-  trackError(error: Error, context?: Record<string, any>) {
-    this.errors.push(error);
-    
-    // Send to error tracking service
-    if (typeof Sentry !== 'undefined') {
-      Sentry.captureException(error, {
-        extra: context,
-      });
-    }
-  }
-
-  trackPerformance(metric: string, value: number) {
-    // Send to performance monitoring service
-    if (typeof gtag !== 'undefined') {
-      gtag('event', 'timing_complete', {
-        name: metric,
-        value: value,
-      });
-    }
-  }
-
-  getMetrics() {
-    return Object.fromEntries(this.metrics);
-  }
-
-  getErrors() {
-    return this.errors;
-  }
-}
-
-// Usage
-const monitor = ApplicationMonitor.getInstance();
-monitor.trackEvent('user_login');
-monitor.trackError(new Error('API call failed'), { endpoint: '/api/events' });
-monitor.trackPerformance('page_load', 1200);
-```
-
-### 2. Health Checks
-
-```typescript
-// api/health.ts
-export const healthCheck = async (req: Request, res: Response) => {
-  try {
-    // Check database connection
-    const { data, error } = await supabase
-      .from('health_check')
-      .select('*')
-      .limit(1);
-
-    if (error) {
-      return res.status(503).json({
-        status: 'unhealthy',
-        database: 'down',
-        timestamp: new Date().toISOString(),
-      });
-    }
-
-    // Check external services
-    const externalServices = await Promise.allSettled([
-      fetch('https://api.supabase.co/health'),
-      fetch('https://your-analytics-service.com/health'),
-    ]);
-
-    const healthy = externalServices.every(result => 
-      result.status === 'fulfilled' && result.value.ok
-    );
-
-    return res.status(healthy ? 200 : 503).json({
-      status: healthy ? 'healthy' : 'degraded',
-      database: 'up',
-      external_services: externalServices.map(result => 
-        result.status === 'fulfilled' && result.value.ok ? 'up' : 'down'
-      ),
-      timestamp: new Date().toISOString(),
-    });
-  } catch (error) {
-    return res.status(503).json({
-      status: 'unhealthy',
-      error: error.message,
-      timestamp: new Date().toISOString(),
-    });
-  }
-};
-```
-
-### 3. Logging Configuration
-
-```typescript
-// utils/logger.ts
-export enum LogLevel {
-  DEBUG = 0,
-  INFO = 1,
-  WARN = 2,
-  ERROR = 3,
-}
-
-export class Logger {
-  private level: LogLevel;
-  private context: string;
-
-  constructor(context: string, level: LogLevel = LogLevel.INFO) {
-    this.context = context;
-    this.level = level;
-  }
-
-  debug(message: string, data?: any) {
-    if (this.level <= LogLevel.DEBUG) {
-      console.debug(`[DEBUG] ${this.context}: ${message}`, data);
-    }
-  }
-
-  info(message: string, data?: any) {
-    if (this.level <= LogLevel.INFO) {
-      console.info(`[INFO] ${this.context}: ${message}`, data);
-    }
-  }
-
-  warn(message: string, data?: any) {
-    if (this.level <= LogLevel.WARN) {
-      console.warn(`[WARN] ${this.context}: ${message}`, data);
-    }
-  }
-
-  error(message: string, error?: Error, data?: any) {
-    if (this.level <= LogLevel.ERROR) {
-      console.error(`[ERROR] ${this.context}: ${message}`, error, data);
-    }
-  }
-}
-
-// Usage
-const logger = new Logger('AuthService', LogLevel.DEBUG);
-logger.info('User logged in', { userId: '123' });
-logger.error('Authentication failed', new Error('Invalid credentials'));
-```
-
-## Rollback Strategy
-
-### 1. Blue-Green Deployment
-
-```yaml
-# .github/workflows/blue-green-deploy.yml
-name: Blue-Green Deployment
-
-on:
-  push:
-    branches: [main]
-
-jobs:
-  deploy-blue:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Deploy to Blue Environment
-        run: |
-          # Deploy to blue environment
-          echo "Deploying to blue environment..."
-          
-      - name: Run Health Checks
-        run: |
-          # Run health checks on blue environment
-          curl -f https://blue.your-domain.com/health
-          
-      - name: Switch Traffic to Blue
-        run: |
-          # Switch traffic from green to blue
-          echo "Switching traffic to blue environment..."
-
-  rollback:
-    runs-on: ubuntu-latest
-    if: failure()
-    steps:
-      - name: Rollback to Green
-        run: |
-          # Rollback to green environment
-          echo "Rolling back to green environment..."
-```
-
-### 2. Canary Deployment
-
-```typescript
-// utils/canary-deployment.ts
-export class CanaryDeployment {
-  private static instance: CanaryDeployment;
-  private currentVersion: string;
-  private canaryPercentage: number = 0;
-
-  static getInstance(): CanaryDeployment {
-    if (!CanaryDeployment.instance) {
-      CanaryDeployment.instance = new CanaryDeployment();
-    }
-    return CanaryDeployment.instance;
-  }
-
-  setCanaryPercentage(percentage: number) {
-    this.canaryPercentage = Math.max(0, Math.min(100, percentage));
-  }
-
-  shouldServeCanary(userId: string): boolean {
-    // Deterministic canary selection based on user ID
-    const hash = this.hashString(userId);
-    return (hash % 100) < this.canaryPercentage;
-  }
-
-  private hashString(str: string): number {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-      const char = str.charCodeAt(i);
-      hash = ((hash << 5) - hash) + char;
-      hash = hash & hash; // Convert to 32-bit integer
-    }
-    return Math.abs(hash);
-  }
-
-  trackCanaryMetrics(userId: string, version: string, success: boolean) {
-    // Track canary metrics
-    const monitor = ApplicationMonitor.getInstance();
-    monitor.trackEvent('canary_request', {
-      userId,
-      version,
-      success,
-      percentage: this.canaryPercentage,
-    });
-  }
-}
-
-// Usage
-const canary = CanaryDeployment.getInstance();
-canary.setCanaryPercentage(10); // 10% of users get canary
-
-if (canary.shouldServeCanary(user.id)) {
-  // Serve canary version
-  canary.trackCanaryMetrics(user.id, 'v2.0.0', true);
-}
-```
-
-## Performance Monitoring
-
-### 1. Core Web Vitals
-
-```typescript
-// utils/web-vitals.ts
-import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
-
-export const trackWebVitals = () => {
-  getCLS(console.log);
-  getFID(console.log);
-  getFCP(console.log);
-  getLCP(console.log);
-  getTTFB(console.log);
-};
-
-export const trackCustomMetrics = () => {
-  // Track custom performance metrics
-  const observer = new PerformanceObserver((list) => {
-    for (const entry of list.getEntries()) {
-      const monitor = ApplicationMonitor.getInstance();
-      monitor.trackPerformance(entry.name, entry.startTime);
-    }
-  });
-
-  observer.observe({ entryTypes: ['measure', 'navigation'] });
-};
-
-// Track component render times
-export const trackComponentPerformance = (componentName: string) => {
-  const startTime = performance.now();
-  
-  return () => {
-    const endTime = performance.now();
-    const renderTime = endTime - startTime;
-    
-    const monitor = ApplicationMonitor.getInstance();
-    monitor.trackPerformance(`${componentName}_render`, renderTime);
-  };
-};
-```
-
-### 2. Error Tracking
-
-```typescript
-// utils/error-tracking.ts
-import * as Sentry from '@sentry/react';
-
-export const initializeErrorTracking = () => {
-  if (process.env.VITE_APP_ENV === 'production') {
-    Sentry.init({
-      dsn: process.env.VITE_SENTRY_DSN,
-      environment: process.env.VITE_APP_ENV,
-      integrations: [
-        new Sentry.BrowserTracing(),
-        new Sentry.Replay(),
-      ],
-      tracesSampleRate: 0.1,
-      replaysSessionSampleRate: 0.1,
-      replaysOnErrorSampleRate: 1.0,
-    });
-  }
-};
-
-export const captureError = (error: Error, context?: Record<string, any>) => {
-  if (process.env.VITE_APP_ENV === 'production') {
-    Sentry.captureException(error, {
-      extra: context,
-    });
-  } else {
-    console.error('Error captured:', error, context);
-  }
-};
-```
-
-## Deployment Checklist
-
-### Pre-Deployment Checklist
-
-- [ ] All tests passing
-- [ ] Code review completed
-- [ ] Security scan passed
-- [ ] Performance benchmarks met
-- [ ] Environment variables configured
-- [ ] Database migrations applied
-- [ ] SSL certificates valid
-- [ ] Monitoring configured
-- [ ] Rollback plan ready
-- [ ] Team notified
-
-### Deployment Checklist
-
-- [ ] Deploy to staging environment
-- [ ] Run smoke tests
-- [ ] Verify all features work
-- [ ] Check performance metrics
-- [ ] Validate security headers
-- [ ] Test error handling
-- [ ] Verify monitoring alerts
-- [ ] Deploy to production
-- [ ] Monitor application health
-- [ ] Verify user experience
-
-### Post-Deployment Checklist
-
-- [ ] Monitor error rates
-- [ ] Check performance metrics
-- [ ] Verify user feedback
-- [ ] Monitor resource usage
-- [ ] Check security alerts
-- [ ] Validate analytics data
-- [ ] Update documentation
-- [ ] Archive old deployment
-- [ ] Clean up temporary files
-- [ ] Schedule next deployment
-
-## Troubleshooting Deployment Issues
-
-### 1. Common Deployment Problems
-
-```typescript
-// utils/deployment-troubleshooting.ts
-export const commonDeploymentIssues = {
-  buildFailures: {
-    symptoms: ['Build timeout', 'Memory errors', 'Dependency conflicts'],
-    solutions: [
-      'Increase build memory allocation',
-      'Update dependencies',
-      'Clear build cache',
-      'Check for circular dependencies',
-    ],
-  },
-  
-  environmentIssues: {
-    symptoms: ['Missing environment variables', 'Wrong API endpoints'],
-    solutions: [
-      'Verify all required env vars are set',
-      'Check environment-specific configs',
-      'Validate API credentials',
-      'Test API connectivity',
-    ],
-  },
-  
-  performanceIssues: {
-    symptoms: ['Slow page loads', 'High memory usage'],
-    solutions: [
-      'Optimize bundle size',
-      'Implement code splitting',
-      'Add caching strategies',
-      'Monitor resource usage',
-    ],
-  },
-};
-```
-
-### 2. Emergency Rollback
-
-```bash
-#!/bin/bash
-# emergency-rollback.sh
-
-echo "Starting emergency rollback..."
-
-# Stop current deployment
-echo "Stopping current deployment..."
-# Add your deployment stop commands here
-
-# Rollback to previous version
-echo "Rolling back to previous version..."
-# Add your rollback commands here
-
-# Verify rollback
-echo "Verifying rollback..."
-curl -f https://your-domain.com/health
-
-if [ $? -eq 0 ]; then
-    echo "Rollback successful"
-    exit 0
-else
-    echo "Rollback failed"
-    exit 1
-fi
-
-## ♿ Accessibility
-
-Deployment should maintain accessibility:
-
-- **Production builds maintain accessibility** - Verify accessibility features work in production
-- **Environment variables don't break accessibility** - Ensure accessibility settings are correct
-- **CDN caching doesn't affect accessibility** - Verify cached assets maintain accessibility
-- **Error pages are accessible** - Ensure error pages meet accessibility standards
-- **Monitoring includes accessibility metrics** - Track accessibility in production
-
-### Accessibility Best Practices
-
-1. **Test production builds with screen readers** - Verify accessibility works in production
-2. **Monitor accessibility in production** - Track accessibility metrics
-3. **Ensure error pages are accessible** - Error pages should meet WCAG standards
-4. **Test with assistive technologies** - Verify production deployment works with screen readers
-5. **Document accessibility requirements** - Include accessibility in deployment checklists
-
-## ⚠️ Edge Cases
-
-### Deployment Failures
-
-When deployment fails:
-- Have rollback plan ready
-- Test deployment procedures in staging
-- Monitor deployment logs
-- Verify all dependencies are available
-- Test with minimal configuration
-
-### Environment-Specific Issues
-
-When issues occur in specific environments:
-- Verify environment variables are correct
-- Check build configuration matches environment
-- Ensure all services are available
-- Test with environment-specific data
-- Review environment differences
-
-### Rollback Scenarios
-
-When rollback is needed:
-- Have automated rollback procedures
-- Test rollback in staging environment
-- Verify data integrity after rollback
-- Document rollback steps clearly
-- Monitor system after rollback
-
-For more information about deploying your application, see the [Security Guide](./security.md) and [Performance Guide](./performance.md).