Global error handling

[ianschmitz]

Hey all!

I've been evaluating urql as a replacement for react-query recently, and one of the patterns i was curious about was global error handling.

So for example i could do this in Urql:

const [result] = useSomeQuery();

if (result.error) {
 // do some error handling
}

But i have to potentially handle this anywhere i make a query. In react-query, it integrated nice with error boundaries, and i could instead do (ref https://tkdodo.eu/blog/react-query-error-handling#error-boundaries):

// In component
const todos = useQuery(['todos'], fetchTodos, { useErrorBoundary: true }) // or set it default for all queries in the query client

// Somewhere higher up component tree
import {ErrorBoundary} from 'react-error-boundary'


function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

// ...

function SomeComponent() {
  return <ErrorBoundary FallbackComponent={ErrorFallback}>...</ErrorBoundary>
}

This was pretty nice as i could attach error tracing tool integrations (such as Sentry) in at the ErrorBoundary to catch all errors in the application, including GraphQL errors from react-query.

Are there any similar global error handling hooks or anything within Urql that i can tap into?

[JoviDeCroock]

You can use something like the errorExchange the power of urql is found in its extensability layer. The integration parts like React, vue, ... is quite generic and then we have exchanges which allow you to tweak the lifetime of requests.

An alternative for an integration would be to wrap the useQuery from urql in your own version that throws

[ianschmitz]

Awesome thanks for pointing me to the error exchange. I'll try out your suggestions and post back here if i come up with a decent pattern. Cheers!

[ceefour]

Did you find a good pattern?

I have been trying to find a way to "reset" urql's error boundary when the user wants to try again.

[musjj]

@ianschmitz
Curious about this too. Did you find a good solution?

[onionhammer]

Hmm, not clear how an errorExchange could bubble the error up to the boundary. Is there an example?

Throwing the error from the errorExchange (when useContext is using suspense), bubbles it up to the suspense fallback, which is interesting...

[tocoteron]

I'm in the same boat. Does anyone know this?

[velidan]

The same. Does anyone have some examples?

[Lornz-]

Same here. Does anyone found out an example?