Vue-apollo: Uncaught (in promise) undefined

[JulianWels]

Hi there!

I'm authenticating requests via cookies. If a user is not logged in, the server responds with this error message:

Now, of course I want to catch this error in my Vue-Component:

methods: {
    tryNow() {
      this.$apollo.addSmartQuery('user', {
        query: gql `
          {
              me {
                  username
              }
          }`,
        error(e) {
          console.log(e.message)
          return true;
        },
      })
    }
  }
}

But for some reason this error always shows up in my console, saying that there is an uncatched Promise:

I already had a look around here at related issues, especially #519 and #265. Sadly, I can't really pinpoint where this error even comes from, because Chrome and Firefox show me completely different stacktraces, not even pointing to the error. At least Chrome said the error is from somewhere inside vue-apollo.esm.js, so here I am now.

I created the project with the Vue-Cli and didn't change much of the original config, so I'm thinking this might be a bug?

[seandearnaley]

I'm also seeing this issue, don't quite understand what is causing it

[seandearnaley]

[seandearnaley]

note: only seems to happen when using the apollo object in the component options:

This code throws the 'uncaught (in promise) undefined' error as the query is hitting a private query:

  apollo: {
    userCurrent: {
      query: USER_CURRENT,
    },
  },

where as the non smart query version does not - this throws just once as expected and not with the uncaught promise undefined error:

  created() {
    this.$apollo
      .query({
        query: USER_CURRENT,
      })
      .then(result => {
        console.log('result=', result);
      });
  },

[georgyfarniev]

I'm having similar problem. Uncaught promise rejection or exception can be handled in vue global errorHandler, if error was thrown from lifecycle hook, but there's no way to create global handler for vue-apollo smart query. This is a little bit frustrating and adding some headache while handling errors.

One of solutions is simply not to use smart queries, but would be great to have some global hook for vue-apollo.

[Akryum]

@georgyfarniev https://vue-apollo.netlify.com/api/apollo-provider.html#constructor

[seandearnaley]

@Akryum I believe we're using the appropriate constructor, it seems any error thrown in the global error handler for errorHandler of the VueApollo will result in this uncaught promise, regardless of whether the error is captured or not.

[seandearnaley]

@Akryum for example, here is my constructor, all the unauthorized error gets caught and handled appropriately, but I always get this extra uncaught promise error- the error handler kicks in but it always results in a 2nd error and I can't escape it:

  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        fetchPolicy: 'cache-and-network',
      },
    },
    errorHandler(error) {
      if (isUnauthorizedError(error)) {
        if (router.currentRoute.name !== 'login') {
          router.replace({
            name: 'login',
            params: {
              wantedRoute: router.currentRoute.fullPath,
            },
          });
        }
      } else {
        console.log(
          '%cError',
          'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;',
          error.message,
        );
      }
    },
  });

[JulianWels]

So I had a look at the code, and this promise seems to cause the error:

https://github.com/Akryum/vue-apollo/blob/131a8821d64f29ee100621e0f457f32c052ce6c3/src/smart-query.js#L27-L30

When my auth-error occurs, firstRunReject() first gets called in Line 175, where _firstRunReject is set to null, then firstRunReject() is called a second time in Line 140, which causes the eventual promise rejection.

https://github.com/Akryum/vue-apollo/blob/131a8821d64f29ee100621e0f457f32c052ce6c3/src/smart-query.js#L292-L297

For testing purposes I just replaced resolve and reject with () => {}, which fixed the error while the rest still worked fine.

I'm still not quite sure where this rejection error is coming from, but I also don't know what this promise is supposed to do in the first place. Git-blame suggests it's SSR related (d88e6ace17dba94f84b3111d41894da5e19a240e by @Akryum).

[georgyfarniev]

Any updates on this?

[firstaml-dima]

Possibly a similar problem here.

In the error() hook, not only is the e error object just a string, also the this context is undefined.

[seandearnaley]

still seeing it in 3.0.0-beta.29, but still unclear with no insights, I'm working around my problems by skipping the offending queries until the loading conditions are valid but under normal circumstances I wouldn't expect that extra undefined error.

[nether-cat]

I think I got exactly the same trouble that the others have described.

Any of my error handlers would work fine, but additionally that weird Uncaught in (promise) undefined keeps throwing and I tried stepping through the code for a while: I didn't get a deeper understanding either though, but I can also observe what @JulianWels has described.

However, I managed to get half-way out of this trouble, but instead discovered another disappointment. When I'm putting the errorPolicy: 'all' right in my specific query's options (not one of the defaults, which would also impact other queries). The error doesn't occur anymore, but against my expectations I also don't see my error within my query's optional result(...args) callback either...

[seandearnaley]

ya still no joy, curious if there is any official position on this issue

[bswank]

+1 This is a big issue in my Nuxt application. I'm trying to appropriately handle errors, but I can't chain a .catch() onto the $apollo.addSmartQuery and any "caught" error in the error (error) {} is "uncaught." Please advise @Akryum.

Here's what I receive when I try to chain a .catch() on to the $apollo.addSmartQuery:

this.$apollo.addSmartQuery(...).then is not a function

[bswank]

@firstaml-dima

Your first issue may be able to be solved by deconstructing the error: error ({ error }) { console.log(error) }.

Your second issue may be related to the scoping of the method. Try: error: ({ error }) => { console.log(this) }. That may preserve your context.

[nether-cat]

Thanks a lot @Akryum ✌️

[seandearnaley]

thanks much @Akryum

[georgyfarniev]

Thanks a lot for fixing it, @Akryum !