Giter VIP home page Giter VIP logo

Comments (7)

haslersn avatar haslersn commented on September 27, 2024

@gbj when trying to reproduce this in #2321 (comment), did you disable JS?
Edit: obviously you did. Otherwise you wouldn't have the query in the address bar.

from leptos.

gbj avatar gbj commented on September 27, 2024
Screen.Recording.2024-02-17.at.9.35.53.AM.mov

from leptos.

gbj avatar gbj commented on September 27, 2024

Oh, I see. Your example doesn't use the <Router>.

The coordination between the error value stored in the route and the error value stored in the server action is handled by the router. I had the example wrapped in a <Router> because I was pasting it into one of my usual templates.

from leptos.

haslersn avatar haslersn commented on September 27, 2024

Indeed, in my small example, it didn't work because the Router is missing. But my actual application uses a Router.

It seems it also doesn't work when using a custom error type (Here: String):

use leptos::*;
use leptos_meta::*;
use leptos_router::*;

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Router>
            <Routes>
                <Route path="" view=Component/>
            </Routes>
        </Router>
    }
}

#[component]
pub fn Component() -> impl IntoView {
    let action = create_server_action::<Identity>();
    let value = action.value();
    view! {
        <ActionForm action>
            <input type="text" name="x"/>
            <button type="submit">Submit</button>
        </ActionForm>
        {move || format!("{:?}", value.get())}
    }
}

#[server(Identity)]
async fn identity(x: String) -> Result<String, ServerFnError<String>> {
    Err(ServerFnError::from(x))
}

from leptos.

gbj avatar gbj commented on September 27, 2024

Indeed, in my small example, it didn't work because the Router is missing. But my actual application uses a Router.

It seems it also doesn't work when using a custom error type (Here: String):

Could you clarify: is your actual application using a custom error type, or does "also" here mean this is an additional bug?

from leptos.

gbj avatar gbj commented on September 27, 2024

This error handling setup is not currently implemented for custom error types.

When a server action is created, it looks for ServerFnUrlError in context

let action_error = use_context::<Rc<ServerFnUrlError<I::Error>>>()
.and_then(|err| {
if err.path() == url {
Some(err.error().clone())
} else {
None
}
});

It does not look directly at the URL, because the leptos_server crate this is defined in isn't aware of things like URLs and routing — it does not even have a dependency on web-sys or wasm-bindgen, and is agnostic of whether it's in a browser environment or not. (Server functions can be used outside the browser.)

The ServerFnUrlError is only provided for errors of type ServerFnError, because when the router is checking for errors there's no way of telling it which custom error type that might be that's appeared in the URL:

// provide ServerFnUrlError if it exists
let location = use_location();
if let (Some(path), Some(err)) = location
.query
.with_untracked(|q| (q.get("__path").cloned(), q.get("__err").cloned()))
{
let err: ServerFnError = ServerFnErrorSerde::de(&err);
provide_context(Rc::new(ServerFnUrlError::new(path, err)))
}

I guess the alternative here would be to have the router just provide the __path and __err fields directly via context, and let every server action on the page try to decode them to its proper type, if it matches the path. That is probably a better implementation, in fact.

These two features (custom error types and no-JS ActionForm error handling) were introduced separately in 0.6 so the combination just fell through the cracks.

from leptos.

haslersn avatar haslersn commented on September 27, 2024

is your actual application using a custom error type, or does "also" here mean this is an additional bug?

My application uses a custom error type.

from leptos.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.