Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 275x 270x 270x 270x 23x 270x 49913x 65824x 65824x 65132x 22x 22x 332x 2629x 65824x | import React from "react";
import {
QueryErrorResetBoundary,
useQueryErrorResetBoundary,
} from "@tanstack/react-query";
import type {
ErrorComponentProps,
ErrorRouteComponent,
} from "@tanstack/react-router";
import { CatchBoundary } from "@tanstack/react-router";
import { useTranslation } from "react-i18next";
import { ErrorMessage } from "~app/components/error-message";
import { LinksContext } from "~app/contexts/links-context";
export const ErrorComponent: ErrorRouteComponent = ({
error,
info,
reset: resetBoundary,
}) => {
const { t } = useTranslation("default");
const { reset: resetQuery } = useQueryErrorResetBoundary();
React.useEffect(() => {
resetQuery();
}, [resetQuery]);
return (
<ErrorMessage
message={error.message}
stack={info?.componentStack}
button={{
text: t("components.errorMessage.refetch"),
onPress: resetBoundary,
}}
/>
);
};
const SuspenseWrapper: React.FC<
React.PropsWithChildren<{
fallback: React.ReactNode;
errorComponent?: (props: ErrorComponentProps) => React.ReactNode;
}>
> = ({ children, fallback, errorComponent }) => {
const { captureError } = React.use(LinksContext);
return (
<React.Suspense fallback={fallback}>
<QueryErrorResetBoundary>
<CatchBoundary
getResetKey={() => "static"}
onCatch={(error) => {
captureError(error);
// oxlint-disable-next-line no-console
console.error(error);
}}
errorComponent={errorComponent || ErrorComponent}
>
{children}
</CatchBoundary>
</QueryErrorResetBoundary>
</React.Suspense>
);
};
export const suspendedFallback =
<P extends object = Record<string, never>>(
Component: React.ComponentType<P>,
Fallback: React.ReactNode | React.FC<P>,
errorComponent?: (props: ErrorComponentProps) => React.ReactNode,
): React.FC<P> =>
(props) => (
<SuspenseWrapper
fallback={
typeof Fallback === "function" ? <Fallback {...props} /> : Fallback
}
errorComponent={errorComponent}
>
<Component {...props} />
</SuspenseWrapper>
);
|