ContextQMD
Back to Chatbox

Error Handling Improvements

ERROR_HANDLING.md

1.20.13.6 KB
Original Source

Error Handling Improvements

This document describes the error handling improvements made to Chatbox to address the issue where some users experienced "something went wrong!" errors with "cannot read properties of undefined" that were not being reported to Sentry.

Changes Made

1. React Error Boundary (src/renderer/components/ErrorBoundary.tsx)

Created a comprehensive React Error Boundary component that:

  • Catches React component rendering errors
  • Automatically reports errors to Sentry with detailed context
  • Displays a user-friendly error UI with retry options
  • Shows detailed error information when requested
  • Provides both custom and Sentry-wrapped error boundary variants

2. Global Error Handlers (src/renderer/setup/global_error_handler.ts)

Added global error handlers for:

  • Window errors: Catches unhandled JavaScript errors
  • Unhandled promise rejections: Catches async errors that weren't handled
  • Console error interception: Monitors console errors for specific patterns like "cannot read properties of undefined"

3. Application Integration

Updated the main application files:

  • src/renderer/index.tsx: Wrapped both initialization and main app with ErrorBoundary
  • src/renderer/routes/__root.tsx: Added error boundary at the route level
  • Added global error handler initialization

4. Error Testing Utilities (src/renderer/utils/error-testing.ts)

Created testing utilities for development mode:

  • Test React error boundaries
  • Test global error handlers
  • Test unhandled promise rejections
  • Test Sentry integration
  • Available at window.errorTestingUtils in development

Error Catching Strategy

The solution implements a multi-layered error catching approach:

  1. React Error Boundaries: Catch component rendering errors
  2. Global Window Handlers: Catch unhandled JavaScript errors
  3. Promise Rejection Handlers: Catch unhandled async errors
  4. Console Error Monitoring: Detect specific error patterns
  5. Existing Try-Catch Blocks: Already handling API and model errors

Testing

In development mode, you can test error handling using:

javascript
// Test React error boundary
window.errorTestingUtils.triggerReactError()

// Test global error handler
window.errorTestingUtils.triggerGlobalError()

// Test unhandled promise rejection
window.errorTestingUtils.triggerUnhandledRejection()

// Test property access error
window.errorTestingUtils.triggerPropertyError()

// Test Sentry integration
window.errorTestingUtils.testSentryCapture()

// Test console error interception
window.errorTestingUtils.triggerConsoleError()

User Experience

When errors occur, users will see:

  • A clean error UI instead of broken components
  • Options to retry or reload the application
  • Ability to view error details if needed
  • Automatic error reporting to Sentry for debugging

Benefits

  1. Better Error Reporting: All errors are now captured and sent to Sentry
  2. Improved User Experience: Users see helpful error messages instead of broken UI
  3. Easier Debugging: Detailed error context is provided to developers
  4. Graceful Recovery: Users can retry operations or reload the app
  5. Comprehensive Coverage: Multiple layers catch different types of errors

Sentry Integration

All caught errors are reported to Sentry with:

  • Error type tags (React, global, promise rejection, etc.)
  • Detailed context about the error
  • Component stack traces (for React errors)
  • Browser and application information
  • User session data

This ensures that developers can identify and fix issues that users encounter in production.