ActionForm cannot handle error returned by server function

[SleeplessOne1917]

I have the following:

use crate::ui::components::common::password_input::PasswordInput;
use leptos::*;
use leptos_router::ActionForm;
use std::error::Error;

#[server(LoginAction, "/serverfn")]
pub async fn login(username_or_email: String, password: String) -> Result<(), ServerFnError> {
  use crate::lemmy_client::{LemmyClient, LemmyRequest};
  use actix_session::Session;
  use actix_web::web;
  use awc::Client;
  use lemmy_api_common::person::{Login, LoginResponse};
  use leptos_actix::extract;

  extract(|client: web::Data<Client>, session: Session| async move {
    let req = Login {
      username_or_email: username_or_email.into(),
      password: password.into(),
      totp_2fa_token: None,
    };

    let LoginResponse { jwt, .. } = client.login(req).await?;
    if let Some(jwt) = jwt {
      session.insert("jwt", jwt.into_inner())?;
    }

    Ok(())
  })
  .await?
}

#[component]
pub fn LoginForm() -> impl IntoView {
  let login = create_server_action::<LoginAction>();

  let error = RwSignal::<Option<Box<dyn Error>>>::new(None);

  let has_error = Signal::derive(move || with!(|error| error.is_some()));

  view! {
    <ActionForm class="space-y-3" action=login error=error>
      <Show when=has_error>
        Error!
      </Show>
      <div class="form-control w-full">
        <label class="label" for="username">
          <span class="label-text">Username</span>
        </label>
        <input
          id="username"
          type="text"
          required
          name="username_or_email"
          class="input input-bordered"
          placeholder="Username"
        />
      </div>

      <PasswordInput
        id="password"
        name="password"
      />

      <button class="btn btn-lg" type="submit">
        Login
      </button>
    </ActionForm>
  }
}

When the server function returns an Ok, everything works as intended. When it returns an Err, I get the following:

There are a couple of things to notice here. First, the browser's URL bar is set to the URL of the server function. Second is that I have created a RW signal to take in the error value for ActionForm and have passed it as a prop. The third is that I have a derived signal to track when there is an error that I use for a Show component in the ActionForm.

I have tried putting a suspense and an error boundary around the action form to no avail. I've also tried making a small representative example repo of the issue, but was unable to replicate it. I'm guessing this means that the problem is with my code instead of how ActionForms handle errors returned by their action.

Has anyone encountered a similar problem?

[gbj]

When it works in the Ok state, is it reloading the page or sending a request from the browser to the server function endpoint?

If it's reloading the page, I expect there's some kind of hydration issue. Unless you're in islands mode in which case it's a different situation. That would also explain the form posting to the server fn endpoint and then sitting there.

It's hard to say anything more useful without any way to reproduce it.

[gbj]

That's in the console where the server is running, right? It looks like the server is panicking, possibly mid-stream, which would certainly help explain a hydration issue. I suspect that is the core of the actual problem here.

[SleeplessOne1917]

Have you ever seen an error like that before? It doesn't give me any info where in my codebase the panic is happening?

[SleeplessOne1917]

@gbj I'm certain now the issue is with how I'm using leptos_query. I found the same error mentioned in the FAQ. It says to suppress loading queries during introspection and to stop suppressing them once that is done. However, I don't know how to do that in Actix and the only example they provide is for Axum.

I've tried this and still got the issue:

HttpServer::new(move || {
                let leptos_options = &conf.leptos_options;
                let site_root = &leptos_options.site_root;
                let routes = &routes;


                let client = web::Data::new(Client::new());

                App::new()
                    .route("/api/{tail:.*}", web::route()
                           .guard(guard::Any(guard::Get()).or(guard::Header("content-type", "application/json")))
                           .to(route_to_api))
                    .route("/serverfn/{tail:.*}", leptos_actix::handle_server_fns())
                    .wrap(cookie_middleware())
                    .service(Files::new("/pkg", format!("{site_root}/pkg")))
                    .service(Files::new("/assets", site_root))
                    .service(favicon)
                    .leptos_routes(
                        leptos_options.to_owned(),
                        routes.to_owned(),
                        || {
                            leptos_query::suppress_query_load(true);

                            let app = view! { <App /> };

                            leptos_query::suppress_query_load(false);

                            app
                        }
                    )
                    .app_data(web::Data::new(leptos_options.to_owned()))
                    .app_data(client)
            })
            .bind(&addr)?
            .run()
            .await

I also still have the panic when I try this:

HttpServer::new(move || {
                let leptos_options = &conf.leptos_options;
                let site_root = &leptos_options.site_root;
                let routes = &routes;


                let client = web::Data::new(Client::new());

                leptos_query::suppress_query_load(true);

                let app = App::new()
                    .route("/api/{tail:.*}", web::route()
                           .guard(guard::Any(guard::Get()).or(guard::Header("content-type", "application/json")))
                           .to(route_to_api))
                    .route("/serverfn/{tail:.*}", leptos_actix::handle_server_fns())
                    .wrap(cookie_middleware())
                    .service(Files::new("/pkg", format!("{site_root}/pkg")))
                    .service(Files::new("/assets", site_root))
                    .service(favicon)
                    .leptos_routes(
                        leptos_options.to_owned(),
                        routes.to_owned(),
                        App
                    )
                    .app_data(web::Data::new(leptos_options.to_owned()))
                    .app_data(client);

                leptos_query::suppress_query_load(false);

                app
            })
            .bind(&addr)?
            .run()
            .await

Any inkling as to how this is supposed to be handled?

[SleeplessOne1917]

@gbj I have partially solved the issue. It turns out I shouldn't put the Routes tag inside of a suspense. This makes the ActionForm work when WASM is enabled. However, when I disable WASM in my browser, I still have the same problem as before. Do I have to manually return a redirect or something?

Also, I'm still getting the message about the panic in main when I run cargo leptos watch.

[SleeplessOne1917]

I'm pretty sure I discovered a bug, so I opened an issue.