import React from 'react'; import { Button } from './ui/button'; import { AlertTriangle } from 'lucide-react'; import { errorMessage, formatErrorForLogging } from '../utils/conversionUtils'; import { trackErrorWithContext, trackEvent, getErrorType } from '../utils/analytics'; import { defineMessages, useIntl } from '../i18n'; const i18n = defineMessages({ heading: { id: 'errorBoundary.heading', defaultMessage: 'Honk!', }, errorWithVersion: { id: 'errorBoundary.errorWithVersion', defaultMessage: 'An error occurred in Goose v{version}.', }, errorGeneric: { id: 'errorBoundary.errorGeneric', defaultMessage: 'An error occurred.', }, reload: { id: 'errorBoundary.reload', defaultMessage: 'Reload', }, }); function getCurrentPage(): string { return window.location.hash.replace('#', '') || '/'; } // Capture unhandled promise rejections window.addEventListener('unhandledrejection', (event) => { const reasonStr = formatErrorForLogging(event.reason); window.electron.logInfo(`[UNHANDLED REJECTION] ${reasonStr}`); trackErrorWithContext(event.reason, { component: 'global', page: getCurrentPage(), action: 'async_operation', recoverable: false, }); }); // Capture global errors window.addEventListener('error', (event) => { window.electron.logInfo( `[GLOBAL ERROR] ${event.message} at ${event.filename}:${event.lineno}:${event.colno}` ); trackErrorWithContext(event.error || event.message, { component: event.filename ? event.filename.split('/').pop() : 'unknown', page: getCurrentPage(), action: 'script_execution', recoverable: false, }); }); export function ErrorUI({ error }: { error: string }) { const intl = useIntl(); const handleReload = () => { trackEvent({ name: 'app_reloaded', properties: { reason: 'error_recovery' }, }); window.electron.reloadApp(); }; const version = window?.appConfig?.get('GOOSE_VERSION') as string | undefined; return (

{intl.formatMessage(i18n.heading)}

{version !== undefined ? intl.formatMessage(i18n.errorWithVersion, { version }) : intl.formatMessage(i18n.errorGeneric)}

          {error}

); } export class ErrorBoundary extends React.Component< { children: React.ReactNode }, { error: Error | null; hasError: boolean } > { constructor(props: { children: React.ReactNode }) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error: Error) { return { hasError: true, error }; } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { // Send error to main process window.electron.logInfo(`[ERROR] ${error.toString()}\n${errorInfo.componentStack}`); const componentMatch = errorInfo.componentStack?.match(/^\s*at\s+(\w+)/); const componentName = componentMatch ? componentMatch[1] : undefined; trackEvent({ name: 'app_crashed', properties: { error_type: getErrorType(error), component: componentName, page: getCurrentPage(), }, }); } render() { if (this.state.hasError) { return ; } return this.props.children; } }