How to use the error prop for ActionForm and Form

[emilioziniades]

I see in the docs for ActionForm and Form, both have an optional prop error of type RwSignal<Option<Box<dyn Error>>>. But how do we actually use this signal? Here is an example:

#[component]
pub fn Login(cx: Scope, action: Action<Login, Result<(), ServerFnError>>) -> impl IntoView {
    let error = create_rw_signal(cx, None);
    view! {
        cx,
        <ActionForm action=action error=error>
            ...
        </ActionForm>
        <p>{move || error.get()}</p>
    }
}

I am trying to call a server function to log the user in. If there is an error message returned from the server, I would like to display that, e.g. "User does not exist" or "Incorrect password". But, when I try read the value from the signal, {move || error.get()}, the compiler complains about trait bounds not being met:

the method `get` exists for struct `RwSignal<Option<Box<dyn Error>>>`, but its trait bounds were not satisfied`

and

     = note: the following trait bounds were not satisfied:
             `std::option::Option<Box<dyn StdError>>: Clone`
             which is required by `leptos::RwSignal<std::option::Option<Box<dyn StdError>>>: leptos::SignalGet<std::option::Option<Box<dyn StdError>>>`

So my question is, if we can't call get on this signal, how can we actually display its contents in the view?

EDIT:

Just to add: I understand that Option<Box<dyn Error>> can't be rendered as is, and that you would have to match on the Option, dereference the Box pointer and then call something like error.display() to get the text of the actual error, but before doing all of this, you would need to be able to call get on the error signal, which I am unable to do.

[gbj]

You can't call .get() because a Box<dyn Error> isn't Clone. You can, however, use .with().

[emilioziniades]

Thanks! The app compiles.

It seems that the error message is still not appearing. I've created a repo with a MRE here from the axum starter template, but this is the relevant part of the code:

#[server(AlwaysErrors, "/api")]
pub async fn always_errors(cx: Scope) -> Result<(),ServerFnError> {
    Err(ServerFnError::ServerError("I will always error".to_string()))
}

#[component]
fn HomePage(cx: Scope) -> impl IntoView {
    let always_errors = create_server_action::<AlwaysErrors>(cx);
    let error = create_rw_signal(cx, None);

    view! { cx,
            <ActionForm action=always_errors error=error>
                <button type="submit">
                    "Click Me To Trigger Server-Side Error"
                </button>
            </ActionForm>
            {move || {
                error
                    .with(|e| {
                        if let Some(err) = e {
                            view! { cx, <p>{format!("ERROR: {err}")}</p> }
                                .into_view(cx)
                        } else {
                            view! { cx, <div></div> }
                                .into_view(cx)
                        }
                    })
            }}
    }

}

I can see in the network tab that the server function is returning 500 with the body {"ServerError":"I will always error"}, but it seems like the error signal does not pick this up. Am I missing something obvious here?

[gbj]

It is somewhat confusing/not the best design. The error signal is set when there was an error with the actual form submission, e.g., a NetworkError or a malformed form.

Your form submits correctly and returns with no error, but it successfully returns Err(_). You can find the latest value returned from the form submission in the always_errors.value() signal, which holds the most-recently-returned value from that server action: in this case, always Err.

I've been moving toward merging these together so that the errors all get funneled into the .value() signal and there is no .error() signal, since it's confusing.

[emilioziniades]

Ah I see, that makes a lot of sense. Yeah using always_errors.value() allowed me to extract the error message returned from the server (with a little bit of rust-foo to map the Option<Result<(), ServerFnError> to an Option<String>).

Thanks for your help! I have just started learning leptos but I am enjoying it so far.