client/web: add metric logging logic to the web client (#10434)

Add metric logging logic for the web client frontend. This is an initial
pass of adding the base logic, plus a single point where it is used for
validation that the logging is working correctly. More metric logging
calls will follow in subsquent PRs.

Updates https://github.com/tailscale/tailscale/issues/10261

Signed-off-by: Mario Minardi <mario@tailscale.com>

client/web/src/hooks/node-data.ts

@@ -6,6 +6,7 @@ import { apiFetch, setUnraidCsrfToken } from "src/api"
 import { ExitNode, noExitNode, runAsExitNode } from "src/hooks/exit-nodes"
 import { VersionInfo } from "src/hooks/self-update"
 import { assertNever } from "src/util"
+import { incrementMetric, MetricName } from "src/api"
 
 export type NodeData = {
   Profile: UserProfile
@@ -173,16 +174,25 @@ export default function useNodeData() {
         setIsPosting(false)
         refreshData() // refresh data after POST finishes
       }
+      const updateMetrics = () => {
+        // only update metrics if values have changed
+        if (data?.AdvertisingExitNode !== d.AdvertiseExitNode) {
+          incrementMetric(d.AdvertiseExitNode ? "web_client_advertise_exitnode_enable" : "web_client_advertise_exitnode_disable")
+        }
+      }
 
       return apiFetch("/routes", "POST", d)
-        .then(onComplete)
+        .then(() => {
+          updateMetrics()
+          onComplete()
+        })
         .catch((err) => {
           onComplete()
           alert("Failed to update routes")
           throw err
         })
     },
-    [setIsPosting, refreshData]
+    [setIsPosting, refreshData, data?.AdvertisingExitNode]
   )
 
   useEffect(