// Before
const data = JSON.parse(message.text || "{}");

// After
let data;
try {
  data = JSON.parse(message.text || "{}");
} catch (error) {
  console.error("Failed to parse message data:", error);
  data = {}; // Provide fallback value
}

class ErrorBoundary extends Component<ErrorProps, ErrorState> {
  constructor(props: ErrorProps) {
    super(props);
    this.state = {};
  }

  static getDerivedStateFromError(error: unknown) {
    return {
      error: error instanceof Error ? (error.stack ?? error.message) : `${error}`,
    };
  }
  
  // Add this method to capture additional context
  componentDidCatch(error: Error, info: React.ErrorInfo) {
    // Log to monitoring system with context
    logErrorToService({
      error,
      componentStack: info.componentStack,
      timestamp: new Date().toISOString(),
      additionalContext: this.props.contextData
    });
  }
  
  render() {
    if (this.state.error) {
      return <ErrorDisplay error={this.state.error} />;
    }
    return this.props.children;
  }
}