T
tRPC

❓-help

Handle React error boundary

MMugetsu12/20/2022
Seems like Im doing something wrong as I can't handle the error boundary from trpc query. I've queryClient with useErrorboundary set to true and wrapped my component that uses trpc query with the React Error Boundary but it doesn't seem to be able to catch it. When I just throw before the query it successfully intercepts the error but from trpc seems its not doing that? Am I doing something wrong ??
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
staleTime: 5 * 1000, // seconds
useErrorBoundary: true,
retry: false,
},
},
queryCache: new QueryCache({
onError: (error) => {
// @ts-ignore
if (error?.data?.httpStatus === 401) window.reload()
},
}),
}),
)
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
staleTime: 5 * 1000, // seconds
useErrorBoundary: true,
retry: false,
},
},
queryCache: new QueryCache({
onError: (error) => {
// @ts-ignore
if (error?.data?.httpStatus === 401) window.reload()
},
}),
}),
)
const BranchForm: React.FunctionComponent<Props> = ({}: Props) => {
const [activeTab] = useContext(FormTabContext)
const options = {
enabled: activeTab === LOCATION_VIEW_TABS.branch,
staleTime: STALE_FOR_5_MIN,
}

throw new Error('test')
const { data: odGroups } = trpc.organizationHierarchy.odGroups.useQuery(
undefined,
options,
)
const { data: sdGroups } = trpc.organizationHierarchy.sdGroups.useQuery(
undefined,
options,
)
...
}

export default withTlsErrorBoundary(BranchForm)
const BranchForm: React.FunctionComponent<Props> = ({}: Props) => {
const [activeTab] = useContext(FormTabContext)
const options = {
enabled: activeTab === LOCATION_VIEW_TABS.branch,
staleTime: STALE_FOR_5_MIN,
}

throw new Error('test')
const { data: odGroups } = trpc.organizationHierarchy.odGroups.useQuery(
undefined,
options,
)
const { data: sdGroups } = trpc.organizationHierarchy.sdGroups.useQuery(
undefined,
options,
)
...
}

export default withTlsErrorBoundary(BranchForm)
throw new Error('test') is catched successfully and I see errrour boundary but when I remove it the trpc query then crashesh the app
const { data: odGroups, isError, error } = trpc.organizationHierarchy.odGroups.useQuery(
undefined,
options,
)

console.log(isError, error, error?.data)
const { data: odGroups, isError, error } = trpc.organizationHierarchy.odGroups.useQuery(
undefined,
options,
)

console.log(isError, error, error?.data)
I expected that it Will re-throw the TRPCClientError so boundary catches it??
MMugetsu12/20/2022
MMugetsu12/20/2022
I cant understand why its not able to catch the error? Is the TrpcClientError somehow swalloed or what? @alex / KATT might you lighten me a bit clearly something wrong im doing here
AKAlex / KATT 🐱12/20/2022
don't @ people

Looking for more? Join the community!

Recommended Posts
Any tips for Typescript slowness?We successfully migrated from 9.x to 10 but are still seeing slow VS Code perf (10+ seconds to get aChange status of useMutation from 'success' back to 'idle'Hiya, I have a mutation for creating stuff that can run a few different ways on a page, and I want tIs it possible to call one procedure in another?I have multiple routers in my trpc server. For example userRouter (e.g. procedure: getUser) and postHandling Query Errors at Root of App (v9)I want to show an error toast on my `NextJS` frontend every time there is an error from `useQuery` itRPC Client webpack errorAs soon as I add the client part to my legacy app i get an error and Can't figure out what is wrong.cookies, headers and authenticationin express I can do something like `res.cookie("name", "value")` for example. alternatively I can dtrpc hook pattern. This works, but I’m not convinced…I want to call my route when a button is clicked and have access to isLoading, onError etc… I have iCatch TRPCError, ZoddError on the front-endi am throwing a TRPCError in a mutation. i dont understand how to catch this error in the OnError meimplicitly has type 'any' because it does not have a type annotation and is referenced directlyRunning into this error. I feel like it's some sort of infinite recursion issue, but not sure where Why do some examples create PrismaClient in context, and others don’tIs there a specific reason to do this or not to do this? I can imagine with the new Prisma extension