DataStore does not restart after re-enabling WiFi on Chrome (React)

Describe the bug DataStore does not restart after I re-enabled my Wi-Fi on my laptop (Windows). This is a React app.

Is this an expected behaviour, or do I need to get Service Worker configured on my app?

To Reproduce Steps to reproduce the behavior:

1. Start DataStore.
2. Off Wi-Fi from Windows Taskbar.
3. You’ll observe that DataStore tries to reconnect, ignore that.
4. After roughly 15 seconds, turn Wi-Fi back on.
5. DataStore does nothing.
6. Calling DataStore.start() manually doesn’t help.

Here’s a video with logs and everything: https://streamable.com/a10fvi

Expected behavior I’d expect DataStore to restart the websocket connection.

Code Snippet schema.graphql

enum PostStatus {
    ACTIVE
    INACTIVE
}

type Post @model {
    id: ID!
    title: String!
    rating: Int!
    status: PostStatus!
}

App.js

import React, { useEffect } from 'react';
import './App.css';

import { Hub } from '@aws-amplify/core';
import { DataStore, Predicates } from '@aws-amplify/datastore';
import { Post, PostStatus } from './models';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

// window.LOG_LEVEL = 'DEBUG';

function onCreate() {
    DataStore.save(
        new Post({
            title: `New title ${Date.now()}`,
            rating: (function getRandomInt(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min)) + min;
            })(1, 7),
            status: PostStatus.ACTIVE,
        })
    );
}

function onDeleteAll() {
    DataStore.delete(Post, Predicates.ALL);
}

async function onQuery() {
    const posts = await DataStore.query(Post, (c) => c.rating('gt', 4));

    console.log(posts);
}

function App() {
    useEffect(() => {
        const subscription = DataStore.observe(Post).subscribe((msg) => {
            console.warn('Post subscription:', msg.opType, msg.element);
        });
        return () => subscription.unsubscribe();
    }, []);

    useEffect(() => {
        // Create listener
        const listener = Hub.listen('datastore', async (hubData) => {
            const { event, data } = hubData.payload;

            console.log(event, data);
        });

        // Remove listener
        return () => {
            listener();
        };
    }, []);

    return (
        <div className="App">
            <header className="App-header">
                <div>
                    <input type="button" value="NEW" onClick={onCreate} />
                    <input
                        type="button"
                        value="DELETE ALL"
                        onClick={onDeleteAll}
                    />
                    <input
                        type="button"
                        value="QUERY rating > 4"
                        onClick={onQuery}
                    />

                    <input
                        type="button"
                        value="Clear datastore"
                        onClick={async () => {
                            await DataStore.clear();
                        }}
                    />

                    <input
                        type="button"
                        value="Start datastore"
                        onClick={async () => {
                            try {
                                await DataStore.start();
                            } catch (error) {
                                console.warn(123, error);
                            }
                        }}
                    />

                    <AmplifySignOut />
                </div>
            </header>
        </div>
    );
}

export default withAuthenticator(App);

Environment

  System:
    OS: Windows 10 10.0.17763
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 4.79 GB / 15.95 GB
  Binaries:
    Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20200509.222254.0 - C:\Users\Chai\AppData\Local\watchman\watchman.EXE
  Browsers:
    Chrome: 86.0.4240.198
    Edge: Spartan (44.17763.831.0)
    Internet Explorer: 11.0.17763.771
  npmPackages:
    @aws-amplify/ui-react: ^0.2.28 => 0.2.28
    @testing-library/jest-dom: ^5.11.4 => 5.11.6
    @testing-library/react: ^11.1.0 => 11.1.2
    @testing-library/user-event: ^12.1.10 => 12.2.2
    aws-amplify: ^3.3.8 => 3.3.8
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.0 => 4.0.0
    web-vitals: ^0.2.4 => 0.2.4
  npmGlobalPackages:
    @angular/cli: 8.1.3
    @aws-amplify/cli: 4.32.1
    @ionic/angular: 4.10.0
    cordova-res: 0.8.0
    cordova: 9.0.0
    create-react-app: 3.4.1
    create-react-native-app: 3.4.0
    firebase-tools: 7.6.2
    ionic: 5.4.5
    my-project: 0.0.1
    native-run: 0.2.8
    nodemon: 1.19.4
    react-devtools: 4.6.0
    react-native-cli: 2.0.1
    rimraf: 3.0.2
    serve: 11.2.0
    serverless: 1.62.0
    typescript: 4.0.5
    webextension-toolbox: 3.0.0

Smartphone (please complete the following information):

• Browser: Chrome, New Edge

Root cause Reachability implementation which depends on navigator.onLine does not detect when the device loses Wi-Fi. It only works if I go to developer tools and swich to offline under network tab. You can test it here (https://jsfiddle.net/02v3t6h7/).

Is it also possible to expose an API that allows developer to restart the websocket connection for DataStore? Update: I just realize u can “restart” datastore by doing DataStore.stop() followed by DataStore.start().

[iartemiev]

When I toggle WiFi on macOS or iOS, it responds as expected. I only have physical devices that run on those OSs, so, unfortunately, I can’t locally test other platforms without a VM. I’ll try testing this on Windows using Device Farm to see if I can reproduce that way.

FWIW those SO questions are from ~8 and 10 years ago respectively, current navigator.onLine implementation should be much more stable, but nonetheless, I’ll mark this as a feature request and we’ll explore other options for detecting internet connectivity in browsers.

[github-actions[bot]]

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.