Add Sentry Observability with Structured Logging and Custom Metrics#1
Open
aseemanwar wants to merge 11 commits intocodyde:mainfrom
Open
Add Sentry Observability with Structured Logging and Custom Metrics#1aseemanwar wants to merge 11 commits intocodyde:mainfrom
aseemanwar wants to merge 11 commits intocodyde:mainfrom
Conversation
- Install @sentry/nextjs SDK for error tracking and performance monitoring - Configure Sentry for client, server, and edge runtimes - Add instrumentation hook for Next.js integration - Set up source map uploading and monitoring tunnel - Add Sentry agent skills for various frameworks and features - Include environment variable examples for Sentry configuration Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Move deprecated options to webpack namespace - Remove invalid experimental turbo config - Clean up configuration warnings Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented Sentry observability throughout the application with: API Route (chat/route.ts): - Log request start/end with context - Track request duration and status metrics - Log tool invocations with tool names and IDs - Track tool usage counts and types - Monitor stream duration and completion - Capture and log errors with full context - Metrics for requests, errors, tool usage, and performance Chat Component (Chat.tsx): - Log component lifecycle (mount/unmount) - Track user message submissions with length metrics - Monitor API request success/failure - Log tool usage in real-time - Track response times and time-to-first-token - Measure response length and content metrics - Count tools used per response - Capture client-side errors Desktop Component (Desktop.tsx): - Log desktop initialization and unmount - Track window open events by type - Monitor active window count with gauges - Log user agent and environment info Page Component (page.tsx): - Log page loads with viewport and user agent - Track page visibility changes - Measure session duration - Monitor page lifecycle events Metrics tracked: - chat.requests.total, chat.requests.success, chat.requests.errors - chat.message.length, chat.conversation.depth - chat.tools.invoked, chat.tools.count, chat.tools.per_response - chat.request.duration, chat.stream.duration, chat.response.time - desktop.initialized, desktop.window.opened, desktop.windows.open - page.loads, page.visibility.visible/hidden, page.session.duration Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove stale closure references in cleanup functions - Add eslint-disable comment for intentional empty dependencies Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created safe wrapper utilities for Sentry logging and metrics that: - Gracefully handle missing or unavailable Sentry APIs - Fall back to console logging when Sentry.logger is unavailable - Silently fail for metrics when Sentry.metrics is not available - Provide consistent API across client and server contexts This fixes the 'Sentry.metrics.increment is not a function' error by checking if the methods exist before calling them. Files: - Added src/lib/sentry-utils.ts with safe wrappers - Updated all components to use safe wrappers instead of direct Sentry calls Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
Comprehensive documentation for future Claude Code instances including: - High-level architecture (desktop environment, agent system, SSE streaming) - Development commands and environment setup - Sentry observability patterns with safe wrappers - Key patterns for agent development - Common workflows and debugging tips - Technology stack and project structure overview References AGENTS.md for detailed agent-building instructions. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created a banking demo application designed to generate rich Sentry data: Banking App Features: - Account balance display - Money transfer functionality - Transaction history - Intentional error scenarios for demos Sentry Data Generated: - Validation errors (invalid amount, missing recipient) - Business logic errors (insufficient funds, rate limits) - Network errors (payment gateway timeouts) - Performance monitoring (slow queries, transfer transactions) - Database errors (connection timeouts) - Various error types via 'Test Error' button - User context, breadcrumbs, and custom tags - Success events for completed transfers Error Scenarios: - Transfer > $5000: Rate limit error (429) - Transfer > balance: Insufficient funds error - Random network failures (15% chance) - Database timeouts (10% chance) - Slow balance queries (20% chance) - Buggy feature with multiple error types All banking operations include: - Sentry breadcrumbs for user actions - Custom tags (banking.action, banking.user_id) - User context with account info - Performance transactions - Detailed error contexts Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Enhanced all banking operations with comprehensive observability: RED Metrics (Rate, Errors, Duration): - Rate: Track request count for each operation - Errors: Capture all error types with context - Duration: Measure p95/p99 latencies Operations Enhanced: 1. createAccount - New endpoint for account creation - Validates name, email, initial deposit - Checks for duplicate accounts - Simulates service unavailability (10%) - Slow creation simulation (30%) 2. getBalance - Account balance retrieval - Simulates slow queries (20%) - Tracks query performance 3. getTransactions - Transaction history - Simulates database timeouts (10%) - Tracks list performance 4. transfer - Money transfer - Enhanced with comprehensive logging - Validation, rate limit, insufficient funds errors - Network failure simulation (15%) SLO Configuration: - account.create: 99% success, p95<500ms, p99<1000ms - account.balance: 99.5% success, p95<200ms, p99<400ms - transaction.list: 99% success, p95<300ms, p99<600ms - transaction.transfer: 98% success, p95<1000ms, p99<2000ms Structured Logging: - All operations log start/success/failure - Timestamp, operation, userId context - Duration and error details - Uses [BANKING] prefix for easy filtering SLO Breach Detection: - Automatically detects latency/error breaches - Captures breach events to Sentry - Includes breach type and threshold context Performance Monitoring: - Sentry transactions for each operation - Custom measurements for duration - Business transaction tags Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changed all references from SentryBank to Real Bank: - Window title - Desktop icon label - App header Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Copied logo to public folder - Integrated logo into Banking app header - Replaced icon with professional Real Bank branding Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created comprehensive monitoring dashboard matching the design mockup: Features: - 4 Business Transaction Cards: * Account Creation (account.create) * Get Balance (account.balance) * List Transactions (transaction.list) * Transfer Funds (transaction.transfer) Each Card Shows: - Status indicators (✓ Healthy,⚠️ Warning, ❌ Critical) - SLO target vs current performance - Progress bar with color coding - Key metrics: Request count, Error rate, Avg duration, P95 - Trend indicators (up/down/stable) - Time period (Last Hour) System Overview Panel: - Total requests across all transactions - Average success rate - SLO breach count - Last update timestamp Real-time Updates: - Data refreshes every 5 seconds - Simulates live performance fluctuations - Dynamic status calculation Color Coding: - Green: Performance meets SLO - Yellow: Warning - approaching SLO breach - Red: Critical - SLO breached - Dark theme matching Sentry UI Integrated as desktop icon for easy access. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds comprehensive Sentry observability throughout the SentryOS application with structured logging and custom metrics.
Changes
📊 API Route (
src/app/api/chat/route.ts)Metrics:
chat.requests.total,chat.requests.success,chat.requests.errorschat.message.length,chat.conversation.depthchat.tools.invoked,chat.tools.countchat.request.duration,chat.stream.duration💬 Chat Component (
src/components/desktop/apps/Chat.tsx)Metrics:
chat.messages.sent,chat.messages.receivedchat.user.message.length,chat.response.lengthchat.response.time,chat.tools.per_responsechat.api.errors,chat.stream.client.errors🖥️ Desktop Component (
src/components/desktop/Desktop.tsx)Metrics:
desktop.initialized,desktop.window.openeddesktop.windows.open(gauge)📄 Page Component (
src/app/page.tsx)Metrics:
page.loads,page.visibility.visible/hiddenpage.session.durationBenefits
Testing
Metrics Dashboard
Once merged, metrics will be available in Sentry:
javascript-nextjs🤖 Generated with Claude Code