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.spec.js

@@ -0,0 +1,13 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+test("errors", async ({ page }) => {
+  await page.goto("http://localhost:3232");
+
+  // Make sure the error that was thrown on the server is shown in the error boundary on the client
+  const errors = page.locator("#error-fallback-button");
+  await expect(errors).toContainText("Error fallback button clicked 0 times");
+  // Make sure the fallback is interactive
+  await errors.click();
+  await expect(errors).toContainText("Error fallback button clicked 1 times");
+});

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"
+    }
+}

packages/playwright-tests/playwright.config.js

@@ -120,6 +120,15 @@ module.exports = defineConfig({
       reuseExistingServer: !process.env.CI,
       stdout: "pipe",
     },
+    {
+      cwd: path.join(process.cwd(), "fullstack-errors"),
+      command:
+        'cargo run --package dioxus-cli --release -- run --verbose --force-sequential --web --addr "127.0.0.1" --port 3232',
+      port: 3232,
+      timeout: 50 * 60 * 1000,
+      reuseExistingServer: !process.env.CI,
+      stdout: "pipe",
+    },
     {
       cwd: path.join(process.cwd(), "fullstack-mounted"),
       command: