Not catchable WebSocket error: Cannot send a message. Unknown WebSocket id XYZ

[Tonacatecuhtli]

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

Environment:
OS: Windows 10
Node: 9.3.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.0.0 => 16.0.0
react-native: github:facebook/react-native#master => 1000.0.0

Target Platform: Android (>=6)

Steps to Reproduce

1. Create an empty initial rn project.
2. Connect to a WebSocketServer z.B. 'wss://echo.websocket.org'
3. Send a ws message
4. Close the ws
5. Please read the following code comments

 const ws = new WebSocket('wss://echo.websocket.org');
        ws.onopen = () => {
            // connection opened
            ws.send('something'); // send a message
            // close the webSocket could happen because of the wsServer
            ws.close();
            try{
                // send again on the closed connection
                ws.send('test');
                // now you get a Java Error: cannot send to Unknown WebSocket id XYZ
                // the error is not catchable because it originates in the Java WebSocketModule.java
                // this shouldn't happen because the server can always close the connection for some reason
                // we should be able to catch that.
            } catch (err) {
                console.log('caught error');
                console.log(err);
            }
        };

Expected Behavior

The Error should be caught in the catch block.

Actual Behavior

I get a red screen which I can't keep from the user.

Reproducible Demo

With a setup branch on a test reop

Clone the repo and switch to branch: UnknownWebSocketIdError

git clone https://github.com/Tonacatecuhtli/createRnIssues
cd createRnIssues
git checkout https://github.com/Tonacatecuhtli/createRnIssues

With an initial rn project and copy-paste App.js

Create an initial react-native project and copy this into your App.js

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});


export default class App extends Component<{}> {
    testWs(){
        const ws = new WebSocket('wss://echo.websocket.org');
        ws.onopen = () => {
            // connection opened
            ws.send('something'); // send a message
            // close the webSocket could happen because of the wsServer
            ws.close();
            try{
                // send again on the closed connection
                ws.send('test');
                // now you get a Java Error: cannot send to Unknown WebSocket id XYZ error
                // the error is not catchable because it originates in the Java WebSocketModule.java
                // this shouldn't happen because the server can always close the connection for some reason
                // we should be able to catch that.
            } catch (err) {
                console.log('caught error');
                console.log(err);
            }
        };

        ws.onmessage = (e) => {
            // a message was received
            console.log(e.data);
        };

        ws.onerror = (e) => {
            // an error occurred
            console.log(e.message);
        };

        ws.onclose = (e) => {
            // connection closed
            console.log(e.code, e.reason);
        };

    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
                <Button
                    title="test websocket"
                    onPress={this.testWs}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

[sonnyp]

We see this happening too, If it's of any help, here is a sentry report.

https://sentry.io/share/issue/f99f470515e3444fab6c58d58e280c4a/

RN 0.51.0

and our WebSocket code https://github.com/xmppjs/xmpp.js/blob/master/packages/websocket/lib/Socket.js

[ej3]

appears to be same issue as #3346

[satya164]

Closing as duplicate of #3346