[web] Socket diagnostics updates (#22951)

* Increase threshold for "latency in red color"

* Fix online status in Chrome and Safari

* Add "Auto ping" checkbox

* Put `/socket-diagnostics` behind `AuthenticationController.requireLogin`

* Set logs to `logger.info` when debugging

* Add `publicId` and `clientId` to logs

* Fix disconnect logs when debugging

* Refresh UI every second. Display red "Ping Count" if unanswered for 3s

* Update services/web/frontend/js/features/socket-diagnostics/components/socket-diagnostics.tsx

Co-authored-by: Jakob Ackermann <jakob.ackermann@overleaf.com>

* Update services/web/frontend/js/features/socket-diagnostics/components/socket-diagnostics.tsx

Co-authored-by: Jakob Ackermann <jakob.ackermann@overleaf.com>

* `npm run format:fix`

---------

Co-authored-by: Jakob Ackermann <jakob.ackermann@overleaf.com>
GitOrigin-RevId: 9faf2abdac51fa4b87c67d8fe89c4125d01d826f

services/web/frontend/js/features/socket-diagnostics/components/socket-diagnostics.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import type { ConnectionStatus } from './types'
 import { useSocketManager } from './use-socket-manager'
 import {
@@ -9,6 +9,7 @@ import {
 } from './diagnostic-component'
 import { Container } from 'react-bootstrap-5'
 import MaterialIcon from '@/shared/components/material-icon'
+import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
 
 type NetworkInformation = {
   downlink: number
@@ -38,9 +39,26 @@ const NavigatorInfo = () => {
   )
 }
 
+const useCurrentTime = () => {
+  const [time, setTime] = React.useState(new Date())
+  useEffect(() => {
+    const interval = setInterval(() => setTime(new Date()), 1000)
+    return () => clearInterval(interval)
+  }, [])
+  return time
+}
+
 export const SocketDiagnostics = () => {
-  const { socketState, debugInfo, disconnectSocket, forceReconnect, socket } =
-    useSocketManager()
+  const {
+    socketState,
+    debugInfo,
+    disconnectSocket,
+    forceReconnect,
+    socket,
+    autoping,
+    setAutoping,
+  } = useSocketManager()
+  const now = useCurrentTime()
 
   const getConnectionState = (): ConnectionStatus => {
     if (socketState.connected) return 'connected'
@@ -49,9 +67,13 @@ export const SocketDiagnostics = () => {
   }
 
   const lastReceivedS = debugInfo.lastReceived
-    ? Math.round((Date.now() - debugInfo.lastReceived) / 1000)
+    ? Math.round((now.getTime() - debugInfo.lastReceived) / 1000)
     : null
 
+  const isLate =
+    !!debugInfo.unansweredSince &&
+    now.getTime() - debugInfo.unansweredSince >= 3000
+
   return (
     <Container>
       <h1>Socket Diagnostics</h1>
@@ -78,6 +100,12 @@ export const SocketDiagnostics = () => {
           <MaterialIcon type="speed" /> Connection Stats
         </h3>
         <div className="space-y-2">
+          <OLFormCheckbox
+            label="Auto ping"
+            id="autoping"
+            checked={autoping}
+            onChange={e => setAutoping(e.target.checked)}
+          />
           <DiagnosticItem
             icon="network_ping"
             label="Ping Count"
@@ -92,13 +120,7 @@ export const SocketDiagnostics = () => {
                 )}
               </>
             }
-            type={
-              lastReceivedS !== null
-                ? lastReceivedS < 4
-                  ? 'success'
-                  : 'danger'
-                : undefined
-            }
+            type={isLate === null ? undefined : isLate ? 'danger' : 'success'}
           />
 
           <DiagnosticItem
@@ -117,7 +139,7 @@ export const SocketDiagnostics = () => {
             }
             type={
               debugInfo.latency
-                ? debugInfo.latency < 150
+                ? debugInfo.latency < 450
                   ? 'success'
                   : 'danger'
                 : undefined
@@ -149,7 +171,7 @@ export const SocketDiagnostics = () => {
           <DiagnosticItem
             icon="schedule"
             label="Current time"
-            value={new Date().toUTCString()}
+            value={now.toUTCString()}
           />
           <DiagnosticItem
             icon="hourglass"