Skip to content

Feat/component error state rendering and error propagation #761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 16 commits into
base: main
Choose a base branch
from

Conversation

BloggerBust
Copy link
Contributor


name: Pull Request
about: Create a pull request to contribute to the project
title: 'Component error-state rendering and error propagation'
labels: enhancement, ui, error-handling, draft
assignees: ''

Related Issue
Fixes #2735 (Trello: Implement component fail-state rendering)

Description of Changes

This PR implements comprehensive error state rendering across all major frontend widgets and standardizes error propagation from backend Python components to the React UI.

  • Frontend:

    • Adds consistent error UI to all widgets.
    • Error states include a red border, soft red background, an AlertTriangle icon with a tooltip containing the error message, and a textual fallback message in the component body.
    • Refactored components to accept and display an error prop, making a best effort to preserv layout
  • Backend:

    • Python component functions now raise exceptions for critical errors instead of returning “soft” errors, ensuring that the workflow engine’s AtomResult status is set to FAILED.
    • Error context is attached to the component's metadata and propagated to the frontend as an error prop.
    • Improved fallback handling: build_component_from_args attempts to preserve safe serializable keyword arguments (such as title, label...) when returning fallback error components, so the frontend can display these values even in error state.
    • Cleans up logging and error registration for easier debugging and user feedback.
  • Docs / Internal:

    • Some code comments were updated for clarity and accuracy.
    • No user facing documentation updated yet, this will be completed in a follow-up PR

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • New example
  • Test improvement

Testing

  • Manual testing of all major widgets ( screenshots to be added after all components are updated ) with forced errors (invalid data, missing files, invalid sources, etc.) to verify correct error rendering.
  • Verified:
    • Error borders and icons appear as expected
    • No overlay bugs
    • Tooltips display error details on hover
    • Non error state appearance remains unchanged
  • Python: ran test scripts that deliberately throw exceptions or fail to load data; confirmed that error state is correctly propagated to the frontend.
  • No regressions observed in standard non error scenarios.

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have run my code against examples and ensured no errors
  • Any dependent changes have been merged and published in downstream modules

Notes:

  • PR is currently in draft; some components are still pending error-state UI updates.
  • Once complete, screenshots will be attached showing error states for all affected widgets.

…integration

- Introduced `error_registry.py` to collect structured errors during AST transformation
  - Errors include type, filename, line number, message, and optionally component ID or atom name
  - Thread-safe via lock; supports register/get/clear
- Updated `transform_source` to catch and register `SyntaxError` as transform errors
- Enhanced error handling in `register_display_dependency_resolver` with error registration
- `ScriptRunner` now:
  - Clears previous errors at script start
  - Sends either "components" or "errors:result" message based on presence of errors
- Frontend:
  - Added `ErrorsReport.jsx` component for displaying transform errors
  - Updated `Dashboard.jsx` to render error fragments and align empty state formatting
  - `App.jsx` now handles new `errors:result` message type and routes errors to dashboard
…ovements

- Add `_safe_register_error` method to AST transformer to capture structured transformation errors
- Wrap most lifting and analysis methods with try/except to register errors instead of crashing
- Extend error object metadata to include component ID, atom name, and extra context
- Improve debug logging and error traceability throughout the AST transformer
- Add `has_errors()` to BasePreswaldService for script fallback error checks
- Update ErrorsReport frontend to support collapsible/expandable error lists with CSS transitions
- Style error list in `components.css` and refactor JSX to allow toggling long error output
- Improve resilience and recovery logic in `ScriptRunner.compile_and_run()` when runtime errors occur
- Moved `register_error` import closer to usage in `reactive_runtime.py`
- Removed unused imports from `registry.py` and reordered for clarity
- Replaced bare `except` with `except Exception as e` for better debugging
- Added `# noqa` directives for intentional style suppressions
- No functional changes
…nd error display

- Add `rebuild_component_from_source()` to reconstruct components from lifted AST source
- New helper functions (`get_call_func_name`, `extract_call_args`, `build_component_from_args`) in `transformer_utils.py`
- Update `Workflow.execute()` to fallback to reconstructed component with `error` and `shouldRender` if runtime failure occurs
- Annotate error state in `MarkdownRendererWidget` via tooltip and border styling
- Modify `App.jsx` to preserve error display on component refresh and wrap in `TooltipProvider`
- Add `render_tracking_suppressed()` context to `BasePreswaldService` and guard `@with_render_tracking` accordingly
- Improve `AutoAtomTransformer._build_callsite_metadata()` to include parsed source and cleanup return format
…or handling

- Refactored `build_component_from_args` and `rebuild_component_from_source` to consistently return `ComponentReturn` objects
- Introduced `ComponentReturn.component` property for consistent access to internal component metadata
- Centralized producer registration logic into `_register_component_producer` in `Workflow`, now used for both normal and fallback paths
- Improved frontend error styling for Button and BigNumber widgets using `Tooltip` and `AlertTriangle`
- Enforced default `size` handling on `ButtonWidget` to resolve layout conflicts
- Fixed incorrect handling of reactivity flag in `ScriptRunner`
- Skipped atom execution when dependencies fail instead of halting entire DAG
- Added detailed docstrings for utility functions and transformer logic
- Display red border, background, and top right AlertTriangle when `error` is present
- Show error tooltip on hover
- Dim main alert icon to visually deemphasize original alert level in error state
- Preserve layout and semantics for all alert variants
- Updated ChatWidget.jsx to display backend errors using a tooltip with alert icon and destructive styling.
- Separated backend error (`error` prop) from local chat errors in the UI.
- Added support for always rendering error state when present, with improved UI feedback.
- Patched build_component_from_args to always include an 'id' on fallback components to prevent key errors when trying to register a producer during rebuild.
- Cleaned up Atom `wrapped_func` error handling and removed redundant source fallback logic.
- Displays error icon with tooltip in top right when error is present
- Adds red border and light red background for error state
- Adds error prop support to GenericWidget
- Displays alert icon with tooltip in top right when error is present
- Renders red border and light red background for error state
- Uses consistent error UI styling with other widgets
…eWidget

- Adds error prop to ImageWidget for error state support
- Shows alert icon with tooltip and red border/background when error is present
- Preserves original image styling and layout when not in error
- Displays "Image unavailable" fallback when an error occurs
…fails

- Passes safe serializable kwargs to error fallback component in `build_component_from_args`, allowing error state widgets to display metadata.
- Adds error rendering UI to JSONViewerWidget: shows alert icon, error message, and styled error container when error is present.
- Updates DynamicComponents to spread all component props to JSONViewerWidget for complete error/metadata propagation.
- Update MatplotlibWidget to show a red border, error icon with tooltip, and placeholder message when in error state.
- Ensure normal plot rendering is visually unchanged when no error is present.
- Renamed `_label` to `label` so that the lable can be displayed
- Update json_viewer component to raise exceptions for invalid JSON, ensuring error states are handled via AtomResult.
- Add red border, background, and alert triangle tooltip for error state
- Ensure error rendering matches patterns used in other widgets
- Refactor markup to prevent layout shift and improve consistency
- Error alert appears centered with detailed tooltip on error
- Adds error container styling when `error` or `plotError` is present.
- Adds AlertTriangle icon with tooltip describing the error, positioned in the top right corner.
- Ensures error content is shown in the same style as other widgets: centered, italic red text.
- Unifies error handling so all error messages are presented via the same UX pattern as other widgets.
…roved layout

- Adds error state rendering to ProgressWidget. When an error is present, a red border, light background, and alert triangle with tooltip are shown.
- Ensures the error icon does not overlap the percent value by keeping layout consistent and adding padding as needed.
- Displays a clear error message when progress cannot be shown, but still shows the label and percent.
- Minor cleanup: removes unused console.log from BigNumberCard.
- Update SelectboxWidget to apply padding so that select and dropdown contents stay inside the error border, with correct spacing.
- Add support for a `label` prop and display it above the select control, matching other widgets’ label style.
- Show an alert triangle with tooltip in the error state.
- Ensure the select and dropdown maintain a consistent width and do not overflow the error container.
- Minor: right-padding on ProgressWidget error state to prevent overlap between error icon and percent text.

Let me know if you'd like the full expanded PR template filled out as well!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant