reflex 0.6.8a2__py3-none-any.whl → 0.7.0a2__py3-none-any.whl

reflex/app.py

@@ -25,8 +25,8 @@ from typing import (
     Callable,
     Coroutine,
     Dict,
-    Generic,
     List,
+    MutableMapping,
     Optional,
     Set,
     Type,
@@ -53,22 +53,28 @@ from reflex.compiler.compiler import ExecutorSafeFunctions, compile_theme
 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.base.strict_mode import StrictMode
 from reflex.components.component import (
     Component,
     ComponentStyle,
     evaluate_style_namespaces,
 )
-from reflex.components.core.banner import connection_pulser, connection_toaster
+from reflex.components.core.banner import (
+    backend_disabled,
+    connection_pulser,
+    connection_toaster,
+)
 from reflex.components.core.breakpoints import set_breakpoints
 from reflex.components.core.client_side_routing import (
     Default404Page,
     wait_for_client_redirect,
 )
+from reflex.components.core.sticky import sticky
 from reflex.components.core.upload import Upload, get_upload_dir
 from reflex.components.radix import themes
 from reflex.config import environment, get_config
 from reflex.event import (
-    BASE_STATE,
+    _EVENT_FIELDS,
     Event,
     EventHandler,
     EventSpec,
@@ -144,7 +150,7 @@ def default_backend_exception_handler(exception: Exception) -> EventSpec:
             position="top-center",
             id="backend_error",
             style={"width": "500px"},
-        )  # type: ignore
+        )
     else:
         error_message.insert(0, "An error occurred.")
         return window_alert("\n".join(error_message))
@@ -156,9 +162,12 @@ def default_overlay_component() -> Component:
     Returns:
         The default overlay_component, which is a connection_modal.
     """
+    config = get_config()
+
     return Fragment.create(
         connection_pulser(),
         connection_toaster(),
+        *([backend_disabled()] if config.is_reflex_cloud else []),
         *codespaces.codespaces_auto_redirect(),
     )
 
@@ -185,7 +194,7 @@ class OverlayFragment(Fragment):
 @dataclasses.dataclass(
     frozen=True,
 )
-class UnevaluatedPage(Generic[BASE_STATE]):
+class UnevaluatedPage:
     """An uncompiled page."""
 
     component: Union[Component, ComponentCallable]
@@ -193,7 +202,7 @@ class UnevaluatedPage(Generic[BASE_STATE]):
     title: Union[Var, str, None]
     description: Union[Var, str, None]
     image: str
-    on_load: Union[EventType[[], BASE_STATE], None]
+    on_load: Union[EventType[()], None]
     meta: List[Dict[str, str]]
 
 
@@ -250,36 +259,36 @@ class App(MiddlewareMixin, LifespanMixin):
     # Attributes to add to the html root tag of every page.
     html_custom_attrs: Optional[Dict[str, str]] = None
 
-    # A map from a route to an unevaluated page. PRIVATE.
-    unevaluated_pages: Dict[str, UnevaluatedPage] = dataclasses.field(
+    # A map from a route to an unevaluated page.
+    _unevaluated_pages: Dict[str, UnevaluatedPage] = dataclasses.field(
         default_factory=dict
     )
 
-    # A map from a page route to the component to render. Users should use `add_page`. PRIVATE.
-    pages: Dict[str, Component] = dataclasses.field(default_factory=dict)
+    # A map from a page route to the component to render. Users should use `add_page`.
+    _pages: Dict[str, Component] = dataclasses.field(default_factory=dict)
 
-    # The backend API object. PRIVATE.
-    api: FastAPI = None  # type: ignore
+    # The backend API object.
+    _api: FastAPI | None = None
 
-    # The state class to use for the app. PRIVATE.
-    state: Optional[Type[BaseState]] = None
+    # The state class to use for the app.
+    _state: Optional[Type[BaseState]] = None
 
     # Class to manage many client states.
     _state_manager: Optional[StateManager] = None
 
-    # Mapping from a route to event handlers to trigger when the page loads. PRIVATE.
-    load_events: Dict[str, List[IndividualEventType[[], Any]]] = dataclasses.field(
+    # Mapping from a route to event handlers to trigger when the page loads.
+    _load_events: Dict[str, List[IndividualEventType[()]]] = dataclasses.field(
         default_factory=dict
     )
 
-    # Admin dashboard to view and manage the database. PRIVATE.
+    # Admin dashboard to view and manage the database.
     admin_dash: Optional[AdminDash] = None
 
-    # The async server name space. PRIVATE.
-    event_namespace: Optional[EventNamespace] = None
+    # The async server name space.
+    _event_namespace: Optional[EventNamespace] = None
 
-    # Background tasks that are currently running. PRIVATE.
-    background_tasks: Set[asyncio.Task] = dataclasses.field(default_factory=set)
+    # Background tasks that are currently running.
+    _background_tasks: Set[asyncio.Task] = dataclasses.field(default_factory=set)
 
     # Frontend Error Handler Function
     frontend_exception_handler: Callable[[Exception], None] = (
@@ -291,6 +300,24 @@ class App(MiddlewareMixin, LifespanMixin):
         [Exception], Union[EventSpec, List[EventSpec], None]
     ] = default_backend_exception_handler
 
+    @property
+    def api(self) -> FastAPI | None:
+        """Get the backend api.
+
+        Returns:
+            The backend api.
+        """
+        return self._api
+
+    @property
+    def event_namespace(self) -> EventNamespace | None:
+        """Get the event namespace.
+
+        Returns:
+            The event namespace.
+        """
+        return self._event_namespace
+
     def __post_init__(self):
         """Initialize the app.
 
@@ -310,7 +337,7 @@ class App(MiddlewareMixin, LifespanMixin):
             set_breakpoints(self.style.pop("breakpoints"))
 
         # Set up the API.
-        self.api = FastAPI(lifespan=self._run_lifespan_tasks)
+        self._api = FastAPI(lifespan=self._run_lifespan_tasks)
         self._add_cors()
         self._add_default_endpoints()
 
@@ -333,8 +360,8 @@ class App(MiddlewareMixin, LifespanMixin):
 
     def _enable_state(self) -> None:
         """Enable state for the app."""
-        if not self.state:
-            self.state = State
+        if not self._state:
+            self._state = State
             self._setup_state()
 
     def _setup_state(self) -> None:
@@ -343,13 +370,13 @@ class App(MiddlewareMixin, LifespanMixin):
         Raises:
             RuntimeError: If the socket server is invalid.
         """
-        if not self.state:
+        if not self._state:
             return
 
         config = get_config()
 
         # Set up the state manager.
-        self._state_manager = StateManager.create(state=self.state)
+        self._state_manager = StateManager.create(state=self._state)
 
         # Set up the Socket.IO AsyncServer.
         if not self.sio:
@@ -380,12 +407,42 @@ class App(MiddlewareMixin, LifespanMixin):
         namespace = config.get_event_namespace()
 
         # Create the event namespace and attach the main app. Not related to any paths.
-        self.event_namespace = EventNamespace(namespace, self)
+        self._event_namespace = EventNamespace(namespace, self)
 
         # Register the event namespace with the socket.
         self.sio.register_namespace(self.event_namespace)
         # Mount the socket app with the API.
-        self.api.mount(str(constants.Endpoint.EVENT), socket_app)
+        if self.api:
+
+            class HeaderMiddleware:
+                def __init__(self, app: ASGIApp):
+                    self.app = app
+
+                async def __call__(
+                    self, scope: MutableMapping[str, Any], receive: Any, send: Callable
+                ):
+                    original_send = send
+
+                    async def modified_send(message: dict):
+                        if message["type"] == "websocket.accept":
+                            if scope.get("subprotocols"):
+                                # The following *does* say "subprotocol" instead of "subprotocols", intentionally.
+                                message["subprotocol"] = scope["subprotocols"][0]
+
+                            headers = dict(message.get("headers", []))
+                            header_key = b"sec-websocket-protocol"
+                            if subprotocol := headers.get(header_key):
+                                message["headers"] = [
+                                    *message.get("headers", []),
+                                    (header_key, subprotocol),
+                                ]
+
+                        return await original_send(message)
+
+                    return await self.app(scope, receive, modified_send)
+
+            socket_app_with_headers = HeaderMiddleware(socket_app)
+            self.api.mount(str(constants.Endpoint.EVENT), socket_app_with_headers)
 
         # Check the exception handlers
         self._validate_exception_handlers()
@@ -396,24 +453,35 @@ class App(MiddlewareMixin, LifespanMixin):
         Returns:
             The string representation of the app.
         """
-        return f"<App state={self.state.__name__ if self.state else None}>"
+        return f"<App state={self._state.__name__ if self._state else None}>"
 
     def __call__(self) -> FastAPI:
         """Run the backend api instance.
 
+        Raises:
+            ValueError: If the app has not been initialized.
+
         Returns:
             The backend api.
         """
+        if not self.api:
+            raise ValueError("The app has not been initialized.")
         return self.api
 
     def _add_default_endpoints(self):
         """Add default api endpoints (ping)."""
         # To test the server.
+        if not self.api:
+            return
+
         self.api.get(str(constants.Endpoint.PING))(ping)
         self.api.get(str(constants.Endpoint.HEALTH))(health)
 
     def _add_optional_endpoints(self):
         """Add optional api endpoints (_upload)."""
+        if not self.api:
+            return
+
         if Upload.is_used:
             # To upload files.
             self.api.post(str(constants.Endpoint.UPLOAD))(upload(self))
@@ -431,6 +499,8 @@ class App(MiddlewareMixin, LifespanMixin):
 
     def _add_cors(self):
         """Add CORS middleware to the app."""
+        if not self.api:
+            return
         self.api.add_middleware(
             cors.CORSMiddleware,
             allow_credentials=True,
@@ -462,14 +532,8 @@ class App(MiddlewareMixin, LifespanMixin):
 
         Returns:
             The generated component.
-
-        Raises:
-            exceptions.MatchTypeError: If the return types of match cases in rx.match are different.
         """
-        try:
-            return component if isinstance(component, Component) else component()
-        except exceptions.MatchTypeError:
-            raise
+        return component if isinstance(component, Component) else component()
 
     def add_page(
         self,
@@ -478,7 +542,7 @@ class App(MiddlewareMixin, LifespanMixin):
         title: str | Var | None = None,
         description: str | Var | None = None,
         image: str = constants.DefaultPage.IMAGE,
-        on_load: EventType[[], BASE_STATE] | None = None,
+        on_load: EventType[()] | None = None,
         meta: list[dict[str, str]] = constants.DefaultPage.META_LIST,
     ):
         """Add a page to the app.
@@ -526,13 +590,13 @@ class App(MiddlewareMixin, LifespanMixin):
         # Check if the route given is valid
         verify_route_validity(route)
 
-        if route in self.unevaluated_pages and environment.RELOAD_CONFIG.is_set():
+        if route in self._unevaluated_pages and environment.RELOAD_CONFIG.is_set():
             # when the app is reloaded(typically for app harness tests), we should maintain
             # the latest render function of a route.This applies typically to decorated pages
             # since they are only added when app._compile is called.
-            self.unevaluated_pages.pop(route)
+            self._unevaluated_pages.pop(route)
 
-        if route in self.unevaluated_pages:
+        if route in self._unevaluated_pages:
             route_name = (
                 f"`{route}` or `/`"
                 if route == constants.PageNames.INDEX_ROUTE
@@ -545,15 +609,15 @@ class App(MiddlewareMixin, LifespanMixin):
 
         # Setup dynamic args for the route.
         # this state assignment is only required for tests using the deprecated state kwarg for App
-        state = self.state if self.state else State
+        state = self._state if self._state else State
         state.setup_dynamic_args(get_route_args(route))
 
         if on_load:
-            self.load_events[route] = (
+            self._load_events[route] = (
                 on_load if isinstance(on_load, list) else [on_load]
             )
 
-        self.unevaluated_pages[route] = UnevaluatedPage(
+        self._unevaluated_pages[route] = UnevaluatedPage(
             component=component,
             route=route,
             title=title,
@@ -563,14 +627,15 @@ class App(MiddlewareMixin, LifespanMixin):
             meta=meta,
         )
 
-    def _compile_page(self, route: str):
+    def _compile_page(self, route: str, save_page: bool = True):
         """Compile a page.
 
         Args:
             route: The route of the page to compile.
+            save_page: If True, the compiled page is saved to self._pages.
         """
         component, enable_state = compiler.compile_unevaluated_page(
-            route, self.unevaluated_pages[route], self.state, self.style, self.theme
+            route, self._unevaluated_pages[route], self._state, self.style, self.theme
         )
 
         if enable_state:
@@ -578,9 +643,10 @@ class App(MiddlewareMixin, LifespanMixin):
 
         # Add the page.
         self._check_routes_conflict(route)
-        self.pages[route] = component
+        if save_page:
+            self._pages[route] = component
 
-    def get_load_events(self, route: str) -> list[IndividualEventType[[], Any]]:
+    def get_load_events(self, route: str) -> list[IndividualEventType[()]]:
         """Get the load events for a route.
 
         Args:
@@ -592,7 +658,7 @@ class App(MiddlewareMixin, LifespanMixin):
         route = route.lstrip("/")
         if route == "":
             route = constants.PageNames.INDEX_ROUTE
-        return self.load_events.get(route, [])
+        return self._load_events.get(route, [])
 
     def _check_routes_conflict(self, new_route: str):
         """Verify if there is any conflict between the new route and any existing route.
@@ -616,10 +682,13 @@ class App(MiddlewareMixin, LifespanMixin):
             constants.RouteRegex.SINGLE_CATCHALL_SEGMENT,
             constants.RouteRegex.DOUBLE_CATCHALL_SEGMENT,
         )
-        for route in self.pages:
+        for route in self._pages:
             replaced_route = replace_brackets_with_keywords(route)
             for rw, r, nr in zip(
-                replaced_route.split("/"), route.split("/"), new_route.split("/")
+                replaced_route.split("/"),
+                route.split("/"),
+                new_route.split("/"),
+                strict=False,
             ):
                 if rw in segments and r != nr:
                     # If the slugs in the segments of both routes are not the same, then the route is invalid
@@ -639,7 +708,7 @@ class App(MiddlewareMixin, LifespanMixin):
         title: str = constants.Page404.TITLE,
         image: str = constants.Page404.IMAGE,
         description: str = constants.Page404.DESCRIPTION,
-        on_load: EventType[[], BASE_STATE] | None = None,
+        on_load: EventType[()] | None = None,
         meta: list[dict[str, str]] = constants.DefaultPage.META_LIST,
     ):
         """Define a custom 404 page for any url having no match.
@@ -650,8 +719,8 @@ class App(MiddlewareMixin, LifespanMixin):
         Args:
             component: The component to display at the page.
             title: The title of the page.
-            description: The description of the page.
             image: The image to display on the page.
+            description: The description of the page.
             on_load: The event handler(s) that will be called each time the page load.
             meta: The metadata of the page.
         """
@@ -674,6 +743,9 @@ class App(MiddlewareMixin, LifespanMixin):
     def _setup_admin_dash(self):
         """Setup the admin dash."""
         # Get the admin dash.
+        if not self.api:
+            return
+
         admin_dash = self.admin_dash
 
         if admin_dash and admin_dash.models:
@@ -715,7 +787,7 @@ class App(MiddlewareMixin, LifespanMixin):
         frontend_packages = get_config().frontend_packages
         _frontend_packages = []
         for package in frontend_packages:
-            if package in (get_config().tailwind or {}).get("plugins", []):  # type: ignore
+            if package in (get_config().tailwind or {}).get("plugins", []):
                 console.warn(
                     f"Tailwind packages are inferred from 'plugins', remove `{package}` from `frontend_packages`"
                 )
@@ -778,10 +850,10 @@ class App(MiddlewareMixin, LifespanMixin):
 
     def _setup_overlay_component(self):
         """If a State is not used and no overlay_component is specified, do not render the connection modal."""
-        if self.state is None and self.overlay_component is default_overlay_component:
+        if self._state is None and self.overlay_component is default_overlay_component:
             self.overlay_component = None
-        for k, component in self.pages.items():
-            self.pages[k] = self._add_overlay_to_component(component)
+        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:
@@ -793,14 +865,23 @@ class App(MiddlewareMixin, LifespanMixin):
 
     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:
+        if self._state is None and self.error_boundary is default_error_boundary:
             self.error_boundary = None
 
-        for k, component in self.pages.items():
+        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)
+            self._pages[k] = self._add_error_boundary_to_component(component)
+
+    def _setup_sticky_badge(self):
+        """Add the sticky badge to the app."""
+        for k, component in self._pages.items():
+            # Would be nice to share single sticky_badge across all pages, but
+            # it bungles the StatefulComponent compile step.
+            sticky_badge = sticky()
+            sticky_badge._add_style_recursive({})
+            self._pages[k] = Fragment.create(sticky_badge, component)
 
     def _apply_decorated_pages(self):
         """Add @rx.page decorated pages to the app.
@@ -826,21 +907,27 @@ class App(MiddlewareMixin, LifespanMixin):
         Raises:
             VarDependencyError: When a computed var has an invalid dependency.
         """
-        if not self.state:
+        if not self._state:
             return
 
         if not state:
-            state = self.state
+            state = self._state
 
         for var in state.computed_vars.values():
             if not var._cache:
                 continue
             deps = var._deps(objclass=state)
-            for dep in deps:
-                if dep not in state.vars and dep not in state.backend_vars:
-                    raise exceptions.VarDependencyError(
-                        f"ComputedVar {var._js_expr} on state {state.__name__} has an invalid dependency {dep}"
-                    )
+            for state_name, dep_set in deps.items():
+                state_cls = (
+                    state.get_root_state().get_class_substate(state_name)
+                    if state_name != state.get_full_name()
+                    else state
+                )
+                for dep in dep_set:
+                    if dep not in state_cls.vars and dep not in state_cls.backend_vars:
+                        raise exceptions.VarDependencyError(
+                            f"ComputedVar {var._js_expr} on state {state.__name__} has an invalid dependency {state_name}.{dep}"
+                        )
 
         for substate in state.class_subclasses:
             self._validate_var_dependencies(substate)
@@ -856,13 +943,13 @@ class App(MiddlewareMixin, LifespanMixin):
         """
         from reflex.utils.exceptions import ReflexRuntimeError
 
-        self.pages = {}
+        self._pages = {}
 
         def get_compilation_time() -> str:
             return str(datetime.now().time()).split(".")[0]
 
         # Render a default 404 page if the user didn't supply one
-        if constants.Page404.SLUG not in self.unevaluated_pages:
+        if constants.Page404.SLUG not in self._unevaluated_pages:
             self.add_page(route=constants.Page404.SLUG)
 
         # Fix up the style.
@@ -878,19 +965,23 @@ class App(MiddlewareMixin, LifespanMixin):
             # If a theme component was provided, wrap the app with it
             app_wrappers[(20, "Theme")] = self.theme
 
-        for route in self.unevaluated_pages:
-            console.debug(f"Evaluating page: {route}")
-            self._compile_page(route)
+        # Get the env mode.
+        config = get_config()
 
-        # Add the optional endpoints (_upload)
-        self._add_optional_endpoints()
+        if config.react_strict_mode:
+            app_wrappers[(200, "StrictMode")] = StrictMode.create()
 
-        if not self._should_compile():
-            return
+        should_compile = self._should_compile()
 
-        self._validate_var_dependencies()
-        self._setup_overlay_component()
-        self._setup_error_boundary()
+        if not should_compile:
+            for route in self._unevaluated_pages:
+                console.debug(f"Evaluating page: {route}")
+                self._compile_page(route, save_page=should_compile)
+
+            # Add the optional endpoints (_upload)
+            self._add_optional_endpoints()
+
+            return
 
         # Create a progress bar.
         progress = Progress(
@@ -900,18 +991,32 @@ class App(MiddlewareMixin, LifespanMixin):
         )
 
         # try to be somewhat accurate - but still not 100%
-        adhoc_steps_without_executor = 6
+        adhoc_steps_without_executor = 7
         fixed_pages_within_executor = 5
         progress.start()
         task = progress.add_task(
             f"[{get_compilation_time()}] Compiling:",
-            total=len(self.pages)
+            total=len(self._pages)
+            + (len(self._unevaluated_pages) * 2)
             + fixed_pages_within_executor
             + adhoc_steps_without_executor,
         )
 
-        # Get the env mode.
-        config = get_config()
+        for route in self._unevaluated_pages:
+            console.debug(f"Evaluating page: {route}")
+            self._compile_page(route, save_page=should_compile)
+            progress.advance(task)
+
+        # Add the optional endpoints (_upload)
+        self._add_optional_endpoints()
+
+        self._validate_var_dependencies()
+        self._setup_overlay_component()
+        self._setup_error_boundary()
+        if config.show_built_with_reflex:
+            self._setup_sticky_badge()
+
+        progress.advance(task)
 
         # Store the compile results.
         compile_results = []
@@ -924,7 +1029,7 @@ class App(MiddlewareMixin, LifespanMixin):
 
         # This has to happen before compiling stateful components as that
         # prevents recursive functions from reaching all components.
-        for component in self.pages.values():
+        for component in self._pages.values():
             # Add component._get_all_imports() to all_imports.
             all_imports.update(component._get_all_imports())
 
@@ -939,12 +1044,12 @@ class App(MiddlewareMixin, LifespanMixin):
             stateful_components_path,
             stateful_components_code,
             page_components,
-        ) = compiler.compile_stateful_components(self.pages.values())
+        ) = compiler.compile_stateful_components(self._pages.values())
 
         progress.advance(task)
 
         # Catch "static" apps (that do not define a rx.State subclass) which are trying to access rx.State.
-        if code_uses_state_contexts(stateful_components_code) and self.state is None:
+        if code_uses_state_contexts(stateful_components_code) and self._state is None:
             raise ReflexRuntimeError(
                 "To access rx.State in frontend components, at least one "
                 "subclass of rx.State must be defined in the app."
@@ -958,7 +1063,7 @@ class App(MiddlewareMixin, LifespanMixin):
             compiler.compile_document_root(
                 self.head_components,
                 html_lang=self.html_lang,
-                html_custom_attrs=self.html_custom_attrs,  # type: ignore
+                html_custom_attrs=self.html_custom_attrs,  # pyright: ignore [reportArgumentType]
             )
         )
 
@@ -981,20 +1086,20 @@ class App(MiddlewareMixin, LifespanMixin):
                 max_workers=environment.REFLEX_COMPILE_THREADS.get() or None
             )
 
-        for route, component in zip(self.pages, page_components):
+        for route, component in zip(self._pages, page_components, strict=True):
             ExecutorSafeFunctions.COMPONENTS[route] = component
 
-        ExecutorSafeFunctions.STATE = self.state
+        ExecutorSafeFunctions.STATE = self._state
 
         with executor:
             result_futures = []
 
-            def _submit_work(fn, *args, **kwargs):
+            def _submit_work(fn: Callable, *args, **kwargs):
                 f = executor.submit(fn, *args, **kwargs)
                 result_futures.append(f)
 
             # Compile the pre-compiled pages.
-            for route in self.pages:
+            for route in self._pages:
                 _submit_work(
                     ExecutorSafeFunctions.compile_page,
                     route,
@@ -1029,7 +1134,7 @@ class App(MiddlewareMixin, LifespanMixin):
 
         # Compile the contexts.
         compile_results.append(
-            compiler.compile_contexts(self.state, self.theme),
+            compiler.compile_contexts(self._state, self.theme),
         )
         if self.theme is not None:
             # Fix #2992 by removing the top-level appearance prop
@@ -1151,9 +1256,9 @@ class App(MiddlewareMixin, LifespanMixin):
                 )
 
         task = asyncio.create_task(_coro())
-        self.background_tasks.add(task)
+        self._background_tasks.add(task)
         # Clean up task from background_tasks set when complete.
-        task.add_done_callback(self.background_tasks.discard)
+        task.add_done_callback(self._background_tasks.discard)
         return task
 
     def _validate_exception_handlers(self):
@@ -1163,11 +1268,11 @@ class App(MiddlewareMixin, LifespanMixin):
             ValueError: If the custom exception handlers are invalid.
 
         """
-        FRONTEND_ARG_SPEC = {
+        frontend_arg_spec = {
             "exception": Exception,
         }
 
-        BACKEND_ARG_SPEC = {
+        backend_arg_spec = {
             "exception": Exception,
         }
 
@@ -1175,9 +1280,10 @@ class App(MiddlewareMixin, LifespanMixin):
             ["frontend", "backend"],
             [self.frontend_exception_handler, self.backend_exception_handler],
             [
-                FRONTEND_ARG_SPEC,
-                BACKEND_ARG_SPEC,
+                frontend_arg_spec,
+                backend_arg_spec,
             ],
+            strict=True,
         ):
             if hasattr(handler_fn, "__name__"):
                 _fn_name = handler_fn.__name__
@@ -1218,7 +1324,7 @@ class App(MiddlewareMixin, LifespanMixin):
                 ):
                     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]}`"
+                        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):
@@ -1319,15 +1425,14 @@ async def process(
                 if app._process_background(state, event) is not None:
                     # `final=True` allows the frontend send more events immediately.
                     yield StateUpdate(final=True)
-                    return
-
-                # Process the event synchronously.
-                async for update in state._process(event):
-                    # Postprocess the event.
-                    update = await app._postprocess(state, event, update)
-
-                    # Yield the update.
-                    yield update
+                else:
+                    # Process the event synchronously.
+                    async for update in state._process(event):
+                        # Postprocess the event.
+                        update = await app._postprocess(state, event, update)
+
+                        # Yield the update.
+                        yield update
     except Exception as ex:
         telemetry.send_error(ex, context="backend")
 
@@ -1522,16 +1627,20 @@ class EventNamespace(AsyncNamespace):
         self.sid_to_token = {}
         self.app = app
 
-    def on_connect(self, sid, environ):
+    def on_connect(self, sid: str, environ: dict):
         """Event for when the websocket is connected.
 
         Args:
             sid: The Socket.IO session id.
             environ: The request information, including HTTP headers.
         """
-        pass
+        subprotocol = environ.get("HTTP_SEC_WEBSOCKET_PROTOCOL")
+        if subprotocol and subprotocol != constants.Reflex.VERSION:
+            console.warn(
+                f"Frontend version {subprotocol} for session {sid} does not match the backend version {constants.Reflex.VERSION}."
+            )
 
-    def on_disconnect(self, sid):
+    def on_disconnect(self, sid: str):
         """Event for when the websocket disconnects.
 
         Args:
@@ -1553,7 +1662,7 @@ class EventNamespace(AsyncNamespace):
             self.emit(str(constants.SocketEvent.EVENT), update, to=sid)
         )
 
-    async def on_event(self, sid, data):
+    async def on_event(self, sid: str, data: Any):
         """Event for receiving front-end websocket events.
 
         Raises:
@@ -1562,12 +1671,36 @@ class EventNamespace(AsyncNamespace):
         Args:
             sid: The Socket.IO session id.
             data: The event data.
+
+        Raises:
+            EventDeserializationError: If the event data is not a dictionary.
         """
         fields = data
-        # Get the event.
-        event = Event(
-            **{k: v for k, v in fields.items() if k not in ("handler", "event_actions")}
-        )
+
+        if isinstance(fields, str):
+            console.warn(
+                "Received event data as a string. This generally should not happen and may indicate a bug."
+                f" Event data: {fields}"
+            )
+            try:
+                fields = json.loads(fields)
+            except json.JSONDecodeError as ex:
+                raise exceptions.EventDeserializationError(
+                    f"Failed to deserialize event data: {fields}."
+                ) from ex
+
+        if not isinstance(fields, dict):
+            raise exceptions.EventDeserializationError(
+                f"Event data must be a dictionary, but received {fields} of type {type(fields)}."
+            )
+
+        try:
+            # Get the event.
+            event = Event(**{k: v for k, v in fields.items() if k in _EVENT_FIELDS})
+        except (TypeError, ValueError) as ex:
+            raise exceptions.EventDeserializationError(
+                f"Failed to deserialize event data: {fields}."
+            ) from ex
 
         self.token_to_sid[event.token] = sid
         self.sid_to_token[sid] = event.token
@@ -1596,7 +1729,7 @@ class EventNamespace(AsyncNamespace):
             # Emit the update from processing the event.
             await self.emit_update(update=update, sid=sid)
 
-    async def on_ping(self, sid):
+    async def on_ping(self, sid: str):
         """Event for testing the API endpoint.
 
         Args: