@jmruthers/pace-core 0.2.4

package/docs/best-practices/deployment.md

@@ -0,0 +1,1042 @@
+# 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
+VITE_SUPABASE_ANON_KEY=your-local-anon-key
+VITE_APP_ENV=development
+VITE_DEBUG=true
+
+// .env.staging
+VITE_SUPABASE_URL=https://your-project.supabase.co
+VITE_SUPABASE_ANON_KEY=your-staging-anon-key
+VITE_APP_ENV=staging
+VITE_DEBUG=false
+
+// .env.production
+VITE_SUPABASE_URL=https://your-project.supabase.co
+VITE_SUPABASE_ANON_KEY=your-production-anon-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'));
+
+function App() {
+  const { user } = useUnifiedAuth();
+  const { hasPermission } = useRBAC();
+
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      {user?.role === 'admin' ? (
+        <AdminDashboard />
+      ) : (
+        <UserDashboard />
+      )}
+      {hasPermission('analytics:view') && (
+        <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_ANON_KEY: ${{ secrets.SUPABASE_ANON_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_ANON_KEY: ${{ secrets.STAGING_SUPABASE_ANON_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_ANON_KEY": "@supabase-anon-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_ANON_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_ANON_KEY=your-production-anon-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
+```
+
+For more information about deploying your application, see the [Security Guide](./security.md) and [Performance Guide](./performance.md).