add name and message to frontendend exception handler

reflex/.templates/web/utils/state.js

@@ -993,7 +993,7 @@ export const useEventLoop = (
     window.onerror = function (msg, url, lineNo, columnNo, error) {
       addEvents([
         Event(`${exception_state_name}.handle_frontend_exception`, {
-          stack: error.stack,
+          info: error.name + ": " + error.message + "\n" + error.stack,
           component_stack: "",
         }),
       ]);
@@ -1005,7 +1005,12 @@ export const useEventLoop = (
     window.onunhandledrejection = function (event) {
       addEvents([
         Event(`${exception_state_name}.handle_frontend_exception`, {
-          stack: event.reason?.stack,
+          info:
+            event.reason?.name +
+            ": " +
+            event.reason?.message +
+            "\n" +
+            event.reason?.stack,
           component_stack: "",
         }),
       ]);

reflex/components/base/error_boundary.py

@@ -25,11 +25,14 @@ def on_error_spec(
         The arguments for the event handler.
     """
     return (
-        error.stack,
+        error.name.to(str) + ": " + error.message.to(str) + "\n" + error.stack.to(str),
         info.componentStack,
     )
 
 
+_ERROR_DISPLAY: str = r"""event_args.error.name + ': ' + event_args.error.message + '\n' + event_args.error.stack"""
+
+
 class ErrorBoundary(Component):
     """A React Error Boundary component that catches unhandled frontend exceptions."""
 
@@ -76,9 +79,7 @@ def create(cls, *children, **props):
                                     div(
                                         div(
                                             pre(
-                                                Var(
-                                                    _js_expr="event_args.error.stack",
-                                                ),
+                                                Var(_js_expr=_ERROR_DISPLAY),
                                             ),
                                             padding="0.5rem",
                                             width="fit-content",
@@ -93,7 +94,7 @@ def create(cls, *children, **props):
                                     button(
                                         "Copy",
                                         on_click=set_clipboard(
-                                            Var(_js_expr="event_args.error.stack"),
+                                            Var(_js_expr=_ERROR_DISPLAY)
                                         ),
                                         padding="0.35rem 0.75rem",
                                         margin="0.5rem",

reflex/state.py

@@ -2412,19 +2412,19 @@ class FrontendEventExceptionState(State):
     """Substate for handling frontend exceptions."""
 
     @event
-    def handle_frontend_exception(self, stack: str, component_stack: str) -> None:
+    def handle_frontend_exception(self, info: str, component_stack: str) -> None:
         """Handle frontend exceptions.
 
         If a frontend exception handler is provided, it will be called.
         Otherwise, the default frontend exception handler will be called.
 
         Args:
-            stack: The stack trace of the exception.
+            info: The exception information.
             component_stack: The stack trace of the component where the exception occurred.
 
         """
         prerequisites.get_and_validate_app().app.frontend_exception_handler(
-            Exception(stack)
+            Exception(info)
         )