Amplify-js: API.graphql().subscribe() throws "[object object]" error message at Expo

Created on 4 Jan 2020  路  12Comments  路  Source: aws-amplify/amplify-js

釀夅叧釀忈叧釀呩叺釂剦釁ａ喓 2020-01-04 釀嬦叐釀掅叜 11 16 23

I tried to follow the Nader Dabit's great workshop repository
It has been working until Performing Mutations section
When I tried to follow GraphQL Subscriptions section, expo throws error.
But I cannot figure out what exact error message is. throws just [object object].
So I wanted to see detailed error message, I put console.log in some system js files displaying on expo's error screen.

To Reproduce
Try to follow the Nader Dabit's workshop repository
Especially try to follow GraphQL Subscriptions section

Expected behavior
error throws [object object]


Environment

  System:
    OS: macOS 10.15.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 265.41 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 79.0.3945.88
    Firefox: 69.0.1
    Safari: 13.0.3
  npmGlobalPackages:
    @aws-amplify/cli: 4.11.0
    babel-cli: 6.26.0
    babel-loader: 8.0.4
    babel-preset-es2015: 6.24.1
    browserify: 16.5.0
    bundler: 0.8.0
    create-react-app: 3.3.0
    dooboo-cli: 1.9.1
    eslint: 5.8.0
    expo-cli: 3.11.3
    expo: 34.0.3
    express-generator: 4.16.1
    forever: 0.15.3
    gatsby-cli: 2.7.44
    git-lab-cli: 2.0.0
    git-mob: 0.6.0
    grunt-cli: 1.3.2
    jsdoc: 3.5.5
    live-server: 1.2.0
    npm: 6.2.0
    pm2: 4.2.1
    prisma: 1.34.1
    react-devtools: 3.2.3
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7
    react-static: 5.9.12
    serverless-offline: 3.31.3
    serverless: 1.58.0
    typescript: 3.7.2
    workbox-cli: 3.6.3

Smartphone (please complete the following information):
Device: iPhone 11 Simulator
OS: iOS 13.3

Sample code

import { API, graphqlOperation } from 'aws-amplify';
import { onCreateRestaurant } from './src/graphql/subscriptions';
import React, { useEffect, useState } from 'react';

...

const [restaurants, setRestaurants] = useState([]);
useEffect(() => {
    let subscription = API.graphql(
      graphqlOperation(onCreateRestaurant),
    ).subscribe({
      next: eventData => {
        console.log('eventData:', eventData);
        const restaurant = eventData.value.data.onCreateRestaurant;
        console.log('CLIENTID:', CLIENTID, '/restaurant:', restaurant);
        if (CLIENTID === restaurant.clientId) return;
        const restaurants = [...restaurants, restaurant];
        setRestaurants(restaurants);
      },
    });
    return () => {
      if (subscription) {
        subscription.unsubscribe();
      }
    };
  }, []);

Logs

setting window.LOG_LEVEL = 'DEBUG'

Running application on iPhone 11.
  onCreateRestaurant {
    id
    clientId
    name
    description
    city
  }
}
", "region": "ap-northeast-2", "variables": {}}
[DEBUG] 35:18.135 PubSub - subscribe options Object {
  "apiKey": "blahblah",
  "appSyncGraphqlEndpoint": "https://bahblah.appsync-api.ap-northeast-2.amazonaws.com/graphql",
  "authenticationType": "API_KEY",
  "graphql_headers": [Function anonymous],
  "provider": Symbol(INTERNAL_AWS_APPSYNC_REALTIME_PUBSUB_PROVIDER),
  "query": "subscription OnCreateRestaurant {
  onCreateRestaurant {
    id
    clientId
    name
    description
    city
  }
}
",
  "region": "ap-northeast-2",
  "variables": Object {},
}
[DEBUG] 35:18.154 RestClient - POST https://blahblah.appsync-api.ap-northeast-2.amazonaws.com/graphql
[DEBUG] 35:18.169 AWSAppSyncRealTimeProvider Object {
  "err": [ReferenceError: Can't find variable: Buffer],
}
[DEBUG] 35:18.182 AWSAppSyncRealTimeProvider - closing WebSocket...

node_modules/@babel/runtime/helpers/construct.js

  • I tried to input console.log inside of _construct function

    • between L28 and L29

    • console.log('arguments', arguments)

arguments Arguments [
  [Function Error],
  Arguments [
    Object {
      "error": Object {
        "errors": Array [
          Object {
            "message": "Connection failed: Can't find variable: Buffer",
          },
        ],
      },
      "provider": AWSAppSyncRealTimeProvider {
        "_config": Object {
          "aws_appsync_apiKey": "bahblah",
          "aws_appsync_authenticationType": "API_KEY",
          "aws_appsync_graphqlEndpoint": "https://blahblah.appsync-api.ap-northeast-2.amazonaws.com/graphql",
          "aws_appsync_region": "ap-northeast-2",
          "aws_project_region": "ap-northeast-2",
        },
        "awsRealTimeSocket": null,
        "keepAliveTimeout": 300000,
        "promiseArray": Array [],
        "socketStatus": 0,
        "subscriptionObserverMap": Map {},
      },
    },
  ],
  [Function SyntheticError],
]

node_modules/react-native/Libraries/Core/ExceptionsManager.js

  • I tried to input console.log

    • between L66 and L67

    • console.log('[debug] message', message)

[debug] message [object Object]
  • I tried to input console.log

    • between L73 and L74

    • console.log('[debug] prettyStack', prettyStack)

[debug] prettyStack Array [
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": null,
    "file": "[native code]",
    "lineNumber": null,
    "methodName": "construct",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 26,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/@babel/runtime/helpers/construct.js",
    "lineNumber": 30,
    "methodName": "_construct",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 23,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/@babel/runtime/helpers/wrapNativeSuper.js",
    "lineNumber": 26,
    "methodName": "Wrapper",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 111,
    "file": "http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false",
    "lineNumber": 28829,
    "methodName": "SyntheticError",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 31,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/Core/ExceptionsManager.js",
    "lineNumber": 113,
    "methodName": "handleException",
  },
Object {
    "arguments": Array [],
    "collapse": false,
    "column": 40,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/Core/setUpErrorHandling.js",
    "lineNumber": 23,
    "methodName": "handleError",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 32,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/expo-error-recovery/build/ErrorRecovery.fx.js",
    "lineNumber": 8,
    "methodName": "ErrorUtils.setGlobalHandler$argument_0",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 44,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/regenerator-runtime/runtime.js",
    "lineNumber": 45,
    "methodName": "tryCatch",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 30,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/regenerator-runtime/runtime.js",
    "lineNumber": 271,
    "methodName": "invoke",
  },
Object {
    "arguments": Array [],
    "collapse": false,
    "column": 44,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/regenerator-runtime/runtime.js",
    "lineNumber": 45,
    "methodName": "tryCatch",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 28,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/regenerator-runtime/runtime.js",
    "lineNumber": 135,
    "methodName": "invoke",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 19,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/regenerator-runtime/runtime.js",
    "lineNumber": 145,
    "methodName": "Promise.resolve.then$argument_0",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 14,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/promise/setimmediate/core.js",
    "lineNumber": 37,
    "methodName": "tryCallOne",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 25,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/promise/setimmediate/core.js",
    "lineNumber": 123,
    "methodName": "setImmediate$argument_0",
  },
Object {
    "arguments": Array [],
    "collapse": false,
    "column": 14,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/Core/Timers/JSTimers.js",
    "lineNumber": 146,
    "methodName": "_callTimer",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 17,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/Core/Timers/JSTimers.js",
    "lineNumber": 194,
    "methodName": "_callImmediatesPass",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": 30,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/Core/Timers/JSTimers.js",
    "lineNumber": 458,
    "methodName": "callImmediates",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": null,
    "file": "[native code]",
    "lineNumber": null,
    "methodName": "callImmediates",
  },
  Object {
    "arguments": Array [],
    "collapse": true,
    "column": 6,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js",
    "lineNumber": 407,
    "methodName": "__callImmediates",
  },
Object {
    "arguments": Array [],
    "collapse": true,
    "column": 6,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js",
    "lineNumber": 143,
    "methodName": "__guard$argument_0",
  },
  Object {
    "arguments": Array [],
    "collapse": true,
    "column": 10,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js",
    "lineNumber": 384,
    "methodName": "__guard",
  },
  Object {
    "arguments": Array [],
    "collapse": true,
    "column": 17,
    "file": "/Users/geoseong/Documents/Meetup/AWS/AWSKRUG/communityday/RNAppSync/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js",
    "lineNumber": 142,
    "methodName": "__guard$argument_0",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": null,
    "file": "[native code]",
    "lineNumber": null,
    "methodName": "flushedQueue",
  },
  Object {
    "arguments": Array [],
    "collapse": false,
    "column": null,
    "file": "[native code]",
    "lineNumber": null,
    "methodName": "invokeCallbackAndReturnFlushedQueue",
  },
]
PubSub React Native bug
Source
picture geoseong
👍3

Most helpful comment

I've found the solution

Key problem is 

AWSAppSyncRealTimeProvider Object {
  "err": [ReferenceError: Can't find variable: Buffer],
}

I just input this code in root js file(e.g., App.js, index.js) of your project

global.Buffer = global.Buffer || require('buffer').Buffer

for example,

// index.js
import App from './App';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
global.Buffer = global.Buffer || require('buffer').Buffer

I think Buffer related error sometimes happen in Amplify project..

I solved this problem with the other following Buffer related issue case #840

I think amplify need some safety plan to protect Buffer related error.

picture geoseong on 12 Jan 2020
👍10

All 12 comments

I've found the solution

Key problem is 

AWSAppSyncRealTimeProvider Object {
  "err": [ReferenceError: Can't find variable: Buffer],
}

I just input this code in root js file(e.g., App.js, index.js) of your project

global.Buffer = global.Buffer || require('buffer').Buffer

for example,

// index.js
import App from './App';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
global.Buffer = global.Buffer || require('buffer').Buffer

I think Buffer related error sometimes happen in Amplify project..

I solved this problem with the other following Buffer related issue case #840

I think amplify need some safety plan to protect Buffer related error.

geoseong picture geoseong on 12 Jan 2020
👍10

Thank you for sharing your solution @geoseong . I was really struggling to find the cause of the problem

lissau picture lissau on 15 Jan 2020

The fix @geoseong proposed did fix part of my problem, but unfortunately i'm still getting this error. I figured out the error message by debugging. The error message is
{ message:"Timeout disconnect" } and is being send by AWSAppSyncRealTimeProvider.

Screen Shot 2020-01-16 at 12 11 20

lissau picture lissau on 16 Jan 2020
👀1

What I did to fix the above issue was to listen for AppState changes and manually unsubscribe when the app is in the background and subscribe again when the screen get focus

lissau picture lissau on 17 Jan 2020
👍1

Was following the AWS Amplify React Native tutorial and ran in to this same issue as soon as we reached step 4 (adding the subscription). Please resolve it.

https://aws-amplify.github.io/docs/js/start?ref=amplify-rn-btn&platform=react-native

karam94 picture karam94 on 11 Feb 2020
👀1

The same here. A fresh new amplify project and booom.

paulorsbrito picture paulorsbrito on 14 Feb 2020

We did find a bug with this and put a fix out for this yesterday afternoon. We are looking to do a release today in order to get it to our stable branch. @geoseong Can you please verify the above PR resolves your issue? Please test the @unstable tag via npm in order to verify

sammartinez picture sammartinez on 14 Feb 2020

@sammartinez I can confirm the @unstable branch fixes 

AWSAppSyncRealTimeProvider Object {
  "err": [ReferenceError: Can't find variable: Buffer],
}

subscriptions seem to be working as intended

bullapse picture bullapse on 14 Feb 2020
🎉1

Release will be happening shortly.

sammartinez picture sammartinez on 14 Feb 2020

@sammartinez oh, you guys finally solved that issue! thank you.
I've tried what you suggested and seems to work well.

What I've tried this like

  1. $ rm -rf node_modules
  2. $ yarn add aws-amplify@unstable
  3. status of package.json
    json "dependencies" : { "aws-amplify": "^2.2.5-unstable.4", }

  1. uncomment Buffer code in App.js

    // global.Buffer = global.Buffer || require('buffer').Buffer;

  2. $ yarn ios

  3. subscription working well

Seeing PR related this issue, I didn't know that it had to add only one line of solution.

Anyways, I will try to make the PR if I find that bug one day 馃槅
have nice day

geoseong picture geoseong on 15 Feb 2020

@geoseong thanks for testing this. We did do a release yesterday so this change is now in our latest tag. Thanks again for verifying and I鈥檓 glad it鈥檚 working as expected. Resolving issue.

sammartinez picture sammartinez on 15 Feb 2020
👍2

If anyone is still running into this as I was: I changed my subscribe object to be this: 

const subscription = API.graphql(graphqlOperation(onCreateMember)).subscribe({
    error: err => console.log("error caught", err),
    next: data => console.log("sub data", data),
});

and the console.log for the error caught that I was unauthorized to access the subscription for the member model.

DavidBrear picture DavidBrear on 28 Feb 2020
👍6
Was this page helpful?
0 / 5 - 0 ratings

Related issues

gHashTag picture gHashTag  路  135Comments
guanzo picture guanzo  路  63Comments
martimarkov picture martimarkov  路  74Comments
powerful23 picture powerful23  路  52Comments
nomadus picture nomadus  路  53Comments