Add comprehensive Sentry observability to SentryOS Desktop Emulator#9
Open
kevinmontano-web wants to merge 4 commits intocodyde:mainfrom
Open
Add comprehensive Sentry observability to SentryOS Desktop Emulator#9kevinmontano-web wants to merge 4 commits intocodyde:mainfrom
kevinmontano-web wants to merge 4 commits intocodyde:mainfrom
Conversation
Configure Sentry for error tracking, performance monitoring, and observability in the Next.js application. Includes Sentry configuration files, instrumentation setup, example pages, and Claude Code skills for Sentry operations. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Update Sentry package version specifier to ^10 for flexibility - Update Sentry project ID in example page link - Sync pnpm-lock.yaml with package.json changes Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement full-stack observability with custom metrics, performance tracing, error boundaries, breadcrumbs, session replay enhancements, and AI monitoring for the desktop emulator application. Frontend Observability: - Add custom metrics hooks (useSentryMetrics) tracking window lifecycle, chat interactions, tool executions, and user actions - Add breadcrumbs hooks (useSentryBreadcrumbs) for complete user journey tracking - Integrate observability into WindowManager, Desktop, Window, Chat, and DesktopIcon components - Track session duration, active window count, and all user interactions Error Boundaries: - Add WindowErrorBoundary for per-window error isolation and recovery - Add ChatErrorBoundary for chat-specific error handling - Add WindowManagerErrorBoundary for critical system errors - Provide user-friendly error UIs with reload/restart options Enhanced Session Replay: - Configure privacy masks for sensitive chat content - Enable canvas recording for better window rendering capture - Add network capture for /api/chat debugging - Inject desktop window state into replay context via beforeSend hook Backend Observability: - Add Anthropic AI integration for automatic Claude SDK monitoring - Create sentry-utils with request tracking and token usage helpers - Fully instrument /api/chat route with comprehensive tracing - Replace console.error with Sentry.logger for structured logging - Track request duration, tool executions, streaming performance, and errors - Emit custom metrics for API calls, tool usage, token consumption, and costs - Add request ID propagation for distributed tracing Additional Changes: - Update Sentry DSN across all configuration files - Configure Sentry server/edge/client with appropriate integrations - Add X-Request-Id header for frontend-backend correlation This implementation provides complete visibility into user interactions, system performance, error patterns, and AI agent behavior for debugging and optimization. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
Resolved conflicts by keeping comprehensive observability implementation with custom hooks, error boundaries, and backend utilities. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Comment on lines
+176
to
+180
| if (block.type === 'tool_use') { | ||
| // Start tracking tool execution | ||
| requestState.toolExecutions.set(block.name, { | ||
| start: Date.now() | ||
| }) |
There was a problem hiding this comment.
Bug: Tool execution tracking uses the non-unique tool name as a key, causing metrics to be overwritten and lost when the same tool is called multiple times in one turn.
Severity: MEDIUM
Suggested Fix
Update the tracking logic to use the unique tool invocation ID (block.id) as the key for the requestState.toolExecutions map instead of the non-unique tool name (block.name).
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: src/app/api/chat/route.ts#L176-L180
Potential issue: The backend code in `route.ts` and frontend code in `Chat.tsx` use the
tool's name (`block.name` and `parsed.tool` respectively) as a key to track execution
start times. Since the underlying AI model can invoke the same tool multiple times in a
single turn (parallel tool calls), subsequent calls overwrite the tracking data of
previous calls in the map. This leads to incorrect or lost duration metrics, undermining
the observability feature being added.
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
This PR implements full-stack observability for the SentryOS Desktop Emulator with custom metrics, performance tracing, error boundaries, breadcrumbs, enhanced session replay, and AI monitoring.
Features Implemented
🎯 Custom Metrics
⚡ Performance Tracing
Sentry.startSpan()🎬 Enhanced Session Replay
.chat-message-content,[data-sensitive]).chat-input-area)/api/chatdebuggingbeforeSendhook🛡️ Custom Error Boundaries
🍞 Breadcrumbs
🤖 AI Monitoring
Sentry.loggerTechnical Changes
New Files
src/lib/hooks/useSentryMetrics.ts- Metrics tracking hooksrc/lib/hooks/useSentryBreadcrumbs.ts- Breadcrumbs hooksrc/lib/sentry-utils.ts- Backend utility functionssrc/components/desktop/WindowErrorBoundary.tsx- Per-window error boundarysrc/components/desktop/WindowManagerErrorBoundary.tsx- Critical error boundarysrc/components/desktop/apps/ChatErrorBoundary.tsx- Chat error boundarysrc/components/desktop/errors/index.ts- Error boundary exportssrc/lib/hooks/index.ts- Hook exportsModified Files
src/app/api/chat/route.ts): Comprehensive instrumentation with tracing, metrics, and structured loggingMetrics Schema
Frontend Metrics
desktop.session.start/duration- Session trackingdesktop.window.open/close/minimize/maximize- Window operationsdesktop.windows.active- Active window gaugechat.message.sent/received- Chat interactionschat.tool.execution/duration- Tool usagedesktop.icon.click/doubleclick- Icon interactionsBackend Metrics
api.chat.requests- Request countapi.chat.duration- Request processing timeapi.chat.errors- Error count by typeai.tokens.input/output/total- Token consumptionai.cost.usd- Estimated costsai.prompt.length- Prompt sizesai.stream.chunks- Streaming performanceai.tool.executions/duration- Tool metricsTesting
Manual Testing
Verification
pnpm devImpact
🤖 Generated with Claude Code