Add log about browser tab sleeping (#34008)

Author: BrennanConroy

src/SignalR/clients/ts/signalr/src/HubConnection.ts

@@ -8,7 +8,7 @@ import { ILogger, LogLevel } from "./ILogger";
 import { IRetryPolicy } from "./IRetryPolicy";
 import { IStreamResult } from "./Stream";
 import { Subject } from "./Subject";
-import { Arg, getErrorString } from "./Utils";
+import { Arg, getErrorString, Platform } from "./Utils";
 
 const DEFAULT_TIMEOUT_IN_MS: number = 30 * 1000;
 const DEFAULT_PING_INTERVAL_IN_MS: number = 15 * 1000;
@@ -65,6 +65,11 @@ export class HubConnection {
     private _timeoutHandle?: any;
     private _pingServerHandle?: any;
 
+    private _freezeEventListener = () =>
+    {
+        this._logger.log(LogLevel.Warning, "The page is being frozen, this will likely lead to the connection being closed and messages being lost. For more information see the docs at https://docs.microsoft.com/aspnet/core/signalr/javascript-client#bsleep");
+    };
+
     /** The server timeout in milliseconds.
      *
      * If this timeout elapses without receiving any messages from the server, the connection will be terminated with an error.
@@ -174,6 +179,13 @@ export class HubConnection {
         try {
             await this._startInternal();
 
+            if (Platform.isBrowser) {
+                if (document) {
+                    // Log when the browser freezes the tab so users know why their connection unexpectedly stopped working
+                    document.addEventListener("freeze", this._freezeEventListener);
+                }
+            }
+
             this._connectionState = HubConnectionState.Connected;
             this._connectionStarted = true;
             this._logger.log(LogLevel.Debug, "HubConnection connected successfully.");
@@ -721,6 +733,12 @@ export class HubConnection {
             this._connectionState = HubConnectionState.Disconnected;
             this._connectionStarted = false;
 
+            if (Platform.isBrowser) {
+                if (document) {
+                    document.removeEventListener("freeze", this._freezeEventListener);
+                }
+            }
+
             try {
                 this._closedCallbacks.forEach((c) => c.apply(this, [error]));
             } catch (e) {