Add telemetry for certain events (#28)

.github/workflows/deploy.yml

@@ -20,6 +20,9 @@ jobs:
         working-directory: ./client
         run: |
           npm run build
+        env:
+          SUPABASE_PROJECT_ID: ${{ secrets.SUPABASE_PROJECT_ID }}
+          SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
       - name: Publish
         uses: netlify/actions/cli@master
         with:

client/css/styles.scss

@@ -145,6 +145,11 @@ datalist {
 
   > input[type="range"] {
     width: 100px;
+
+    &::-webkit-slider-runnable-track {
+      background: #007aff;
+      border-radius: 48px;
+    }
   }
 
   > select.fullWidth {
@@ -254,6 +259,7 @@ select {
   padding: 2px;
   background-color: white;
   color: black;
+  border-radius: 4px;
 
   &:not(:disabled)hover {
     opacity: 0.9;

client/js/MandelbrotControls.ts

@@ -2,6 +2,7 @@ import * as L from "leaflet";
 import debounce from "lodash/debounce";
 import type MandelbrotMap from "./MandelbrotMap";
 import throttle from "lodash/throttle";
+import api from "./api";
 
 type NumberInput = {
   id: "iterations" | "exponent" | "re" | "im" | "zoom";
@@ -125,6 +126,20 @@ class MandelbrotControls {
     }, 300);
   }
 
+  private async logEvent(eventName: "image_save" | "share") {
+    await api.client?.from("events").insert([
+      {
+        event_name: eventName,
+        share_url: this.getShareUrl(),
+        re: String(this.map.config.re),
+        im: String(this.map.config.im),
+        zoom: this.map.config.zoom,
+        iterations: this.map.config.iterations,
+        session_id: api.sessionId,
+      },
+    ]);
+  }
+
   private handleSaveImageButton() {
     let isSavingImage = false;
 
@@ -197,6 +212,8 @@ class MandelbrotControls {
       saveImageSubmitButton.setAttribute("disabled", "true");
       closeModalButton.setAttribute("disabled", "true");
 
+      this.logEvent("image_save");
+
       this.map
         .saveVisibleImage(width, height)
         .catch((error) => {
@@ -261,6 +278,7 @@ class MandelbrotControls {
       navigator.clipboard.writeText(this.getShareUrl()).then(() => {
         alert("The URL for this view has been copied!");
       });
+      this.logEvent("share");
     };
   }
 

client/js/api.ts

@@ -0,0 +1,21 @@
+import { createClient } from "@supabase/supabase-js";
+
+const client =
+  process.env.SUPABASE_PROJECT_ID && process.env.SUPABASE_ANON_KEY
+    ? createClient(
+        `https://${process.env.SUPABASE_PROJECT_ID}.supabase.co`,
+        process.env.SUPABASE_ANON_KEY,
+      )
+    : null;
+
+let sessionId = `${Math.random()}|${Date.now()}`;
+try {
+  sessionId = self.crypto.randomUUID() || sessionId;
+} catch (e) {
+  console.warn("crypto.randomUUID() not available");
+}
+
+export default {
+  client,
+  sessionId,
+};

client/package.json

@@ -27,6 +27,7 @@
     "@typescript-eslint/parser": "^6.20.0",
     "@wasm-tool/wasm-pack-plugin": "^1.7.0",
     "css-loader": "^6.9.1",
+    "dotenv-webpack": "^8.1.0",
     "eslint": "^8.56.0",
     "file-loader": "^6.2.0",
     "front-matter": "^4.0.2",
@@ -43,6 +44,7 @@
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.45.2",
     "file-saver": "^2.0.5",
     "leaflet": "1.7.1",
     "lodash": "^4.17.21",

client/webpack.config.js

@@ -7,6 +7,7 @@ const { marked } = require("marked");
 const frontMatter = require("front-matter");
 const fs = require("fs");
 const template = require("lodash/template");
+const Dotenv = require("dotenv-webpack");
 
 const blogDir = "./blog";
 for (const file of fs.readdirSync(blogDir)) {
@@ -37,6 +38,9 @@ for (const file of fs.readdirSync(blogDir)) {
 const appConfig = {
   entry: "./js/main.ts",
   plugins: [
+    new Dotenv({
+      systemvars: true,
+    }),
     new HtmlWebpackPlugin({
       template: "html/index.html",
       root: path.resolve(__dirname, "."),