What is the usage of catchError()? How different is it compare to try catch?

[PTPhongKMF]

https://docs.solidjs.com/reference/reactive-utilities/catch-error

the docs provide minimal info, to me it seem to work just like a try catch block? have anyone used it?

[marvin-j97]

One obvious usage is ErrorBoundary:

solid/packages/solid/src/render/flow.ts

Lines 273 to 297 in 3d3207d

	export function ErrorBoundary(props: {
	fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
	children: JSX.Element;
	}): JSX.Element {
	let err;
	if (sharedConfig!.context && sharedConfig!.load)
	err = sharedConfig.load(sharedConfig.getContextId());
	const [errored, setErrored] = createSignal<any>(err, IS_DEV ? { name: "errored" } : undefined);
	Errors || (Errors = new Set());
	Errors.add(setErrored);
	onCleanup(() => Errors.delete(setErrored));
	return createMemo(
	() => {
	let e: any;
	if ((e = errored())) {
	const f = props.fallback;
	if (IS_DEV && (typeof f !== "function" || f.length == 0)) console.error(e);
	return typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored())) : f;
	}
	return catchError(() => props.children, setErrored);
	},
	undefined,
	IS_DEV ? { name: "value" } : undefined
	) as unknown as JSX.Element;
	}

And you can see it is indeed just a try-catch wrapper that calls an onError callback:

solid/packages/solid/src/reactive/signal.ts

Lines 1024 to 1036 in 3d3207d

	export function catchError<T>(fn: () => T, handler: (err: Error) => void) {
	ERROR || (ERROR = Symbol("error"));
	Owner = createComputation(undefined!, undefined, true);
	Owner.context = { ...Owner.context, [ERROR]: [handler] };
	if (Transition && Transition.running) Transition.sources.add(Owner as Memo<any>);
	try {
	return fn();
	} catch (err) {
	handleError(err);
	} finally {
	Owner = Owner.owner;
	}
	}