Effects aren't run inside the error handler when an error is thrown from the server through a suspense boundary

[ealmloff]

Problem

Effects aren't run on the client if the server throws an error through a suspense boundary

Steps To Reproduce

Steps to reproduce the behavior:

Run this reproduction from this thread in discord:

use dioxus::prelude::*;

fn main() {
    dioxus::launch(app);
}

#[server]
pub async fn delayed_error() -> Result<(), ServerFnError> {
    // It works without this delay, but breaks with the delay
    tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
    Err(ServerFnError::new("dot dot dot"))
}

#[component]
fn SimpleEffect() -> Element {
    use_effect(move || panic!("boo"));
    rsx! {
        {"Simple effect rsx"}
    }
}

#[component]
fn app() -> Element {
    rsx! {
        ErrorComp {
            SuspenseBoundary {
                fallback: |_context: SuspenseContext| rsx! {
                    div { "Loading..." }
                },
                ErrorPage {}
            }
        }
    }
}

#[component]
fn ErrorPage() -> Element {
    use_server_future(|| async move { delayed_error().await })?
        .read()
        .as_ref()
        .cloned()
        .unwrap()?;
    rsx! {}
}

#[component]
fn ErrorComp(children: Element) -> Element {
    rsx! {
        ErrorBoundary {
            handle_error: |_| {
                rsx! {
                    {"Hello from error comp"}
                    SimpleEffect {}
                }
            },
            {children}
        }
    }
}

Expected behavior

The effect should run

Environment:

• Dioxus version: main
• Rust version: nightly
• OS info: macOS
• App platform: web

[ealmloff]

It looks like this is a silent hydration error. The client can't find the value for the server function which causes a mismatch in the html. This version of the reproduction shows the issue more clearly. The button isn't interactive because it fails to hydrate:

use dioxus::{core::current_scope_id, prelude::*};
use tracing::Level;

fn main() {
    dioxus::logger::init(Level::TRACE).unwrap();
    dioxus::launch(|| rsx! {Router::<Route> {}});
}

#[derive(Routable, Clone, PartialEq)]
enum Route {
    #[route("/")]
    Home,
}

#[server]
pub async fn delayed_error() -> Result<(), ServerFnError> {
    // It works without this delay, but breaks with the delay
    tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
    Err(ServerFnError::new("dot dot dot"))
}

#[component]
fn SimpleEffect() -> Element {
    tracing::info!("effect scope {:?}", current_scope_id());
    use_effect(move || panic!("boo"));
    let mut count = use_signal(|| 0);
    rsx! {
        button {
            onclick: move |_| count += 1,
            "{count}"
        }
    }
}

#[component]
fn Home() -> Element {
    // use_hook(commit_initial_chunk);
    tracing::info!("app scope {:?}", current_scope_id());
    rsx! {
        ErrorComp {
            SuspenseBoundary {
                fallback: |_context: SuspenseContext| {
                    rsx! {
                        div { "Loading..." }
                    }
                },
                ErrorPage {}
            }
        }
    }
}

#[component]
fn ErrorPage() -> Element {
    let result = use_server_future(|| async move { delayed_error().await });
    tracing::info!("result: {result:?}");
    let value = result?;
    let error = value.read().as_ref().cloned().unwrap();
    tracing::info!("error: {error:?}");
    error?;
    rsx! {}
}

#[component]
fn ErrorComp(children: Element) -> Element {
    rsx! {
        ErrorBoundary {
            handle_error: |_| {
                tracing::info!("Hello from error comp");
                rsx! {
                    // {"Hello from error comp"}
                    SimpleEffect {}
                }
            },
            {children}
        }
    }
}