Fix hydration error suspense (#4640)

* Fix hydration of error boundaries

* add a regression test

* add more comments

* fix typos

* more typos

* fix clippy

packages/playwright-tests/fullstack-errors/.gitignore

@@ -0,0 +1,3 @@
+.dioxus
+dist
+target

packages/playwright-tests/fullstack-errors/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "dioxus-playwright-fullstack-errors-test"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { workspace = true, features = ["fullstack"] }
+serde = "1.0.219"
+tokio = { workspace = true, features = ["full"], optional = true }
+
+[features]
+default = []
+server = ["dioxus/server", "dep:tokio"]
+web = ["dioxus/web"]

packages/playwright-tests/fullstack-errors/src/main.rs

@@ -0,0 +1,67 @@
+// This test is used by playwright configured in the root of the repo
+// Tests:
+// - Errors that originate in the initial render
+
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+
+fn main() {
+    launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        Errors {}
+    }
+}
+
+#[server]
+async fn server_error() -> ServerFnResult<String> {
+    tokio::time::sleep(tokio::time::Duration::from_millis(1000)).await;
+    Err(ServerFnError::new("the server threw an error!"))
+}
+
+#[component]
+fn Errors() -> Element {
+    rsx! {
+        // This is a tricky case for suspense https://github.com/DioxusLabs/dioxus/issues/2570
+        // Root suspense boundary is already resolved when the inner suspense boundary throws an error.
+        // We need to throw the error from the inner suspense boundary on the server to the hydrated
+        // suspense boundary on the client
+        ErrorBoundary {
+            handle_error: |_| rsx! {
+                ErrorFallbackButton {}
+            },
+            SuspenseBoundary {
+                fallback: |_: SuspenseContext| rsx! {
+                    div {
+                        "Loading..."
+                    }
+                },
+                ThrowsError {}
+            }
+        }
+    }
+}
+
+#[component]
+pub fn ErrorFallbackButton() -> Element {
+    let mut count = use_signal(|| 0);
+
+    rsx! {
+        // Make sure the error fallback is interactive after hydration
+        button {
+            id: "error-fallback-button",
+            onclick: move |_| count += 1,
+            "Error fallback button clicked {count} times"
+        }
+    }
+}
+
+#[component]
+pub fn ThrowsError() -> Element {
+    use_server_future(server_error)?.unwrap()?;
+    rsx! {
+        "success"
+    }
+}