Observer is null in _timeoutStartSubscriptionAck

[elledienne]

Do you want to request a feature or report a bug?
I want to report a bug

What is the current behavior?
I can't say if this is a bug that happens only in development mode (react native) or also in production, but when the app reloads after changes have been made to the js code I get an error TypeError: Cannot read property 'error' of null.

Looking at the stack trace I could find the origin of the error in the method AppSyncRealTimeSubscriptionHandshakeLink._timeoutStartSubscriptionAck

private _timeoutStartSubscriptionAck(subscriptionId) {
    const { observer, query, variables } = this.subscriptionObserverMap.get(
      subscriptionId
    );
    this.subscriptionObserverMap.set(subscriptionId, {
      observer,
      query,
      variables,
      subscriptionState: SUBSCRIPTION_STATUS.FAILED
    });

    observer.error({
      errors: [
        {
          ...new GraphQLError(
            `Subscription timeout ${JSON.stringify({ query, variables })}`
          )
        }
      ]
    });
    // Cleanup will be automatically executed
    observer.complete();
    logger("timeoutStartSubscription", JSON.stringify({ query, variables }));
  }

I believe the reason is that observer is null in some situations (can't say when).

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Use createSubscriptionHandshakeLink to link subs to ApolloClient
• Set up a subscription using useSubscription
• Use react native fast refresh feature
• See the error

What is the expected behavior?

• There should be no error :)

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions?

• React native 0.61
• aws-appsync-subscription-link 2.0.1

[farshi]

I am getting the same error when calling API.graphql in Vue application
I am using @auth in my model and this is the generated code for my subscription:

subscription OnCreateCheckItemKeywords($createdBy: String) {
    onCreateCheckItemKeywords(createdBy: $createdBy) {
      id
      checkItemId
      keywordName
      createdBy
      checkItem {
        id
        content
        type
        createdBy
        createdAt
        applicableTo
        controls {
          nextToken
        }
        keywords {
          nextToken
        }
      }
      keyword {
        name
        createdAt
        createdBy
      }
    }
  }

This is the method in my vue app :

subscribe () {
        const subscription = API.graphql(graphqlOperation(onCreateCheckItem, this.$store.state.auth.user.username))
        subscription.subscribe({
          next: (eventData) => {
            console.log(eventData)
            const checkItem = eventData.value.data.onCreateCheckItem
            console.log(checkItem)
          },
          error: err => {
            console.log('error in onCreateCheckItem subscribe', err)
          },
        })
      },

Uncaught TypeError: Cannot read property 'error' of null
    at AWSAppSyncRealTimeProvider.push../node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js.AWSAppSyncRealTimeProvider._handleIncomingSubscriptionMessage (AWSAppSyncRealTimeProvider.js:499)

[DEBUG] 51:36.668 AWSAppSyncRealTimeProvider - subscription message from AWS AppSync RealTime: {"type":"error","payload":{"errors":[{"errorType":"UnsupportedOperation","message":"unknown not supported through the realtime channel"}]}}

    "@aws-amplify/pubsub": "^3.0.13",
    "@aws-amplify/ui-vue": "^0.2.6",
    "aws-amplify": "^3.0.13",
    "aws-amplify-vue": "^2.1.1",

[KvNGCzA]

These PR1 & PR2 have been opened with related fixes.

[emmafass]

@elorzafe @KvNGCzA I'm getting this error as well. I'm working on a Amplify React application that uses DataStore. I only began getting this error when I enabled DataStore for the API.