Effect CommunityEC
Effect Community•2y ago
BinaryArtifex

Trouble Passing Fetch Response in Effect Runtime

I can't pass a fetch Response class through effect runtime...

export async function loader(request: LoaderFunctionArgs) {
  const site = Effect.gen(function* ($) {
    const api = yield* $(SiteService);
    return yield* $(
      api.getById({ id: Number(request.params.id), lastEnergy: true, weather: true }),
      Effect.catchTags({
        HttpNotFoundError: (err) =>
          Effect.fail(new Response(err.message, { status: err.statusCode })),
      }),
    );
  }).pipe(AppRuntime.runPromise);

  return defer({ site });


ive tried every which way to pass the Response through such that react-router can better parse the thrown return type. When logged in my error boundary the result comes up as Error: {}. however when i remove the response and pass the object directly it console logs as Error: {"message":"The requested resource could not be found. Contact us if you need assistance onboarding a new resource.","statusCode":404}. Thats also annoying because react router is stringifying my object into a string and prefixing it with Error: ...

import { useEffect } from "react";
import { isRouteErrorResponse, useRouteError } from "react-router-dom";

export function NotFound() {
  const error = useRouteError();

  useEffect(() => {
    if (error) {
      console.log(isRouteErrorResponse(error));
      console.log(error);
    }
  }, [error]);

  return <div>NotFound</div>;
}

export default NotFound;
Was this page helpful?