Emit event when an websocket error occurs.

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ### vNEXT
+- added `error` event to handle connection errors and debug network troubles [PR #341](https://github.com/apollographql/subscriptions-transport-ws/pull/341).
 
 ### v0.9.7
 - change default timeout from 10s to 30s [PR #368](https://github.com/apollographql/subscriptions-transport-ws/pull/368)

README.md

@@ -255,7 +255,7 @@ ReactDOM.render(
 #### `unsubscribeAll() => void` - unsubscribes from all active subscriptions.
 
 #### `on(eventName, callback, thisContext) => Function`
-- `eventName: string`: the name of the event, available events are: `connecting`, `connected`, `reconnecting`, `reconnected` and `disconnected`
+- `eventName: string`: the name of the event, available events are: `connecting`, `connected`, `reconnecting`, `reconnected`, `disconnected` and `error`
 - `callback: Function`: function to be called when websocket connects and initialized.
 - `thisContext: any`: `this` context to use when calling the callback function.
 - => Returns an `off` method to cancel the event subscription.
@@ -285,6 +285,11 @@ ReactDOM.render(
 - `thisContext: any`: `this` context to use when calling the callback function.
 - => Returns an `off` method to cancel the event subscription.
 
+#### `onError(callback, thisContext) => Function` - shorthand for `.on('error', ...)`
+- `callback: Function`: function to be called when an error occurs.
+- `thisContext: any`: `this` context to use when calling the callback function.
+- => Returns an `off` method to cancel the event subscription.
+
 ### `close() => void` - closes the WebSocket connection manually, and ignores `reconnect` logic if it was set to `true`.
 
 ### `use(middlewares: MiddlewareInterface[]) => SubscriptionClient` - adds middleware to modify `OperationOptions` per each request

src/client.ts

@@ -234,6 +234,10 @@ export class SubscriptionClient {
     return this.on('reconnecting', callback, context);
   }
 
+  public onError(callback: ListenerFn, context?: any): Function {
+    return this.on('error', callback, context);
+  }
+
   public unsubscribeAll() {
     Object.keys(this.operations).forEach( subId => {
       this.unsubscribe(subId);
@@ -514,9 +518,10 @@ export class SubscriptionClient {
       }
     };
 
-    this.client.onerror = () => {
+    this.client.onerror = (err: Error) => {
       // Capture and ignore errors to prevent unhandled exceptions, wait for
       // onclose to fire before attempting a reconnect.
+      this.eventEmitter.emit('error', err);
     };
 
     this.client.onmessage = ({ data }: {data: any}) => {

src/test/tests.ts

@@ -948,6 +948,26 @@ describe('Client', function () {
     }, 1000);
   });
 
+  it('should emit event when an websocket error occurs', function (done) {
+    const client = new SubscriptionClient(`ws://localhost:${ERROR_TEST_PORT}/`);
+
+    client.request({
+      query: `subscription useInfo{
+        invalid
+      }`,
+      variables: {},
+    }).subscribe({
+      next: () => {
+        assert(false);
+      },
+    });
+
+    client.onError((err: Error) => {
+      expect(err.message).to.be.equal(`connect ECONNREFUSED 127.0.0.1:${ERROR_TEST_PORT}`);
+      done();
+    });
+  });
+
   it('should stop trying to reconnect to the server', function (done) {
     wsServer.on('connection', (connection: WebSocket) => {
       connection.close();