Effect CommunityEC
Effect Community•7mo ago
Dominik Vit

Feedback on Using Effect and Neverthrow in React Application

I wrote probably the most cursed code imaginable. How bad really is it an what could I do to improve this? I have a mindset, that I don't want to use effect in react directly - I don't need the Effect guarantees on the frontend. I want to have the backend as safe as possible and if it fails, be able to display and error and allow the user to recover. The app was written in neverthrow and I am porting it to effect. I am still thinking of keeping neverthrow on the react side for the error checking because it seems like it is less verbose than Exit / Either and is ok for my usecase. How bad is my take? 
// toNeverthrow
export const toNeverthrow = <
    TResult,
    TError extends { cause?: unknown; message: string },
    TContext,
>(
    effect: Effect.Effect<TResult, TError, TContext>
): Effect.Effect<
    Result<TResult, VoidhashInternalServerError>,
    never,
    TContext
> => {
    return Effect.map(effect, (e) =>
        ok<TResult, VoidhashInternalServerError>(e)
    ).pipe(
        Effect.catchAll((error: TError) => {
            return Effect.succeed(
                err({
                    code: "INTERNAL_SERVER_ERROR",
                    message: "Internal server error",
                    originalError: error.cause as Error,
                } satisfies VoidhashInternalServerError)
            );
        })
    );
};

// page.tsx
export default Page() {
const perksResult = await NextjsRuntime.runPromise(
        PerkService.pipe(
            Effect.flatMap((perkService) => perkService.getPerks(project.id))
        ).pipe(toNeverthrow)
    );

    if (perksResult.isErr()) {
        const error = projectResult._unsafeUnwrapErr();
        return <VoidhashErrorCard error={error} />;
    }
    const perks = perksResult.value;

    return (
        <div>
            ...
            </div>)
}
Was this page helpful?