[supervisor-frontend] add error counter and client counter

Co-authored-by: Huiwen <mhqnwt@gmail.com>

components/gitpod-protocol/src/util/gitpod-host-url.ts

@@ -175,4 +175,21 @@ export class GitpodHostUrl {
     asApiLogout(): GitpodHostUrl {
         return this.withApi((url) => ({ pathname: "/logout/" }));
     }
+
+    asIDEProxy(): GitpodHostUrl {
+        const hostSegments = this.url.host.split(".");
+        if (hostSegments[0] === "ide") {
+            return this;
+        }
+        return this.with((url) => ({ host: "ide." + url.host }));
+    }
+
+    asIDEMetrics(): GitpodHostUrl {
+        let newUrl: GitpodHostUrl = this;
+        const hostSegments = this.url.host.split(".");
+        if (hostSegments[0] !== "ide") {
+            newUrl = newUrl.asIDEProxy();
+        }
+        return newUrl.with((url) => ({ pathname: "/metrics-api" }));
+    }
 }

components/supervisor/frontend/BUILD.yaml

@@ -10,6 +10,7 @@ packages:
     deps:
       - components/gitpod-protocol:lib
       - components/supervisor-api/typescript-grpc:lib
+      - components/ide-metrics-api/typescript-grpcweb:lib
     config:
       dontTest: true
       yarnLock: ${coreYarnLockBase}/../yarn.lock

components/supervisor/frontend/package.json

@@ -5,7 +5,8 @@
   "version": "0.0.0",
   "dependencies": {
     "@gitpod/gitpod-protocol": "0.1.5",
-    "@gitpod/supervisor-api-grpc": "0.1.5"
+    "@gitpod/supervisor-api-grpc": "0.1.5",
+    "@gitpod/ide-metrics-api-grpcweb": "0.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.0",

components/supervisor/frontend/src/ide/ide-metrics-service-client.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { MetricsServicePromiseClient } from '@gitpod/ide-metrics-api-grpcweb/lib/idemetrics_grpc_web_pb'
+import { AddCounterRequest, AddCounterResponse } from '@gitpod/ide-metrics-api-grpcweb/lib/idemetrics_pb'
+import { serverUrl } from '../shared/urls';
+
+const client = new MetricsServicePromiseClient(serverUrl.asIDEMetrics().toString())
+
+export enum MetricsName {
+    SupervisorFrontendClientTotal = "gitpod_supervisor_frontend_client_total",
+    SupervisorFrontendErrorTotal = "gitpod_supervisor_frontend_error_total"
+}
+
+export class IDEMetricsServiceClient {
+
+    static async addCounter(metricsName: string, labels?: Map<string, string>, value?: number) : Promise<AddCounterResponse> {
+        const req = new AddCounterRequest()
+        req.setName(metricsName)
+        if (value) {
+            req.setValue(value)
+        }
+        if (labels) {
+            const m = req.getLabelsMap()
+            for (const [name, value] of labels) {
+                m.set(name, value)
+            }
+        }
+        return client.addCounter(req)
+    }
+}

components/supervisor/frontend/src/index.ts

@@ -8,7 +8,11 @@
  * <script type="text/javascript" src="/_supervisor/frontend/main.js" charset="utf-8"></script> should be inserted to index.html as first body script,
  * all other IDE scripts should go afterwards, head element should not have scripts
  */
-
+import { IDEMetricsServiceClient, MetricsName } from "./ide/ide-metrics-service-client";
+IDEMetricsServiceClient.addCounter(MetricsName.SupervisorFrontendClientTotal).catch(() => {})
+window.addEventListener('error', () => {
+    IDEMetricsServiceClient.addCounter(MetricsName.SupervisorFrontendErrorTotal).catch(() => {})
+})
 require('../src/shared/index.css');
 
 import { createGitpodService, WorkspaceInstancePhase } from "@gitpod/gitpod-protocol";