ENG-8113: handle_frontend_exception triggers auto reload (#5922)

* ENG-8113: handle_frontend_exception triggers auto reload

For configurable types of errors refresh once per configurable period in an
attempt to automatically clear spurious issues when reloading.

* Address feedback comments

* move cooldown time to env var

Author: masenf

reflex/environment.py

@@ -696,6 +696,9 @@ class EnvironmentVariables:
     # How long to delay writing updated states to disk. (Higher values mean less writes, but more chance of lost data.)
     REFLEX_STATE_MANAGER_DISK_DEBOUNCE_SECONDS: EnvVar[float] = env_var(2.0)
 
+    # How long to wait between automatic reload on frontend error to avoid reload loops.
+    REFLEX_AUTO_RELOAD_COOLDOWN_TIME_MS: EnvVar[int] = env_var(10_000)
+
 
 environment = EnvironmentVariables()
 

reflex/state.py

@@ -11,11 +11,12 @@
 import functools
 import inspect
 import pickle
+import re
 import sys
 import time
 import typing
 import warnings
-from collections.abc import AsyncIterator, Callable, Sequence
+from collections.abc import AsyncIterator, Callable, Iterator, Sequence
 from enum import Enum
 from hashlib import md5
 from importlib.util import find_spec
@@ -34,6 +35,7 @@
     Event,
     EventHandler,
     EventSpec,
+    call_script,
     fix_events,
 )
 from reflex.istate import HANDLED_PICKLE_ERRORS, debug_failed_pickles
@@ -2470,11 +2472,26 @@ def wrapper() -> Component:
     return wrapper
 
 
+# sessionStorage key holding the ms timestamp of the last reload on error
+LAST_RELOADED_KEY = "reflex_last_reloaded_on_error"
+
+
 class FrontendEventExceptionState(State):
     """Substate for handling frontend exceptions."""
 
+    # If the frontend error message contains any of these strings, automatically reload the page.
+    auto_reload_on_errors: ClassVar[list[re.Pattern]] = [
+        re.compile(  # Chrome/Edge
+            re.escape("TypeError: Cannot read properties of null")
+        ),
+        re.compile(re.escape("TypeError: null is not an object")),  # Safari
+        re.compile(r"TypeError: can't access property \".*\" of null"),  # Firefox
+    ]
+
     @event
-    def handle_frontend_exception(self, info: str, component_stack: str) -> None:
+    def handle_frontend_exception(
+        self, info: str, component_stack: str
+    ) -> Iterator[EventSpec]:
         """Handle frontend exceptions.
 
         If a frontend exception handler is provided, it will be called.
@@ -2484,7 +2501,21 @@ def handle_frontend_exception(self, info: str, component_stack: str) -> None:
             info: The exception information.
             component_stack: The stack trace of the component where the exception occurred.
 
+        Yields:
+            Optional auto-reload event for certain errors outside cooldown period.
         """
+        # Handle automatic reload for certain errors.
+        if type(self).auto_reload_on_errors and any(
+            error.search(info) for error in type(self).auto_reload_on_errors
+        ):
+            yield call_script(
+                f"const last_reload = parseInt(window.sessionStorage.getItem('{LAST_RELOADED_KEY}')) || 0;"
+                f"if (Date.now() - last_reload > {environment.REFLEX_AUTO_RELOAD_COOLDOWN_TIME_MS.get()})"
+                "{"
+                f"window.sessionStorage.setItem('{LAST_RELOADED_KEY}', Date.now().toString());"
+                "window.location.reload();"
+                "}"
+            )
         prerequisites.get_and_validate_app().app.frontend_exception_handler(
             Exception(info)
         )