[ENG-4383] Handle special float values on frontend (#4638)

Add a test case to `test_computed_vars.py` which renders a list of special floats.

Fix #4637

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

@@ -410,7 +410,14 @@ export const connect = async (
     autoUnref: false,
   });
   // Ensure undefined fields in events are sent as null instead of removed
-  socket.current.io.encoder.replacer = (k, v) => (v === undefined ? null : v)
+  socket.current.io.encoder.replacer = (k, v) => (v === undefined ? null : v);
+  socket.current.io.decoder.tryParse = (str) => {
+    try {
+      return JSON5.parse(str);
+    } catch (e) {
+      return false;
+    }
+  };
 
   function checkVisibility() {
     if (document.visibilityState === "visible") {

tests/integration/test_computed_vars.py

@@ -58,6 +58,11 @@ def depends_on_count1(self) -> int:
         def depends_on_count3(self) -> int:
             return self.count
 
+        # special floats should be properly decoded on the frontend
+        @rx.var(cache=True, initial_value=[])
+        def special_floats(self) -> list[float]:
+            return [42.9, float("nan"), float("inf"), float("-inf")]
+
         @rx.event
         def increment(self):
             self.count += 1
@@ -103,6 +108,11 @@ def index() -> rx.Component:
                     State.depends_on_count3,
                     id="depends_on_count3",
                 ),
+                rx.text("special_floats:"),
+                rx.text(
+                    State.special_floats.join(", "),
+                    id="special_floats",
+                ),
             ),
         )
 
@@ -224,6 +234,10 @@ async def test_computed_vars(
     assert depends_on_count3
     assert depends_on_count3.text == "0"
 
+    special_floats = driver.find_element(By.ID, "special_floats")
+    assert special_floats
+    assert special_floats.text == "42.9, NaN, Infinity, -Infinity"
+
     increment = driver.find_element(By.ID, "increment")
     assert increment.is_enabled()