Add counter metric for WebSocket unavailability

Author: shepmaster

ui/frontend/index.tsx

@@ -24,9 +24,10 @@ import PageSwitcher from './PageSwitcher';
 import playgroundApp from './reducers';
 import Router from './Router';
 import configureStore from './configureStore';
+import openWebSocket from './websocket';
 
-const wsUri = '/websocket';
-const socket = new WebSocket(wsUri);
+// Might be null;
+const socket = openWebSocket(window.location);
 
 const store = configureStore(window);
 

ui/frontend/websocket.ts

@@ -0,0 +1,23 @@
+export default function openWebSocket(currentLocation: Location) {
+  try {
+    const wsProtocol = currentLocation.protocol === 'https:' ? 'wss://' : 'ws://';
+    const wsUri = [wsProtocol, currentLocation.host, '/websocket'].join('');
+    return new WebSocket(wsUri);
+  } catch {
+    // WebSocket URL error or WebSocket is not supported by browser.
+    // Assume it's the second case since URL error is easy to notice.
+    (async () => {
+      try {
+        await fetch('/nowebsocket', {
+          method: 'post',
+          headers: {
+            'Content-Length': '0',
+          },
+        });
+      } catch (e) {
+        console.log('Error:', e);
+      }
+    })();
+    return null;
+  }
+}

ui/src/metrics.rs

@@ -1,8 +1,8 @@
 use futures::future::BoxFuture;
 use lazy_static::lazy_static;
 use prometheus::{
-    self, register_histogram, register_histogram_vec, register_int_gauge, Histogram, HistogramVec,
-    IntGauge,
+    self, register_histogram, register_histogram_vec, register_int_counter, register_int_gauge,
+    Histogram, HistogramVec, IntCounter, IntGauge,
 };
 use regex::Regex;
 use std::{future::Future, time::Instant};
@@ -28,6 +28,11 @@ lazy_static! {
         vec![15.0, 60.0, 300.0, 600.0, 1800.0, 3600.0, 7200.0]
     )
     .unwrap();
+    pub(crate) static ref UNAVAILABLE_WS: IntCounter = register_int_counter!(
+        "websocket_unavailability_count",
+        "Number of failed WebSocket connections"
+    )
+    .unwrap();
 }
 
 #[derive(Debug, Copy, Clone, strum::IntoStaticStr)]

ui/src/server_axum.rs

@@ -2,7 +2,7 @@ use crate::{
     gist,
     metrics::{
         track_metric_async, track_metric_force_endpoint_async, track_metric_no_request_async,
-        Endpoint, GenerateLabels, SuccessDetails, DURATION_WS, LIVE_WS,
+        Endpoint, GenerateLabels, SuccessDetails, DURATION_WS, LIVE_WS, UNAVAILABLE_WS,
     },
     sandbox::{self, Channel, Sandbox},
     CachingSnafu, ClippyRequest, ClippyResponse, CompilationSnafu, CompileRequest, CompileResponse,
@@ -83,6 +83,7 @@ pub(crate) async fn serve(config: Config) {
         .route("/meta/gist/:id", get(meta_gist_get))
         .route("/metrics", get(metrics))
         .route("/websocket", get(websocket))
+        .route("/nowebsocket", post(nowebsocket))
         .layer(Extension(Arc::new(SandboxCache::default())))
         .layer(Extension(config.github_token()));
 
@@ -404,6 +405,10 @@ async fn handle_socket(mut socket: WebSocket) {
     DURATION_WS.observe(elapsed.as_secs_f64());
 }
 
+async fn nowebsocket() {
+    UNAVAILABLE_WS.inc();
+}
+
 #[derive(Debug)]
 struct MetricsAuthorization;