amplify-js Unable to reconnect AppSync after connection interruption (web) or app going into background (ios/ android)

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Authentication, GraphQL API, DataStore, Storage

Amplify Categories

auth, storage, function, api, hosting

Environment information


  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 4.43 GB / 31.96 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.4.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 100.0.4896.60
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.55)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @angular-devkit/build-angular: ~13.2.1 => 13.2.5
    @angular-eslint/builder: 13.0.1 => 13.0.1
    @angular-eslint/eslint-plugin: 13.0.1 => 13.0.1
    @angular-eslint/eslint-plugin-template: 13.0.1 => 13.0.1
    @angular-eslint/schematics: 13.0.1 => 13.0.1
    @angular-eslint/template-parser: 13.0.1 => 13.0.1
    @angular/cli: ~13.2.1 => 13.2.5
    @angular/common: ~13.2.0 => 13.2.5
    @angular/common/http:  undefined ()
    @angular/common/http/testing:  undefined ()
    @angular/common/testing:  undefined ()
    @angular/common/upgrade:  undefined ()
    @angular/compiler: ~13.2.0 => 13.2.5
    @angular/compiler-cli: ~13.2.0 => 13.2.5
    @angular/compiler/testing:  undefined ()
    @angular/core: ~13.2.0 => 13.2.5
    @angular/core/testing:  undefined ()
    @angular/forms: ~13.2.0 => 13.2.5
    @angular/language-service: ~13.2.0 => 13.2.5
    @angular/platform-browser: ~13.2.0 => 13.2.5
    @angular/platform-browser-dynamic: ~13.2.0 => 13.2.5
    @angular/platform-browser-dynamic/testing:  undefined ()
    @angular/platform-browser/animations:  undefined ()
    @angular/platform-browser/testing:  undefined ()
    @angular/router: ~13.2.0 => 13.2.5
    @angular/router/testing:  undefined ()
    @angular/router/upgrade:  undefined ()
    @angular/service-worker: ~13.2.0 => 13.2.5
    @angular/service-worker/config:  undefined ()
    @awesome-cordova-plugins/android-permissions: ^5.39.0 => 5.39.1
    @awesome-cordova-plugins/barcode-scanner: ^5.39.0 => 5.39.1
    @awesome-cordova-plugins/bluetooth-le: ^5.39.0 => 5.39.1
    @awesome-cordova-plugins/camera: ^5.39.0 => 5.39.1
    @awesome-cordova-plugins/core: ^5.39.0 => 5.39.1
    @awesome-cordova-plugins/screen-orientation: 5.39.0 => 5.39.0
    @awesome-cordova-plugins/social-sharing: ^5.39.0 => 5.39.1
    @awesome-cordova-plugins/splash-screen: ^5.39.0 => 5.39.1
    @awesome-cordova-plugins/status-bar: ^5.39.0 => 5.39.1
    @aws-amplify/ui-angular: ^2.0.11 => 2.2.0
    @aws-amplify/ui-angular/legacy:  undefined ()
    @capacitor/android: ^3.4.0 => 3.4.1
    @capacitor/cli: ^3.4.0 => 3.4.1
    @capacitor/core: ^3.4.0 => 3.4.1
    @capacitor/ios: ^3.4.0 => 3.4.1
    @capacitor/local-notifications: ^1.1.0 => 1.1.0
    @ionic/angular: ^6.0.11 => 6.0.13
    @ionic/angular-toolkit: ^6.1.0 => 6.1.0
    @types/jasmine: ^3.8.1 => 3.10.3
    @types/jasminewd2: ^2.0.10 => 2.0.10
    @types/node: ^17.0.8 => 17.0.21
    @typescript-eslint/eslint-plugin: ^5.9.1 => 5.13.0
    @typescript-eslint/parser: ^5.9.1 => 5.13.0
    asmcrypto.js: ^2.3.2 => 2.3.2
    aws-amplify: ^4.3.13 => 4.3.15
    buffer: ^6.0.3 => 6.0.3 (4.9.2, 5.7.1)
    capacitor-video-player: ^3.4.0-1 => 3.4.0
    check-outdated: ^2.10.2 => 2.10.2
    crypto-js: ^4.0.0 => 4.1.1
    curve25519-js: 0.0.4 => 0.0.4
    deep-object-diff: ^1.1.0 => 1.1.7
    es6-promise-plugin: ^4.2.2 => 4.2.2
    eslint: ^8.7.0 => 8.10.0
    example-typescript:  1.0.0
    google-protobuf: ^3.17.3 => 3.19.4
    ionicons: ^6.0.1 => 6.0.1
    ionicons-loader:  undefined ()
    ionicons/components:  undefined ()
    ionicons/icons:  6.0.1
    jasmine-core: ^4.0.0 => 4.0.1 (2.8.0, 3.99.1)
    jasmine-spec-reporter: ~7.0.0 => 7.0.0
    jetifier: ^2.0.0 => 2.0.0
    js-sha256: ^0.9.0 => 0.9.0
    karma: ~6.3.4 => 6.3.17
    karma-chrome-launcher: ~3.1.0 => 3.1.0
    karma-coverage-istanbul-reporter: ~3.0.2 => 3.0.3
    karma-jasmine: ~4.0.0 => 4.0.1
    karma-jasmine-html-reporter: ^1.7.0 => 1.7.0
    node-example:  1.0.0
    phonegap-plugin-barcodescanner: ^8.1.0 => 8.1.0
    protractor: ~7.0.0 => 7.0.0
    protractor-example:  1.0.0
    rxjs: ^7.4.0 => 7.5.4 (6.6.7)
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/internal-compatibility:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    swiper: ^8.0.7 => 8.0.7
    swiper_angular:  0.0.1
    ts-node: ~10.4.0 => 10.4.0
    ts-protoc-gen: ^0.15.0 => 0.15.0
    tslib: ^2.3.0 => 2.3.1 (1.14.1)
    typescript: ^4.4.4 => 4.5.5
    typescript-example:  1.0.0
    zone-mix:  undefined ()
    zone-node:  undefined ()
    zone-testing:  undefined ()
    zone.js: ~0.11.4 => 0.11.4
    zone.js/async-test:  undefined ()
    zone.js/async-test.min:  undefined ()
    zone.js/fake-async-test:  undefined ()
    zone.js/fake-async-test.min:  undefined ()
    zone.js/jasmine-patch:  undefined ()
    zone.js/jasmine-patch.min:  undefined ()
    zone.js/long-stack-trace-zone:  undefined ()
    zone.js/long-stack-trace-zone.min:  undefined ()
    zone.js/mocha-patch:  undefined ()
    zone.js/mocha-patch.min:  undefined ()
    zone.js/proxy:  undefined ()
    zone.js/proxy.min:  undefined ()
    zone.js/sync-test:  undefined ()
    zone.js/sync-test.min:  undefined ()
    zone.js/task-tracking:  undefined ()
    zone.js/task-tracking.min:  undefined ()
    zone.js/webapis-media-query:  undefined ()
    zone.js/webapis-media-query.min:  undefined ()
    zone.js/webapis-notification:  undefined ()
    zone.js/webapis-notification.min:  undefined ()
    zone.js/webapis-rtc-peer-connection:  undefined ()
    zone.js/webapis-rtc-peer-connection.min:  undefined ()
    zone.js/webapis-shadydom:  undefined ()
    zone.js/webapis-shadydom.min:  undefined ()
    zone.js/wtf:  undefined ()
    zone.js/wtf.min:  undefined ()
    zone.js/zone-bluebird:  undefined ()
    zone.js/zone-bluebird.min:  undefined ()
    zone.js/zone-error:  undefined ()
    zone.js/zone-error.min:  undefined ()
    zone.js/zone-legacy:  undefined ()
    zone.js/zone-legacy.min:  undefined ()
    zone.js/zone-patch-canvas:  undefined ()
    zone.js/zone-patch-canvas.min:  undefined ()
    zone.js/zone-patch-cordova:  undefined ()
    zone.js/zone-patch-cordova.min:  undefined ()
    zone.js/zone-patch-electron:  undefined ()
    zone.js/zone-patch-electron.min:  undefined ()
    zone.js/zone-patch-fetch:  undefined ()
    zone.js/zone-patch-fetch.min:  undefined ()
    zone.js/zone-patch-jsonp:  undefined ()
    zone.js/zone-patch-jsonp.min:  undefined ()
    zone.js/zone-patch-message-port:  undefined ()
    zone.js/zone-patch-message-port.min:  undefined ()
    zone.js/zone-patch-promise-test:  undefined ()
    zone.js/zone-patch-promise-test.min:  undefined ()
    zone.js/zone-patch-resize-observer:  undefined ()
    zone.js/zone-patch-resize-observer.min:  undefined ()
    zone.js/zone-patch-rxjs:  undefined ()
    zone.js/zone-patch-rxjs-fake-async:  undefined ()
    zone.js/zone-patch-rxjs-fake-async.min:  undefined ()
    zone.js/zone-patch-rxjs.min:  undefined ()
    zone.js/zone-patch-socket-io:  undefined ()
    zone.js/zone-patch-socket-io.min:  undefined ()
    zone.js/zone-patch-user-media:  undefined ()
    zone.js/zone-patch-user-media.min:  undefined ()
  npmGlobalPackages:
    @angular/cli: 13.0.2
    @aws-amplify/cli: 7.6.21
    @ionic/cli: 6.12.4
    appium-doctor: 1.16.0
    appium: 1.21.0
    bower: 1.8.8
    firebase-tools: 8.1.0
    grunt-cli: 1.3.2
    mjpeg-consumer: 2.0.0
    native-run: 1.2.2
    npm: 8.4.0
    opencv4nodejs: 5.6.0
    yarn: 1.22.10

Describe the bug

When using amplify with graphql subscriptions through AppSync (angular and ionic) I often run into scenarios where the AWSAppSyncRealTimeProvider connection is disconnected and cannot be reconnected. I have experienced this on both web and mobile (ios/ android).

On Web

My application automatically severs subscriptions and resubscribes when the browser tab goes in and out of focus. This works fine.

The issue occurs when the computer is sleeping and awoken (temporary network disconnect), resulting in the below error.

This issue also occurs when I manually stop the network connection through chrome and wait 5 minutes (the appsync keepalive timeout).

Once either of these issues occur I cannot get my subscriptions to resubscribe. I have even tried stopping and restarting the DataStore, nothing works.

The only way to resolve the appsync socket disconnect is to refresh the browser tab.

On Mobile (ios / android)

The same issue that I am seeing on the web happens on both mobile platforms as well, when the app goes into the background.

The same as in web I sever subscriptions and resubscribe when the app goes between the background and the foreground, this works fine.

Once the app goes into the background my websocket connection seems to close and I am unable to reconnect it.

Restarting the app seems to be the only way to reconnect the websocket.

Expected behavior

I would expect the AppSyncRealTimeProvider to automatically reconnect when the network connection becomes available again.

Or to have a command that I can call to manually reconnect when the tab/app comes back into focus.

Or to be able to configure the keepAliveTimeout.

I have not found any of these to be available.

Reproduction steps

The easiest way to reproduce is using the browser to trigger offline using dev tools and wait 5 minutes.

Start the app, observe subscriptions are working correctly.
In dev tools select offline mode to simulate a network disconnect.
Wait 5 minutes.
Attempt to subscribe (or resubscribe) to appsync topics.
Observe the AWSAppSyncRealTimeProvider error indicating the web socket has been closed.
Subscriptions no longer work.

This can also be replicated on mobile by putting the app into the background.

Code Snippet

if (isInForeground) {
         // subscribe to app topics
} else {
      // unsubscribe from app topics
}

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

Iphone 12, Pixel 3

Mobile Operating System

iOS 15.3.1, Android 11

Mobile Browser

Chrome

Mobile Browser Version

No response

Additional information and screenshots

No response

Mar 30 '22 00:03 CSHaze

Hi @CSHaze please follow this PR for future updates on this feature being implemented.

Sep 02 '22 18:09 chrisbonifacio

@chrisbonifacio this is awesome! Thank you

Sep 02 '22 18:09 CSHaze

Reconnection is now staged on the next tag in preparation for release in aws-amplify v5. To test against this update install the next tag version of the aws-amplify packages your project is using. eg yarn add aws-amplify@next.

With this change any disrupted connection will attempt to reconnect when possible. Reconnection can be expected to trigger 5 seconds after the resources to reconnect are available. If the network is disrupted in a way that can't be detected, reconnection will be attempted every minute until the connection is recovered.

Note that missed messages will not backfill on recovery. If you need to trigger behavior to catch up missed messaged on recovery, this should be possible to implement using the connection state Hub messages released last month.

Oct 04 '22 22:10 stocaaro

Reconnection is now staged on the next tag in preparation for release in aws-amplify v5. To test against this update install the next tag version of the aws-amplify packages your project is using. eg yarn add aws-amplify@next.

With this change any disrupted connection will attempt to reconnect when possible. Reconnection can be expected to trigger 5 seconds after the resources to reconnect are available. If the network is disrupted in a way that can't be detected, reconnection will be attempted every minute until the connection is recovered.

Note that missed messages will not backfill on recovery. If you need to trigger behavior to catch up missed messaged on recovery, this should be possible to implement using the connection state Hub messages released last month.

When this will be published to main ?

Oct 25 '22 14:10 Ilya93

When this will be published to main ?

Today!

Good news. Automated Reconnection is now available on the latest aws-amplify release! Review the updated subscription docs and consider any application behavior you may want to add to best meet your users needs when subscriptions reconnect.

Please review our breaking change guidance before upgrading your application.

To upgrade Amplify to version 5, run the following in your project folder:

yarn add aws-amplify@latest

Check package.json to see if your project uses other @aws-amplify/* packages directly and upgrade them to latest as well.

With this behavior released, I am closing this issue as resolved.

Nov 14 '22 21:11 stocaaro

Hi @stocaaro,

Will this update only work for the Amplify GraphQL client and not the AWS AppSync JavaScript SDK?

Feb 21 '23 21:02 dylan-westbury

Hello @dylan-westbury,

Correct that the reconnect changes were applied to Amplify and haven't been applied to the AppSync SDK. There are a few issues (ex) on that package related to this.

Thanks, Aaron

Feb 21 '23 22:02 stocaaro

Hi @stocaaro, will there be any update for the SDK for this issue? Thanks

Jun 18 '23 22:06 pepemiso16

I am not aware of any work aimed to port reconnection back to the SDK package. I would recommend surfacing your need on one of the tickets that captures this gap.

Jun 26 '23 15:06 stocaaro

https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/740 for AWS AppSync JavaScript SDK equivalent of this bug.

Jun 28 '23 01:06 dylan-westbury

amplify-js amplify-js copied to clipboard

Unable to reconnect AppSync after connection interruption (web) or app going into background (ios/ android)

Before opening, please confirm:

JavaScript Framework

Amplify APIs

Amplify Categories

Environment information

Describe the bug

On Web

On Mobile (ios / android)

Expected behavior

Reproduction steps

Code Snippet

Log output

aws-exports.js

Manual configuration

Additional configuration

Mobile Device

Mobile Operating System

Mobile Browser

Mobile Browser Version

Additional information and screenshots

amplify-js
amplify-js copied to clipboard