Mugetsu•2y ago

Handle React error boundary

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

4 Replies

Mugetsu•2y ago

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??

Mugetsu•2y ago

Mugetsu•2y ago

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

Alex / KATT 🐱•2y ago

don't @ people