Effect CommunityEC
Effect Community•6mo ago
bebenzer

Handling errors from an effect in a React Router loader function can be a bit tricky, especially ...

with react-router 7 (remix), what should be the way to handle error from an effect?
export async function loader() {
    const res = await RuntimeServer.runPromise(
          FooService.getFoo // Effect<number, FooError | BarError>
                            // getFoo returns an error randomly
    );

    return res; // number
}

export default function Home() {
    const res = useLoaderData<typeof loader>(); // number

    return (
        <div>
            hello world <pre>{res + 42}</pre>
        </div>
    );
}

I struggle to see a nice pattern here, I tried to play with runPromiseExit and use Exit.match in the component but the type of res is not an Exit anymore but rather a encoded one, so Exit.match wont be satisfied type wise

https://effect.website/play/#497422950387 to simulate react router loader and stuff
Was this page helpful?