TaggedTagged ctorPlain objectUnknownNodePromiseParallel
effect-errors
TaggedTagged ctorPlain objectUnknownNode
PromiseParallel

A showcase for errors reporting using Effect.

Using:

Custom remix loader

We will create a custom loader taking an effect as parameter and returning a promise containing data or an object containing the effect error details.
Effect loader
import type { LoaderFunctionArgs } from '@remix-run/server-runtime';
import { Effect, pipe } from 'effect';
import { collectErrorDetails } from './logic/collect-error-details';
import { remixThrow } from './logic/remix-throw';
export const effectLoader =
 <A, E>(effect: (args: LoaderFunctionArgs) => Effect.Effect<A, E>) =>
 async (args: LoaderFunctionArgs) =>
 await Effect.runPromise(
 pipe(
 effect(args),
 Effect.map((data) => ({ _tag: 'success' as const, data })),
 Effect.sandbox,
 Effect.catchAll(collectErrorDetails),
 ),
 ).then(remixThrow);
Capturing errors
If the effect fails, we retrieve errors data and related code.
  • In dev mode, effect-errors will use sourcemaps to extract code excerpts related to the error.
  • In production however, we must fetch the map file (uploaded in our example on cloudflare R2), and read it to extract sources.
Collect error details
export const collectErrorDetails = <E>(cause: Cause<E>) =>
 pipe(
 Effect.gen(function* () {
 // Serverside logging
 const errorsText = prettyPrint(cause, { stripCwd: false });
 console.error(errorsText);
 const { errors } = yield* captureErrors(cause);
 if (errors.every((e) => e.location !== undefined)) {
 // Fetch map file and resolve sourcemaps ...
 const errorsWithSources = yield* getErrorSourcesFromMapFile(errors);
 return yield* Effect.succeed({
 _tag: 'effect-post-mapped-errors' as const,
 errors: errorsWithSources,
 });
 }
 // in Dev mode, sources are resolved by effect-errors
 return yield* Effect.succeed({
 _tag: 'effect-natively-mapped-errors' as const,
 errors,
 });
 }),
 Effect.scoped,
 Effect.provide(FetchHttpClient.layer),
 Effect.withSpan('collect-error-details'),
 );
Throwing if there is an error
We need to pipe on the promise because remix expects us to throw a `json` function result from the loader for errors:
Remix throw
import { json } from '@remix-run/server-runtime';
import { match } from 'ts-pattern';
export interface EffectLoaderSuccess<A> {
 _tag: 'success';
 data: A;
}
export type EffectPostMappedErrors = {
 _tag: 'effect-post-mapped-errors';
 errors: EffectErrorWithSources[];
};
export type EffectNativelyMappedErrors = {
 _tag: 'effect-natively-mapped-errors';
 errors: ErrorData[];
};
export type EffectLoaderError =
 | EffectPostMappedErrors
 | EffectNativelyMappedErrors;
type RemixThrowInput<A> = EffectLoaderSuccess<A> | EffectLoaderError;
const effectHasSucceeded = <A>(
 p: RemixThrowInput<A>,
): p is EffectLoaderSuccess<A> => p._tag === 'success';
export const remixThrow = <A>(input: RemixThrowInput<A>) =>
 Match.value(input).pipe(
 Match.when(effectHasSucceeded, ({ data }) => data),
 Match.orElse((data) => {
 throw json(data, { status: 500 });
 }),
 );
Using our loader
We can then use our loader inside a route:
Route loader
export const loader = effectLoader(({ request }) =>
 pipe(
 Effect.gen(function* () {
 // My effect code ...
 }),
 Effect.withSpan('my-route-loader', {
 attributes: {
 url: request.url,
 method: request.method,
 body: request.body,
 },
 })
 ),
);
Displaying effect error details
Finally, we can use an error boundary to display effect errors details. Let's start by creating a hook to transform error data:
useErrorsDetails hook
import {
 isRouteErrorResponse,
 useLocation,
 useRouteError,
} from '@remix-run/react';
import type {
 EffectNativelyMappedErrors,
 EffectPostMappedErrors,
} from '@server/loader/types/effect-loader.types';
import { isUnknownAnEffectError } from './logic/is-uknown-an-effect-error.logic';
import { mapEffectErrorTypes } from './logic/map-effect-error-types';
export type EffectPostMappedErrorsWithPath = EffectPostMappedErrors & {
 path: string;
};
export type EffectNativelyMappedErrorsWithPath = EffectNativelyMappedErrors & {
 path: string;
};
export type ErrorsDetails =
 | {
 _tag: 'route' | 'error' | 'unknown';
 path: string;
 errors: {
 message: string;
 }[];
 }
 | EffectPostMappedErrorsWithPath
 | EffectNativelyMappedErrorsWithPath;
export const useErrorDetails = (): ErrorsDetails => {
 const { pathname } = useLocation();
 const error = useRouteError();
 if (isUnknownAnEffectError(error)) {
 return mapEffectErrorTypes(error, pathname);
 }
 const isRoute = isRouteErrorResponse(error);
 if (isRoute) {
 return {
 _tag: 'route' as const,
 path: pathname,
 errors: [
 {
 message: error.statusText,
 },
 ],
 };
 }
 if (error instanceof Error) {
 return {
 _tag: 'error' as const,
 path: pathname,
 errors: [error],
 };
 }
 return {
 _tag: 'unknown' as const,
 path: pathname,
 errors: [{ message: 'Unknown Error' }],
 };
};
We can then use it to display our errors!
Remix error boundary
import { AppErrors } from './children/app-errors';
import { Summary } from './children/summary';
import { errorBoundaryStyles } from './error-boundary.styles';
import { useErrorDetails } from './hooks/use-error-details';
export const ErrorBoundary = () => {
 const css = errorBoundaryStyles();
 const data = useErrorDetails();
 return (
 <div className={css.root}>
 <Summary {...data} />
 <AppErrors {...data} />
 </div>
 );
};