reflex 0.5.6a2__tar.gz → 0.5.7a1__tar.gz

{reflex-0.5.6a2 → reflex-0.5.7a1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: reflex
-Version: 0.5.6a2
+Version: 0.5.7a1
 Summary: Web apps in pure Python.
 Home-page: https://reflex.dev
 License: Apache-2.0

{reflex-0.5.6a2 → reflex-0.5.7a1}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.5.6a2"
+version = "0.5.7a1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [

{reflex-0.5.6a2 → reflex-0.5.7a1}/reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -26,6 +26,8 @@ export const clientStorage = {}
 {% if state_name %}
 export const state_name = "{{state_name}}"
 
+export const exception_state_name = "{{const.frontend_exception_state}}"
+
 // Theses events are triggered on initial load and each page navigation.
 export const onLoadInternalEvent = () => {
     const internal_events = [];

{reflex-0.5.6a2 → reflex-0.5.7a1}/reflex/.templates/web/utils/state.js

@@ -11,6 +11,7 @@ import {
   initialState,
   onLoadInternalEvent,
   state_name,
+  exception_state_name,
 } from "utils/context.js";
 import debounce from "/utils/helpers/debounce";
 import throttle from "/utils/helpers/throttle";
@@ -116,7 +117,7 @@ export const isStateful = () => {
   if (event_queue.length === 0) {
     return false;
   }
-  return event_queue.some(event => event.name.startsWith("state"));
+  return event_queue.some(event => event.name.startsWith("reflex___state"));
 }
 
 /**
@@ -247,6 +248,9 @@ export const applyEvent = async (event, socket) => {
       }
     } catch (e) {
       console.log("_call_script", e);
+      if (window && window?.onerror) {
+        window.onerror(e.message, null, null, null, e)
+      }
     }
     return false;
   }
@@ -687,6 +691,31 @@ export const useEventLoop = (
     }
   }, [router.isReady]);
 
+    // Handle frontend errors and send them to the backend via websocket.
+    useEffect(() => {
+      
+      if (typeof window === 'undefined') {
+        return;
+      }
+  
+      window.onerror = function (msg, url, lineNo, columnNo, error) {
+        addEvents([Event(`${exception_state_name}.handle_frontend_exception`, {
+          stack: error.stack,
+        })])
+        return false;
+      }
+
+      //NOTE: Only works in Chrome v49+
+      //https://github.com/mknichel/javascript-errors?tab=readme-ov-file#promise-rejection-events
+      window.onunhandledrejection = function (event) {
+          addEvents([Event(`${exception_state_name}.handle_frontend_exception`, {
+            stack: event.reason.stack,
+          })])
+          return false;
+      }
+  
+    },[])
+
   // Main event loop.
   useEffect(() => {
     // Skip if the router is not ready.
@@ -734,7 +763,7 @@ export const useEventLoop = (
         const vars = {};
         vars[storage_to_state_map[e.key]] = e.newValue;
         const event = Event(
-          `${state_name}.update_vars_internal_state.update_vars_internal`,
+          `${state_name}.reflex___state____update_vars_internal_state.update_vars_internal`,
           { vars: vars }
         );
         addEvents([event], e);

{reflex-0.5.6a2 → reflex-0.5.7a1}/reflex/app.py

@@ -7,12 +7,15 @@ import concurrent.futures
 import contextlib
 import copy
 import functools
+import inspect
 import io
 import multiprocessing
 import os
 import platform
 import sys
+import traceback
 from datetime import datetime
+from pathlib import Path
 from typing import (
     Any,
     AsyncIterator,
@@ -45,6 +48,7 @@ from reflex.compiler import compiler
 from reflex.compiler import utils as compiler_utils
 from reflex.compiler.compiler import ExecutorSafeFunctions
 from reflex.components.base.app_wrap import AppWrap
+from reflex.components.base.error_boundary import ErrorBoundary
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import (
     Component,
@@ -60,7 +64,7 @@ from reflex.components.core.client_side_routing import (
 from reflex.components.core.upload import Upload, get_upload_dir
 from reflex.components.radix import themes
 from reflex.config import get_config
-from reflex.event import Event, EventHandler, EventSpec
+from reflex.event import Event, EventHandler, EventSpec, window_alert
 from reflex.model import Model
 from reflex.page import (
     DECORATED_PAGES,
@@ -88,6 +92,33 @@ ComponentCallable = Callable[[], Component]
 Reducer = Callable[[Event], Coroutine[Any, Any, StateUpdate]]
 
 
+def default_frontend_exception_handler(exception: Exception) -> None:
+    """Default frontend exception handler function.
+
+    Args:
+        exception: The exception.
+
+    """
+    console.error(f"[Reflex Frontend Exception]\n {exception}\n")
+
+
+def default_backend_exception_handler(exception: Exception) -> EventSpec:
+    """Default backend exception handler function.
+
+    Args:
+        exception: The exception.
+
+    Returns:
+        EventSpec: The window alert event.
+
+    """
+    error = traceback.format_exc()
+
+    console.error(f"[Reflex Backend Exception]\n {error}\n")
+
+    return window_alert("An error occurred. See logs for details.")
+
+
 def default_overlay_component() -> Component:
     """Default overlay_component attribute for App.
 
@@ -101,6 +132,19 @@ def default_overlay_component() -> Component:
     )
 
 
+def default_error_boundary(*children: Component) -> Component:
+    """Default error_boundary attribute for App.
+
+    Args:
+        *children: The children to render in the error boundary.
+
+    Returns:
+        The default error_boundary, which is an ErrorBoundary.
+
+    """
+    return ErrorBoundary.create(*children)
+
+
 class OverlayFragment(Fragment):
     """Alias for Fragment, used to wrap the overlay_component."""
 
@@ -142,6 +186,9 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         default_overlay_component
     )
 
+    # Error boundary component to wrap the app with.
+    error_boundary: Optional[ComponentCallable] = default_error_boundary
+
     # Components to add to the head of every page.
     head_components: List[Component] = []
 
@@ -178,6 +225,16 @@ class App(MiddlewareMixin, LifespanMixin, Base):
     # Background tasks that are currently running. PRIVATE.
     background_tasks: Set[asyncio.Task] = set()
 
+    # Frontend Error Handler Function
+    frontend_exception_handler: Callable[[Exception], None] = (
+        default_frontend_exception_handler
+    )
+
+    # Backend Error Handler Function
+    backend_exception_handler: Callable[
+        [Exception], Union[EventSpec, List[EventSpec], None]
+    ] = default_backend_exception_handler
+
     def __init__(self, **kwargs):
         """Initialize the app.
 
@@ -279,6 +336,9 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         # Mount the socket app with the API.
         self.api.mount(str(constants.Endpoint.EVENT), socket_app)
 
+        # Check the exception handlers
+        self._validate_exception_handlers()
+
     def __repr__(self) -> str:
         """Get the string representation of the app.
 
@@ -688,6 +748,25 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         for k, component in self.pages.items():
             self.pages[k] = self._add_overlay_to_component(component)
 
+    def _add_error_boundary_to_component(self, component: Component) -> Component:
+        if self.error_boundary is None:
+            return component
+
+        component = self.error_boundary(*component.children)
+
+        return component
+
+    def _setup_error_boundary(self):
+        """If a State is not used and no error_boundary is specified, do not render the error boundary."""
+        if self.state is None and self.error_boundary is default_error_boundary:
+            self.error_boundary = None
+
+        for k, component in self.pages.items():
+            # Skip the 404 page
+            if k == constants.Page404.SLUG:
+                continue
+            self.pages[k] = self._add_error_boundary_to_component(component)
+
     def _apply_decorated_pages(self):
         """Add @rx.page decorated pages to the app.
 
@@ -757,6 +836,7 @@ class App(MiddlewareMixin, LifespanMixin, Base):
 
         self._validate_var_dependencies()
         self._setup_overlay_component()
+        self._setup_error_boundary()
 
         # Create a progress bar.
         progress = Progress(
@@ -940,9 +1020,6 @@ class App(MiddlewareMixin, LifespanMixin, Base):
 
         progress.advance(task)
 
-        # Empty the .web pages directory.
-        compiler.purge_web_pages_dir()
-
         progress.advance(task)
         progress.stop()
 
@@ -960,6 +1037,19 @@ class App(MiddlewareMixin, LifespanMixin, Base):
             transpile_packages=transpile_packages,
         )
 
+        if is_prod_mode():
+            # Empty the .web pages directory.
+            compiler.purge_web_pages_dir()
+        else:
+            # In dev mode, delete removed pages and update existing pages.
+            keep_files = [Path(output_path) for output_path, _ in compile_results]
+            for p in Path(prerequisites.get_web_dir() / constants.Dirs.PAGES).rglob(
+                "*"
+            ):
+                if p.is_file() and p not in keep_files:
+                    # Remove pages that are no longer in the app.
+                    p.unlink()
+
         for output_path, code in compile_results:
             compiler_utils.write_page(output_path, code)
 
@@ -1036,6 +1126,100 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         task.add_done_callback(self.background_tasks.discard)
         return task
 
+    def _validate_exception_handlers(self):
+        """Validate the custom event exception handlers for front- and backend.
+
+        Raises:
+            ValueError: If the custom exception handlers are invalid.
+
+        """
+        FRONTEND_ARG_SPEC = {
+            "exception": Exception,
+        }
+
+        BACKEND_ARG_SPEC = {
+            "exception": Exception,
+        }
+
+        for handler_domain, handler_fn, handler_spec in zip(
+            ["frontend", "backend"],
+            [self.frontend_exception_handler, self.backend_exception_handler],
+            [
+                FRONTEND_ARG_SPEC,
+                BACKEND_ARG_SPEC,
+            ],
+        ):
+            if hasattr(handler_fn, "__name__"):
+                _fn_name = handler_fn.__name__
+            else:
+                _fn_name = handler_fn.__class__.__name__
+
+            if isinstance(handler_fn, functools.partial):
+                raise ValueError(
+                    f"Provided custom {handler_domain} exception handler `{_fn_name}` is a partial function. Please provide a named function instead."
+                )
+
+            if not callable(handler_fn):
+                raise ValueError(
+                    f"Provided custom {handler_domain} exception handler `{_fn_name}` is not a function."
+                )
+
+            # Allow named functions only as lambda functions cannot be introspected
+            if _fn_name == "<lambda>":
+                raise ValueError(
+                    f"Provided custom {handler_domain} exception handler `{_fn_name}` is a lambda function. Please use a named function instead."
+                )
+
+            # Check if the function has the necessary annotations and types in the right order
+            argspec = inspect.getfullargspec(handler_fn)
+            arg_annotations = {
+                k: eval(v) if isinstance(v, str) else v
+                for k, v in argspec.annotations.items()
+                if k not in ["args", "kwargs", "return"]
+            }
+
+            for required_arg_index, required_arg in enumerate(handler_spec):
+                if required_arg not in arg_annotations:
+                    raise ValueError(
+                        f"Provided custom {handler_domain} exception handler `{_fn_name}` does not take the required argument `{required_arg}`"
+                    )
+                elif (
+                    not list(arg_annotations.keys())[required_arg_index] == required_arg
+                ):
+                    raise ValueError(
+                        f"Provided custom {handler_domain} exception handler `{_fn_name}` has the wrong argument order."
+                        f"Expected `{required_arg}` as the {required_arg_index+1} argument but got `{list(arg_annotations.keys())[required_arg_index]}`"
+                    )
+
+                if not issubclass(arg_annotations[required_arg], Exception):
+                    raise ValueError(
+                        f"Provided custom {handler_domain} exception handler `{_fn_name}` has the wrong type for {required_arg} argument."
+                        f"Expected to be `Exception` but got `{arg_annotations[required_arg]}`"
+                    )
+
+            # Check if the return type is valid for backend exception handler
+            if handler_domain == "backend":
+                sig = inspect.signature(self.backend_exception_handler)
+                return_type = (
+                    eval(sig.return_annotation)
+                    if isinstance(sig.return_annotation, str)
+                    else sig.return_annotation
+                )
+
+                valid = bool(
+                    return_type == EventSpec
+                    or return_type == Optional[EventSpec]
+                    or return_type == List[EventSpec]
+                    or return_type == inspect.Signature.empty
+                    or return_type is None
+                )
+
+                if not valid:
+                    raise ValueError(
+                        f"Provided custom {handler_domain} exception handler `{_fn_name}` has the wrong return type."
+                        f"Expected `Union[EventSpec, List[EventSpec], None]` but got `{return_type}`"
+                    )
+
 
 async def process(
     app: App, event: Event, sid: str, headers: Dict, client_ip: str
@@ -1101,6 +1285,8 @@ async def process(
                     yield update
     except Exception as ex:
         telemetry.send_error(ex, context="backend")
+
+        app.backend_exception_handler(ex)
         raise
 
 

{reflex-0.5.6a2 → reflex-0.5.7a1}/reflex/compiler/templates.py

@@ -44,6 +44,7 @@ class ReflexJinjaEnvironment(Environment):
             "hydrate": constants.CompileVars.HYDRATE,
             "on_load_internal": constants.CompileVars.ON_LOAD_INTERNAL,
             "update_vars_internal": constants.CompileVars.UPDATE_VARS_INTERNAL,
+            "frontend_exception_state": constants.CompileVars.FRONTEND_EXCEPTION_STATE_FULL,
         }
 
 

{reflex-0.5.6a2 → reflex-0.5.7a1}/reflex/components/base/__init__.py

@@ -13,6 +13,10 @@ _SUBMOD_ATTRS: dict[str, list[str]] = {
         "Fragment",
         "fragment",
     ],
+    "error_boundary": [
+        "ErrorBoundary",
+        "error_boundary",
+    ],
     "head": [
         "head",
         "Head",

{reflex-0.5.6a2 → reflex-0.5.7a1}/reflex/components/base/__init__.pyi

@@ -10,6 +10,8 @@ from .document import DocumentHead as DocumentHead
 from .document import Html as Html
 from .document import Main as Main
 from .document import NextScript as NextScript
+from .error_boundary import ErrorBoundary as ErrorBoundary
+from .error_boundary import error_boundary as error_boundary
 from .fragment import Fragment as Fragment
 from .fragment import fragment as fragment
 from .head import Head as Head

reflex-0.5.7a1/reflex/components/base/error_boundary.py

@@ -0,0 +1,78 @@
+"""A React Error Boundary component that catches unhandled frontend exceptions."""
+
+from __future__ import annotations
+
+from typing import List
+
+from reflex.compiler.compiler import _compile_component
+from reflex.components.component import Component
+from reflex.components.el import div, p
+from reflex.constants import Hooks, Imports
+from reflex.event import EventChain, EventHandler
+from reflex.utils.imports import ImportVar
+from reflex.vars import Var
+
+
+class ErrorBoundary(Component):
+    """A React Error Boundary component that catches unhandled frontend exceptions."""
+
+    library = "react-error-boundary"
+    tag = "ErrorBoundary"
+
+    # Fired when the boundary catches an error.
+    on_error: EventHandler[lambda error, info: [error, info]] = Var.create_safe(  # type: ignore
+        "logFrontendError", _var_is_string=False, _var_is_local=False
+    ).to(EventChain)
+
+    # Rendered instead of the children when an error is caught.
+    Fallback_component: Var[Component] = Var.create_safe(
+        "Fallback", _var_is_string=False, _var_is_local=False
+    ).to(Component)
+
+    def add_imports(self) -> dict[str, list[ImportVar]]:
+        """Add imports for the component.
+
+        Returns:
+            The imports to add.
+        """
+        return Imports.EVENTS
+
+    def add_hooks(self) -> List[str | Var]:
+        """Add hooks for the component.
+
+        Returns:
+            The hooks to add.
+        """
+        return [Hooks.EVENTS, Hooks.FRONTEND_ERRORS]
+
+    def add_custom_code(self) -> List[str]:
+        """Add custom Javascript code into the page that contains this component.
+
+        Custom code is inserted at module level, after any imports.
+
+        Returns:
+            The custom code to add.
+        """
+        fallback_container = div(
+            p("Ooops...Unknown Reflex error has occured:"),
+            p(
+                Var.create("error.message", _var_is_local=False, _var_is_string=False),
+                color="red",
+            ),
+            p("Please contact the support."),
+        )
+
+        compiled_fallback = _compile_component(fallback_container)
+
+        return [
+            f"""
+                function Fallback({{ error, resetErrorBoundary }}) {{
+                    return (
+                        {compiled_fallback}
+                    );
+                }}
+            """
+        ]
+
+
+error_boundary = ErrorBoundary.create

reflex-0.5.7a1/reflex/components/base/error_boundary.pyi

@@ -0,0 +1,98 @@
+"""Stub file for reflex/components/base/error_boundary.py"""
+
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+from typing import Any, Callable, Dict, List, Optional, Union, overload
+
+from reflex.components.component import Component
+from reflex.event import EventHandler, EventSpec
+from reflex.style import Style
+from reflex.utils.imports import ImportVar
+from reflex.vars import BaseVar, Var
+
+class ErrorBoundary(Component):
+    def add_imports(self) -> dict[str, list[ImportVar]]: ...
+    def add_hooks(self) -> List[str | Var]: ...
+    def add_custom_code(self) -> List[str]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        Fallback_component: Optional[Union[Var[Component], Component]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_error: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        **props,
+    ) -> "ErrorBoundary":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            Fallback_component: Rendered instead of the children when an error is caught.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
+error_boundary = ErrorBoundary.create

{reflex-0.5.6a2 → reflex-0.5.7a1}/reflex/components/radix/primitives/form.py

@@ -5,6 +5,7 @@ from __future__ import annotations
 from typing import Any, Literal
 
 from reflex.components.component import ComponentNamespace
+from reflex.components.core.debounce import DebounceInput
 from reflex.components.el.elements.forms import Form as HTMLForm
 from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.event import EventHandler
@@ -103,9 +104,9 @@ class FormControl(FormComponent):
                 f"FormControl can only have at most one child, got {len(children)} children"
             )
         for child in children:
-            if not isinstance(child, TextFieldRoot):
+            if not isinstance(child, (TextFieldRoot, DebounceInput)):
                 raise TypeError(
-                    "Only Radix TextFieldRoot is allowed as child of FormControl"
+                    "Only Radix TextFieldRoot and DebounceInput are allowed as children of FormControl"
                 )
         return super().create(*children, **props)