Re-opening React Native app causes WebSocketError

BTMouseKing commented 7 years ago

Hi, we are using pusher-js in our react native app, every time when the ipad is locked and the app is open again after that, we get this warning message if the app is running in debug mode. Does anyone know how to fix this?

Pusher : Error : {"type":"WebSocketError","error":{"type":"WebSocketError","error":{"type":"WebSocketError","error":{"type":"error","target":{"CONNECTING":0,"OPEN":1,"CLOSING":2,"CLOSED":3,"readyState":3,"_eventEmitter":{"_subscriber":{"_subscriptionsForType":{"websocketMessage":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"_subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"_nativeModule":{}},"eventType":"websocketMessage","key":0},null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"]"},"eventType":"websocketMessage","key":2}],"websocketOpen":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketMessage\"][0][\"emitter\"]"},"eventType":"websocketOpen","key":0},null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"]"},"eventType":"websocketOpen","key":2}],"websocketClosed":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketMessage\"][0][\"emitter\"]"},"eventType":"websocketClosed","key":0},null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"]"},"eventType":"websocketClosed","key":2}],"websocketFailed":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketMessage\"][0][\"emitter\"]"},"eventType":"websocketFailed","key":0},null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"]"},"eventType":"websocketFailed","key":2}],"didUpdateDimensions":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"_subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"sharedSubscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"_currentSubscription":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketFailed\"][2]"}},"eventType":"didUpdateDimensions","key":0}],"networkStatusDidChange":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"_subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"_nativeModule":{}},"eventType":"networkStatusDidChange","key":0},null],"collectBugExtraData":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"didUpdateDimensions\"][0][\"emitter\"]"},"context":null,"eventType":"collectBugExtraData","key":0}],"toggleElementInspector":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"didUpdateDimensions\"][0][\"emitter\"]"},"eventType":"toggleElementInspector","key":0}],"keyboardDidShow":[null,null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"_subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"_nativeModule":{}},"eventType":"keyboardDidShow","key":2},{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"keyboardDidShow\"][2][\"emitter\"]"},"eventType":"keyboardDidShow","key":3},null,null],"keyboardDidHide":[null,null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"keyboardDidShow\"][2][\"emitter\"]"},"eventType":"keyboardDidHide","key":2},{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"keyboardDidShow\"][2][\"emitter\"]"},"eventType":"keyboardDidHide","key":3},null,null],"idsAvailable":[null],"keyboardWillShow":[null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"keyboardDidShow\"][2][\"emitter\"]"},"eventType":"keyboardWillShow","key":1},{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"keyboardDidShow\"][2][\"emitter\"]"},"eventType":"keyboardWillShow","key":2},null,null],"keyboardWillHide":[null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"keyboardDidShow\"][2][\"emitter\"]"},"eventType":"keyboardWillHide","key":1},{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"keyboardDidShow\"][2][\"emitter\"]"},"eventType":"keyboardWillHide","key":2},null,null],"didSendNetworkData":[null,null,null,null,null,null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"_subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"_nativeModule":{}},"eventType":"didSendNetworkData","key":6}],"didReceiveNetworkResponse":[null,null,null,null,null,null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"didSendNetworkData\"][6][\"emitter\"]"},"eventType":"didReceiveNetworkResponse","key":6}],"didReceiveNetworkData":[null,null,null,null,null,null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"didSendNetworkData\"][6][\"emitter\"]"},"eventType":"didReceiveNetworkData","key":6}],"didReceiveNetworkIncrementalData":[null,null,null,null,null,null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"didSendNetworkData\"][6][\"emitter\"]"},"eventType":"didReceiveNetworkIncrementalData","key":6}],"didReceiveNetworkDataProgress":[null,null,null,null,null,null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"didSendNetworkData\"][6][\"emitter\"]"},"eventType":"didReceiveNetworkDataProgress","key":6}],"didCompleteNetworkResponse":[null,null,null,null,null,null,{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"didSendNetworkData\"][6][\"emitter\"]"},"eventType":"didCompleteNetworkResponse","key":6}],"appStateDidChange":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"_subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"_nativeModule":{"initialAppState":"active"},"_eventHandlers":{"change":{},"memoryWarning":{}},"currentState":"background"},"eventType":"appStateDidChange","key":0},{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"appStateDidChange\"][0][\"emitter\"]"},"eventType":"appStateDidChange","key":1}],"remoteNotificationOpened":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"didUpdateDimensions\"][0][\"emitter\"]"},"eventType":"remoteNotificationOpened","key":0}],"remoteNotificationsRegistered":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"_subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"_nativeModule":{}},"eventType":"remoteNotificationsRegistered","key":0}],"remoteNotificationRegistrationError":[{"subscriber":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"]"},"emitter":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"remoteNotificationsRegistered\"][0][\"emitter\"]"},"eventType":"remoteNotificationRegistrationError","key":0}]},"_currentSubscription":null},"_nativeModule":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketMessage\"][0][\"emitter\"][\"_nativeModule\"]"}},"_socketId":2,"_subscriptions":[{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketMessage\"][2]"},{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketOpen\"][2]"},{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketClosed\"][2]"},{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"][\"_eventEmitter\"][\"_subscriber\"][\"_subscriptionsForType\"][\"websocketFailed\"][2]"}]},"currentTarget":{"$ref":"$[\"error\"][\"error\"][\"error\"][\"target\"]"},"eventPhase":2,"bubbles":false,"cancelable":false,"timeStamp":1487285408423,"isTrusted":false}}}}

hph commented 7 years ago

@BTMouseKing Have you only run into this issue in debug mode? I'm not very familiar with React Native myself, but the relevant code for detecting connectivity state in the React Native build is here.

BTMouseKing commented 7 years ago

Yes, it was happening in debug mode. Let me try again to check if it still happens, and i will leave a feedback.

natdm commented 7 years ago

I get the same thing. Debug mode and production mode. It will crash some Android production builds depending on how old the device is.

To get this error, I had to use a special function to avoid looking at cyclic dependancies (below)

JSON.stringify(e, function(key, val) {
    if (val != null && typeof val == 'object') {
        if (seenErr.indexOf(val) >= 0) {
            return;
         }
         seenErr.push(val);
    }
    return val;
})

{
   "type":"close",
   "target":{
      "CONNECTING":0,
      "OPEN":1,
      "CLOSING":2,
      "CLOSED":3,
      "readyState":3,
      "_eventEmitter":{
         "_subscriber":{
            "_subscriptionsForType":{
               "websocketMessage":[
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  {
                     "eventType":"websocketMessage",
                     "key":10
                  },
                  null,
                  null
               ],
               "websocketOpen":[
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  {
                     "eventType":"websocketOpen",
                     "key":10
                  },
                  null,
                  null
               ],
               "websocketClosed":[
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  {
                     "eventType":"websocketClosed",
                     "key":10
                  },
                  null,
                  null
               ],
               "websocketFailed":[
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  null,
                  {
                     "eventType":"websocketFailed",
                     "key":10
                  },
                  null,
                  null
               ],
               "didUpdateDimensions":[
                  {
                     "emitter":{

                     },
                     "eventType":"didUpdateDimensions",
                     "key":0
                  }
               ],
               "hardwareBackPress":[
                  {
                     "eventType":"hardwareBackPress",
                     "key":0
                  }
               ],
               "collectBugExtraData":[
                  {
                     "context":null,
                     "eventType":"collectBugExtraData",
                     "key":0
                  }
               ],
               "toggleElementInspector":[
                  null,
                  null,
                  {
                     "eventType":"toggleElementInspector",
                     "key":2
                  },
                  {
                     "eventType":"toggleElementInspector",
                     "key":3
                  },
                  {
                     "eventType":"toggleElementInspector",
                     "key":4
                  }
               ],
               "networkStatusDidChange":[
                  {
                     "emitter":{

                     },
                     "eventType":"networkStatusDidChange",
                     "key":0
                  }
               ],
               "didSendNetworkData":[
                  null,
                  null,
                  null,
                  null
               ],
               "didReceiveNetworkResponse":[
                  null,
                  null,
                  null,
                  null
               ],
               "didReceiveNetworkData":[
                  null,
                  null,
                  null,
                  null
               ],
               "didReceiveNetworkIncrementalData":[
                  null,
                  null,
                  null,
                  null
               ],
               "didReceiveNetworkDataProgress":[
                  null,
                  null,
                  null,
                  null
               ],
               "didCompleteNetworkResponse":[
                  null,
                  null,
                  null,
                  null
               ],
               "keyboardDidShow":[
                  null,
                  {
                     "emitter":{

                     },
                     "eventType":"keyboardDidShow",
                     "key":1
                  },
                  {
                     "eventType":"keyboardDidShow",
                     "key":2
                  },
                  {
                     "eventType":"keyboardDidShow",
                     "key":3
                  }
               ],
               "keyboardDidHide":[
                  null,
                  {
                     "eventType":"keyboardDidHide",
                     "key":1
                  },
                  {
                     "eventType":"keyboardDidHide",
                     "key":2
                  },
                  {
                     "eventType":"keyboardDidHide",
                     "key":3
                  }
               ],
               "screenInstanceID8_events":[
                  {
                     "eventType":"screenInstanceID8_events",
                     "key":0
                  }
               ],
               "keyboardWillShow":[
                  {
                     "eventType":"keyboardWillShow",
                     "key":0
                  },
                  {
                     "eventType":"keyboardWillShow",
                     "key":1
                  },
                  {
                     "eventType":"keyboardWillShow",
                     "key":2
                  }
               ],
               "keyboardWillHide":[
                  {
                     "eventType":"keyboardWillHide",
                     "key":0
                  },
                  {
                     "eventType":"keyboardWillHide",
                     "key":1
                  },
                  {
                     "eventType":"keyboardWillHide",
                     "key":2
                  }
               ]
            },
            "_currentSubscription":null
         }
      },
      "_socketId":10,
      "_subscriptions":[
         null,
         null,
         null,
         null
      ]
   },
   "eventPhase":2,
   "bubbles":false,
   "cancelable":false,
   "timeStamp":1492297529799,
   "isTrusted":false
}

TGNC commented 7 years ago

+1

keith-kurak commented 7 years ago

+1

sunweiyang commented 7 years ago

This is also happening for my team's RN app, and we are on a recent RN (0.49.3) and pusher-js (4.2.1).

hph commented 7 years ago

Unfortunately there's not much information to be gleaned from the above error messages. It does look like this is a React Native issue, but I haven't found anything that looks related on their bug tracker. If any of you is still facing this issue, is there a chance that you can provide a code snippet that I can use to try and reproduce this issue?

keith-kurak commented 6 years ago

@hph is there a way I can intercept that error (e.g., so I can display it on the screen)? If so, I could create an Expo snack that could probably demo the issue pretty easily without you even having to run React Native locally.

It happens if I navigate away from the app for several minutes (seems to take longer on iOS than Android) and then it happens if I come right back. It also happens if I lock the phone for a minute or two with the app active, then unlock the phone. It's happening on recent versions of RN - Expo 22 / React Native 49 for me right now. I'll be trying Expo 24/ RN 51 soon. It's a bit of a bummer because the open pusher channel will queue up messages so I receive them all as I resume the app - unless this happens, which means I need to take alternative steps to refresh whatever screen is open at the time (but without duplicating whatever else I might already be doing in response to pusher notifications when they do succeed).

sampsasaarela commented 6 years ago

@llamaluvr have you tried to bind error event to the connection?

socket.connection.bind('error', (err) => {
  // handle error
});

keith-kurak commented 6 years ago

@sampsasaarela that works, awesome! Thanks! If I don't get this Expo Snack done before I break for Christmas in uhhh... 15 minutes... I'll get it after break :-).

keith-kurak commented 6 years ago

Got some example code up there!

Unfortunately, it doesn't work great in Expo Snack (it's quick to refresh if you leave the screen, and it doesn't form the pusher-js dependency correctly in package.json when exporting to XDE), so it's just a github repo:

https://github.com/llamaluvr/react-native-pusher-websocket-error-demo

Repro steps:

Download the repo
Run yarn to restore dependencies.
Edit App.js - change the constants to set your pusher key, cluster, channel, and event name.
Grab the Expo XDE https://expo.io/tools#xde. I think it automatically downloads the expo command-line tools, so you should be good with just that.
Open the folder in XDE.
Either run from XDE in your iOS simulator, or download the Expo client to your phone and scan the QR code.
Send a test message to make sure your connection is right - you should see an alert in the app.
Lock the simulator/ device. Leave it be for about 5 minutes (if you don't see the error, try longer next time).
Unlock the device.
You should see an alert with the WebSocket error, and also console output for the error.

hph commented 6 years ago

@llamaluvr I tried running your example but ran into some problems, so I ended up setting up create-react-native-app and replaced the default app.js with your code. It looks like everything works correctly even when I wait 15 minutes or so. Could it be that Expo is restarting the whole app when I unlock my phone? I'm not sure what's going on. Edit: I always get Running app on Nexus 5X in development mode when I unlock the device, and the Expo app appears to reload. I'll come up with something else to debug this.

keith-kurak commented 6 years ago

@hph What issue did you have with the example? Maybe I can resolve that.

Also, when you say you ran it with CRNA, how did you run it? Normally, the path of least resistance with CRNA is to run the app on your simulator or device using the Expo client. Or did you detach from CRNA entirely and compile it as a vanilla RN app?

It's hard to tell on the demo, but I can tell Expo isn't restarting the app after I unlock on my actual app, because it stays on the same screen I left it on.

hph commented 6 years ago

@llamaluvr I ran npm start, which brought up a QR code and I scanned it on my device. I now tried running npm start in your project and it also worked - I originally ran exp start instead (sorry - no prior experience with this tool!). When I unlock the device I get an Expo loading screen for a moment, and then the text again. I assume this is restarting the app, which I think prevents me from getting the error (although I don't know why it's doing that).

keith-kurak commented 6 years ago

@hph Yeah, you're seeing the app reload when you unlock. I'm actually seeing something similar on my device, which is actually very similar to something I saw a few weeks ago when I was testing my workaround to the WebSocketError. I would open my app (App 1) in Expo, navigate away from the app to another app (App 2), where I perform an action that would trigger App 1 to receive a Pusher notification. When I would navigate back to App 1, Expo would immediately restart it. I see the same thing with my demo app now. I'll try to isolate that issue for the Expo team to look at.

Anyway, this issue with it restarting the app doesn't seem to happen in standalone apps build with CRNA/ Expo, Android, or in the iOS simulator. I'd recommend you try it in the iOS simulator if you can. You could also try it on Android but it's less predictable there. In your CRNA version of the reproduction, run npm ios to start it in the simulator and then try the same steps (lock if for a long time and come back in).

hph commented 6 years ago

@llamaluvr Strangely enough, I haven't been able to reproduce this using the iOS simulator either. I tried a couple of times and left it for over half an hour in my last attempt. Besides using version 4.2.2 and setting activityTimeout to 60000 I'm using the exact same code as you. Can you still reproduce the issue with the latest version?

keith-kurak commented 6 years ago

@hph I can reproduce with 4.2.2 and activityTimeout = 60000. I even did what you described with CRNA - creating a new project in CRNA and copying over App.js, and got the same thing.

When you leave the simulator alone, are you locking it? (use Hardware menu -> Lock). That's what I'm doing.

One thing I'm noticing (maybe this will offer a clue) is that the WebSocketError I'm getting in this particular reproduction is different from the WebSocketError I saw before in my production app / the one quoted by the OP. It's actually:

screen shot 2018-01-05 at 9 25 10 am

keith-kurak commented 6 years ago

@hph Noticed issue https://github.com/pusher/pusher-js/issues/260 and it describes an easier way to reproduce the exact error in the original post - start on wifi and then switch to cellular. Note that this doesn't seem to affect my ability receive a future pusher notification.

To do this with my example, you need to not call JSON.stringify() when receiving the error, because the resulting error object is cyclic, so I changed my error subscription in App.js to:

this._pusherSocket.connection.bind('error', err => {
      var seen = [];
      errorMessage = JSON.stringify(err, function(key, val) {
          if (val != null && typeof val == "object") {
                if (seen.indexOf(val) >= 0) {
                    return;
                }
                seen.push(val);
            }
            return val;
        });
      Alert.alert('Connection error (probably WebSocket error)!', errorMessage);
      console.log('connection error (probably WebSocket error)!');
      console.log(err);
    });

(I also updated the repo)

So reproduction steps for this particular error:

Run CRNA/ Expo.
Scan the QR code to your device.
Kill the wifi.
See the error.

You should at least see (part of) the error in the Alert that appears on the app. You can also see the full error in the console, but I think it requires switching over to the exp command-line tool (https://expo.io/learn), creating an Expo account, and then running exp start on the my original repo. That's because, by default, exp start will stream the app over a tunnel with a public address from Expo that will not be severed when you turn off wifi on your phone, while CRNA uses a local IP address.

In the case of the "Pong reply not received" error I was getting above, I wonder if this is partially due to some incorrect expectations on my part. Pusher cannot know if my app just briefly went inactive or if it was killed entirely. And an app can be inactive theoretically for days or weeks.

So, my question is, what does Pusher expect my app do to when it goes inactive? Should I unsubscribe entirely? Or is it supposed to gracefully recover without me taking any further action? And should I expect or not expect to receive all messages while my app was inactive? Pusher at least works for a while when going active to inactive to active again, and I'd prefer to not be overly-aggressive with working around pusher by refreshing data from my API anytime I suspect pusher might not send me a message.

Since this is a mobile-specific problem, I was looking for hints in the iOS library https://github.com/pusher/pusher-websocket-swift, but didn't see any references to applicationWillResignActive or applicationWillEnterBackground, the equivalent events in native iOS.

I'd be happy to move this part of the discussion to another issue/ channel if that works better. I don't want to steal focus from the OP's error.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you'd like this issue to stay open please leave a comment indicating how this issue is affecting you. Thankyou.

pusher / pusher-js

Re-opening React Native app causes WebSocketError #216