add preview overlay

[ricardo-devis-agullo]

Enhanced Error Handling with Source Map Support and Improved Developer Experience

Overview

This PR introduces comprehensive error handling improvements for OpenComponents, focusing on better debugging capabilities in local development environments and enhanced error presentation in the registry preview interface.

Key Changes

1. Source Map Integration for Better Error Debugging

Added a new format-error-stack.ts module that processes JavaScript stack traces using source maps to provide meaningful error locations in TypeScript source files instead of compiled JavaScript. This is particularly valuable for local development where components are written in TypeScript.

Features:

• Extracts inline source maps from compiled component code
• Maps stack trace locations back to original TypeScript source
• Provides code context frames around error locations
• Filters out irrelevant frames (node_modules, oc-server internals)
• Handles multiple stack trace formats gracefully

2. Enhanced Error Response Structure

Modified the component execution error handling in get-component.ts to include processed stack traces and code frames when running in local mode. The error response now includes:

• Original error details
• Processed stack trace with source-mapped locations
• Code context frames showing the actual source code around errors

3. Improved Registry Preview Error UI

Completely redesigned the error overlay in the registry preview interface with:

• Modern, dark-themed error cards with better visual hierarchy
• Contextual error hints based on error codes
• Expandable debug details section
• Interactive buttons for retry, dismiss, and copy stack trace
• Better error categorization and messaging

4. Enhanced Developer Experience

• Info Page Improvements: Changed href input from textarea to input field with Enter key support for faster component testing
• Preview Height: Increased preview iframe height from 300px to 600px for better visibility
• Dependency Updates: Updated oc-client-browser to v2.1.5 and added source-map dependency

Technical Implementation

The source map processing works by:

1. Extracting inline source maps from the compiled component code
2. Using the source-map library to map compiled locations back to source
3. Filtering and formatting the results for better readability
4. Providing code context frames with line numbers and column indicators

The error overlay uses a self-contained JavaScript implementation that listens for oc:error events and dynamically creates the error UI when needed.

Usage

The improvements are automatically active in local development mode. When a component fails to render:

1. Local Development: Stack traces will show TypeScript source locations with code context
2. Registry Preview: Users see a comprehensive error overlay with actionable information
3. Info Page: Faster component testing with Enter key support in the href field

Benefits

• Faster Debugging: Developers can immediately see where errors occur in their TypeScript source
• Better Error Context: Code frames provide immediate context around error locations
• Improved UX: Registry users get clear, actionable error information
• Enhanced Developer Workflow: Streamlined component testing and debugging experience

The changes maintain backward compatibility while significantly improving the development experience for OpenComponents users.