Kando - Full-Stack Kanban App

A modern, offline-first Kanban application built with React Native, Expo, and AWS.

Development Progress

📊 Kando Day 29 – Monitoring, Analytics & Crash Reporting

Today we're implementing comprehensive monitoring and observability for both client and backend:

📌 Steps:

1. Set up Sentry for client crash reporting with OTA update tagging
2. Integrate PostHog for product analytics and user identification
3. Configure X-Ray tracing and structured logging for backend observability
4. Create CloudWatch alarms with SNS notifications for production alerts
5. Establish complete monitoring stack for production readiness

---

1️⃣ Sentry Client Crash Reporting

Professional crash reporting for React Native with OTA update correlation:

Key Features:

• Crash Grouping: Automatic crash categorization and deduplication
• OTA Update Tagging: Maps crashes to specific JavaScript bundles
• Release Tracking: Correlates crashes with app versions and updates
• Real-time Alerts: Immediate notifications for new crash patterns

Installation and Setup:

// apps/frontend/app/_layout.tsx
import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,

  // Adds more context data to events (IP address, cookies, user, etc.)
  sendDefaultPii: true,

  // Configure Session Replay
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

  // Performance monitoring
  tracesSampleRate: 1.0,

  // Tag OTA updates for crash correlation
  beforeSend: (event) => {
    // Add OTA update information to crash reports
    event.tags = {
      ...event.tags,
      updateId: Updates.updateId || "embedded",
      channel: Updates.channel || "none",
    };
    return event;
  },
});

App Configuration:

// apps/frontend/app.config.ts - Sentry plugin integration
export default ({ config }: ConfigContext): ExpoConfig => ({
  // ... other config
  plugins: [
    // ... other plugins
    [
      "@sentry/react-native/expo",
      {
        organization: "your-org",
        project: "kando",
      },
    ],
  ],
  hooks: {
    postPublish: [
      {
        file: "@sentry/react-native/expo",
        config: {
          organization: "your-org",
          project: "kando",
        },
      },
    ],
  },
});

Benefits:

• Root Cause Analysis: Quickly identify crash causes with stack traces
• Release Correlation: See which OTA updates introduce crashes
• Performance Insights: Monitor app performance and identify bottlenecks
• User Context: Understand user actions leading to crashes

---

2️⃣ PostHog Product Analytics

Comprehensive product analytics with user identification and feature flags:

Key Features:

• Event Tracking: Monitor user interactions and feature usage
• User Identification: Connect analytics data to authenticated users
• Feature Flags: Remote feature toggling and A/B testing
• Funnel Analysis: Track user conversion and engagement metrics

Installation and Setup:

// apps/frontend/components/root-provider.tsx
import { PostHogProvider } from 'posthog-react-native';

export function RootProvider({ children }: { children: React.ReactNode }) {
  return (
    <PostHogProvider
      apiKey={process.env.EXPO_PUBLIC_POSTHOG_API_KEY!}
      options={{
        host: 'https://us.i.posthog.com', // or your self-hosted instance
      }}
    >
      {/* Other providers */}
      {children}
    </PostHogProvider>
  );
}

User Identification:

// apps/frontend/contexts/auth.tsx
import { usePostHog } from "posthog-react-native";

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const postHog = usePostHog();

  // Identify user when authenticated
  useEffect(() => {
    if (isAuthenticated && data) {
      postHog.identify(data.id, {
        email: data.email,
        firstName: data.firstName,
        lastName: data.lastName,
        // Add other user properties
      });
    }
  }, [isAuthenticated, data, postHog]);

  // ... rest of auth provider
}

Event Tracking:

// Example: Track board creation
import { usePostHog } from "posthog-react-native";

function CreateBoardForm() {
  const postHog = usePostHog();

  const handleCreateBoard = (boardData) => {
    // Track board creation event
    postHog.capture("board_created", {
      board_name: boardData.name,
      board_color: boardData.color,
      user_id: user.id,
    });

    // Create board logic...
  };
}

Feature Flags Usage:

// Feature flag integration
import { useFeatureFlag } from 'posthog-react-native';

function TaskView() {
  const showNewTaskView = useFeatureFlag('new-task-view');

  return showNewTaskView ? <NewTaskView /> : <OldTaskView />;
}

---

3️⃣ Backend Observability with X-Ray

Comprehensive backend monitoring with structured logging:

Key Features:

• Structured Logging: Consistent log format with correlation IDs
• Performance Monitoring: Identify slow database queries and API calls
• Error Tracking: Detailed error context and stack traces

---

4️⃣ CloudWatch Alarms with SNS

Production-ready alerting system for critical error monitoring:

Key Features:

• Error Rate Monitoring: Alert when API errors exceed threshold
• SNS Integration: Immediate notifications via email/SMS/Slack
• Automatic Recovery: Notifications when issues resolve
• Threshold-Based Alerts: Configurable error thresholds

CloudWatch Alarm Setup:

// infra/api.ts - Production alerting
// SNS topic for CloudWatch alarms
const alertsTopic = new sst.aws.SnsTopic("ApiAlerts");

// CloudWatch alarm for API handler errors
new aws.cloudwatch.MetricAlarm("ApiHandlerErrors1m", {
  comparisonOperator: "GreaterThanThreshold",
  evaluationPeriods: 1,
  metricName: "Errors",
  namespace: "AWS/Lambda",
  period: 60, // 1 minute
  statistic: "Sum",
  threshold: 5, // Alert if >5 errors in 1 minute
  dimensions: {
    FunctionName: apiHandler.name,
  },
  alarmDescription: "Alarm when API handler has more than 5 errors in 1 minute",
  alarmActions: [alertsTopic.arn], // Send alert when triggered
  okActions: [alertsTopic.arn], // Send notification when resolved
});

SNS Topic Configuration:

// SNS topic for alerts
const alertsTopic = new sst.aws.SnsTopic("ApiAlerts");

// Subscribe email endpoint (can be configured via AWS Console)
// alertsTopic.subscribe("email", "alerts@kando.app");

// Subscribe Slack webhook (requires additional setup)
// alertsTopic.subscribe("https", "https://hooks.slack.com/...");

Alert Types:

• Error Rate Alerts: High error rates in Lambda functions
• Performance Alerts: Slow response times or timeouts
• Resource Alerts: High memory usage or cold starts
• Custom Metrics: Business-specific alerts (failed logins, etc.)

Monitoring Dashboard:

// Future: CloudWatch Dashboard for monitoring
const monitoringDashboard = new aws.cloudwatch.Dashboard("KandoMonitoring", {
  dashboardName: "kando-production-monitoring",
  dashboardBody: JSON.stringify({
    widgets: [
      {
        type: "metric",
        properties: {
          metrics: [
            ["AWS/Lambda", "Invocations", "FunctionName", apiHandler.name],
            [".", "Errors", ".", "."],
            [".", "Duration", ".", "."],
          ],
          period: 300,
          stat: "Sum",
          region: "us-east-1",
          title: "API Handler Metrics",
        },
      },
    ],
  }),
});

---

5️⃣ Complete Monitoring Stack

Integrated monitoring solution for production readiness:

Monitoring Architecture:

// Complete monitoring flow
Client (Sentry) → Crash Reports & Performance
     ↓
PostHog → Product Analytics & Feature Flags
     ↓
API Gateway → Lambda (X-Ray Traces)
     ↓
CloudWatch Logs → Structured Logging
     ↓
CloudWatch Alarms → SNS Notifications

Key Metrics to Monitor:

1. Client Metrics:

   • Crash rate per release
   • App performance metrics
   • User engagement events
   • Feature flag adoption

2. Backend Metrics:

   • API response times
   • Error rates by endpoint
   • Database query performance
   • Lambda cold start frequency

3. Business Metrics:

   • User registration rate
   • Board creation frequency
   • Task completion rates
   • Feature usage analytics

Alert Thresholds:

// Recommended production thresholds
const alertThresholds = {
  errorRate: 5, // errors per minute
  crashRate: 1, // % of sessions
  responseTime: 5000, // milliseconds
  memoryUsage: 80, // % of allocated memory
};

On-Call Procedures:

1. Alert Reception: SNS notification received
2. Initial Triage: Check CloudWatch logs and X-Ray traces
3. Root Cause Analysis: Correlate with Sentry crashes and PostHog events
4. Incident Response: Fix issue and deploy via EAS Update if possible
5. Post-Incident: Update monitoring thresholds and procedures

---

✅ Day 29 Complete!

• Sentry crash reporting with OTA update correlation ✅
• PostHog analytics with user identification and feature flags ✅
• X-Ray tracing and structured logging for backend observability ✅
• CloudWatch alarms with SNS notifications for production alerts ✅
• Complete monitoring stack ready for production operations ✅

🎯 Impact

• Proactive Issue Detection: Catch problems before users report them
• Rapid Incident Response: Quick identification and resolution of issues
• Data-Driven Decisions: Product analytics inform feature development
• Production Readiness: Professional monitoring for enterprise deployment
• User Experience: Minimize downtime and improve app reliability

📈 Files Changed

• Sentry integration in app layout with OTA update tagging
• PostHog provider with user identification and event tracking
• CloudWatch alarms with SNS topic for production alerts
• Package dependencies for monitoring and analytics libraries

🚀 Up next: Day 30 - Final Launch & Retrospective

---

Tech Stack

• Frontend: React Native, Expo, NativeWind (Tailwind CSS)
• Backend: AWS SST, Lambda, DynamoDB
• Authentication: AWS Cognito
• UI Components: Custom shared component library
• State Management: React Query, Context API
• Offline Support: AsyncStorage, optimistic updates

Getting Started

1. Clone the repository
2. Install dependencies: pnpm install
3. Set up environment variables
4. Run the development server: pnpm start

Project Structure

kando-private/
├── apps/frontend/          # React Native Expo app
├── packages/
│   ├── ui/                # Shared UI components
│   ├── database-schema/   # Database schemas
│   └── functions/         # Lambda functions
│   └── events/            # All event definitions
└── infra/                 # SST infrastructure