Start on step 17 next

src/tui/components/screens/withErrorBoundary.jsx

@@ -0,0 +1,62 @@
+const React = require("react");
+const { ScreenErrorBoundary } = require("../common");
+const { enhanceError, logError } = require("../../utils/errorHandler");
+
+/**
+ * Higher-order component that wraps screens with error boundaries
+ * Requirements: 4.5, 16.1
+ */
+function withErrorBoundary(
+	WrappedComponent,
+	screenName,
+	screenSpecificTips = []
+) {
+	const WrappedScreenComponent = (props) => {
+		const handleError = (error, errorInfo) => {
+			// Log the error with screen context
+			logError(error, {
+				screen: screenName,
+				errorInfo,
+				props: Object.keys(props),
+			});
+		};
+
+		const handleRetry = (retryCount) => {
+			console.info(`Retrying ${screenName}, attempt ${retryCount}`);
+		};
+
+		const handleReset = () => {
+			console.info(`Resetting ${screenName} after error`);
+		};
+
+		const handleExit = () => {
+			// Navigate back to main menu
+			if (props.navigateBack) {
+				props.navigateBack();
+			} else if (props.onExit) {
+				props.onExit();
+			}
+		};
+
+		return React.createElement(
+			ScreenErrorBoundary,
+			{
+				screenName,
+				screenSpecificTips,
+				onError: handleError,
+				onRetry: handleRetry,
+				onReset: handleReset,
+				onExit: handleExit,
+				maxRetries: 3,
+			},
+			React.createElement(WrappedComponent, props)
+		);
+	};
+
+	// Set display name for debugging
+	WrappedScreenComponent.displayName = `withErrorBoundary(${screenName})`;
+
+	return WrappedScreenComponent;
+}
+
+module.exports = withErrorBoundary;