Handle React error boundary

Question

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 BranchForm: React.FunctionComponent = ({}: Props) = {
  const [activeTab] = useContext(FormTabContext)
  const options = {
    enabled: activeTab === LOCATIONVIEWTABS.branch,
    staleTime: STALEFOR5_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

Handle React error boundary

Looking for more? Join the community!