absent-sapphire

Unexpected behaviour with default option throwOnError: true

Hi, First of all, thanks for the Angular adapter of tanstack query. Working with it is a delight so far 😎. I do have a small issue that I can't explain or find a fix for. I'm experiencing weird behaviour when using the throwOnError: true setting as the default in the QueryClient options. A reproduction scenario can be found here: https://github.com/JoepKockelkorn/tanstack-angular-throw-on-error-bug. Functionally I'd like to handle all query errors centralised by the Angular Error handler and, if necessary, handle custom errors per page. When navigating the first time to the page no alert is shown, but only when switching tabs the global error handler from Angular is triggered. Why does my approach not work? Is there a setting I missed? Kind regards, Joep Kockelkorn

11 Replies

absent-sapphireOP•6mo ago

While debugging, this line is successfully hit, but the ErrorHandler from Angular is not called somehow. I suspect due to ngZone.runOutsideAngular that change detection does not run and therefore the ErrorHandler is not called.

automatic-azure•6mo ago

Just tested this and removing runOutsideAngular does indeed trigger the error handler. However, it is there for a reason, namely that the timer started for cache garbage collection would result in Angular not reaching stability. Can you create an issue for this? Thanks!

absent-sapphireOP•6mo ago

I will, thanks for checking!

automatic-azure•6mo ago

Not sure if it's fixable though: https://angular.dev/api/core/NgZone#run

If a synchronous error happens it will be rethrown and not reported via onError.

Angular

The web development framework for building modern apps.

automatic-azure•6mo ago

Maybe it should be manually emitted through onError, I'll ask the Angular team if that's the right thing to do

absent-sapphireOP•6mo ago

I can confirm this works:

const unsubscribe = ngZone.runOutsideAngular(() => observer.subscribe(notifyManager.batchCalls((state) => {
  ngZone.run(() => {
    try {
      if (state.isError && !state.isFetching && // !isRestoring() && // todo: enable when client persistence is implemented
      shouldThrowError(observer.options.throwOnError, [state.error, observer.getCurrentQuery()])) {
        throw state.error;
      }
      resultFromSubscriberSignal.set(state);
    } catch (error) {
      ngZone.onError.emit(error);
    }
  });
})));

const unsubscribe = ngZone.runOutsideAngular(() => observer.subscribe(notifyManager.batchCalls((state) => {
  ngZone.run(() => {
    try {
      if (state.isError && !state.isFetching && // !isRestoring() && // todo: enable when client persistence is implemented
      shouldThrowError(observer.options.throwOnError, [state.error, observer.getCurrentQuery()])) {
        throw state.error;
      }
      resultFromSubscriberSignal.set(state);
    } catch (error) {
      ngZone.onError.emit(error);
    }
  });
})));

automatic-azure•6mo ago

Cool! Yeah that's probably the right solution

absent-sapphireOP•6mo ago

I'll create an issue later today, going into meetings now.

automatic-azure•6mo ago

I have a lot of those as well 🤣

absent-sapphireOP•6mo ago

https://tenor.com/view/meetings-meeting-gif-26286882

Tenor

absent-sapphireOP•6mo ago

Here you go: https://github.com/TanStack/query/issues/8839

GitHub

Angular: caught errors in the queryFn do not run in the zone · Issu...

Describe the bug I'm experiencing weird behaviour when using the throwOnError: true setting as the default in the QueryClient options. When an error occurs that is not handled via the template ...

Gaming

Programming

Unexpected behaviour with default option throwOnError: true

Did you find this page helpful?