AppSync Subscription connection closing and unable to reestablish

[cdellinger]

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

React

Amplify APIs

Authentication, GraphQL API

Amplify Categories

auth, api

Environment information

# Put output below this line
  System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 487.03 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Safari: 15.1
  npmPackages:
    @aws-amplify/ui-react: ^3.2.1 => 3.2.1
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-legacy:  undefined ()
    @emotion/react: ^11.9.3 => 11.9.3
    @emotion/styled: ^11.9.3 => 11.9.3
    @mui/icons-material: ^5.8.4 => 5.8.4
    @mui/material: ^5.9.2 => 5.9.2
    @mui/x-date-pickers: ^5.0.0-beta.2 => 5.0.0-beta.2
    @testing-library/jest-dom: ^5.16.4 => 5.16.4
    @testing-library/react: ^13.3.0 => 13.3.0
    @testing-library/user-event: ^13.5.0 => 13.5.0
    @types/jest: ^27.5.2 => 27.5.2
    @types/node: ^16.11.43 => 16.11.43
    @types/react: ^18.0.15 => 18.0.15
    @types/react-dom: ^18.0.6 => 18.0.6
    @welldone-software/why-did-you-render: ^7.0.1 => 7.0.1
    aws-amplify: ^4.3.28 => 4.3.28
    date-fns: ^2.29.1 => 2.29.1
    randomcolor: ^0.6.2 => 0.6.2
    react: ^18.2.0 => 18.2.0 (18.0.0)
    react-beautiful-dnd: ^13.1.0 => 13.1.0
    react-dom: ^18.2.0 => 18.2.0
    react-scripts: 5.0.1 => 5.0.1
    typescript: ^4.7.4 => 4.7.4
    web-vitals: ^2.1.4 => 2.1.4

Describe the bug

Exactly like https://github.com/aws-amplify/amplify-js/issues/7070, I have a working browser based app, that my subscriptions drop after about 20 minutes and they cannot be re-established without a browser refresh. @david-mcafee last year mentioned some code used to reconnect on a Discord but that Discord does not seem to exist any longer. In know that some people have experienced this problem with VPNs but in my situation there is not any VPN running.

Expected behavior

Subscription would either be re-established automatically or a coding method to reconnect without a full refresh would be made available

Reproduction steps

Run application Test out that subscription was successfully registered and is operational Wait roughly 20 mins of inactivity and errors will be raised for "Connection closed"

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hi @cdellinger please follow this https://github.com/aws-amplify/amplify-js/pull/10235 for future updates on this feature being implemented and released.

[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.

[stocaaro]

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.