feat: add meticulous recorder (#13886)

Author: sreya

.github/workflows/ci.yaml

@@ -966,7 +966,7 @@ jobs:
         uses: actions/dependency-review-action@v4.3.2
         with:
           allow-licenses: Apache-2.0, 0BSD, BSD-2-Clause, BSD-3-Clause, CC0-1.0, ISC, MIT, MIT-0, MPL-2.0
-          allow-dependencies-licenses: "pkg:golang/github.com/coder/wgtunnel@0.1.13-0.20240522110300-ade90dfb2da0, pkg:npm/pako@1.0.11, pkg:npm/caniuse-lite@1.0.30001639"
+          allow-dependencies-licenses: "pkg:golang/github.com/coder/wgtunnel@0.1.13-0.20240522110300-ade90dfb2da0, pkg:npm/pako@1.0.11, pkg:npm/caniuse-lite@1.0.30001639, pkg:githubactions/alwaysmeticulous/report-diffs-action/cloud-compute"
           license-check: true
           vulnerability-check: false
       - name: "Report"
@@ -992,3 +992,23 @@ jobs:
             fi
           done
           echo "No incompatible licenses detected"
+  meticulous:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout Repository"
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+      - name: Build
+        working-directory: ./site
+        run: pnpm build
+      - name: Serve
+        working-directory: ./site
+        run: |
+          pnpm vite preview &
+          sleep 5
+      - name: Run Meticulous tests
+        uses: alwaysmeticulous/report-diffs-action/cloud-compute@v1
+        with:
+          api-token: ${{ secrets.METICULOUS_API_TOKEN }}
+          app-url: "http://127.0.0.1:4173/"

coderd/httpmw/csp.go

@@ -59,7 +59,7 @@ func CSPHeaders(telemetry bool, websocketHosts func() []string) func(next http.H
 				cspDirectiveConnectSrc: {"'self'"},
 				cspDirectiveChildSrc:   {"'self'"},
 				// https://github.com/suren-atoyan/monaco-react/issues/168
-				cspDirectiveScriptSrc: {"'self'"},
+				cspDirectiveScriptSrc: {"'self' "},
 				cspDirectiveStyleSrc:  {"'self' 'unsafe-inline'"},
 				// data: is used by monaco editor on FE for Syntax Highlight
 				cspDirectiveFontSrc:   {"'self' data:"},
@@ -88,6 +88,11 @@ func CSPHeaders(telemetry bool, websocketHosts func() []string) func(next http.H
 			if telemetry {
 				// If telemetry is enabled, we report to coder.com.
 				cspSrcs.Append(cspDirectiveConnectSrc, "https://coder.com")
+				// These are necessary to allow meticulous to collect sampling to
+				// improve our testing. Only remove these if we're no longer using
+				// their services.
+				cspSrcs.Append(cspDirectiveConnectSrc, meticulousConnectSrc...)
+				cspSrcs.Append(cspDirectiveScriptSrc, meticulousScriptSrc...)
 			}
 
 			// This extra connect-src addition is required to support old webkit
@@ -131,3 +136,8 @@ func CSPHeaders(telemetry bool, websocketHosts func() []string) func(next http.H
 		})
 	}
 }
+
+var (
+	meticulousConnectSrc = []string{"https://cognito-identity.us-west-2.amazonaws.com", "https://user-events-v3.s3-accelerate.amazonaws.com", "*.sentry.io"}
+	meticulousScriptSrc  = []string{"https://snippet.meticulous.ai", "https://browser.sentry-cdn.com"}
+)

site/package.json

@@ -30,6 +30,7 @@
     "deadcode": "ts-prune | grep -v \".stories\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo \"No deadcode found.\""
   },
   "dependencies": {
+    "@alwaysmeticulous/recorder-loader": "2.137.0",
     "@emoji-mart/data": "1.2.1",
     "@emoji-mart/react": "1.1.1",
     "@emotion/css": "11.11.2",

site/pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import { tryLoadAndStartRecorder } from "@alwaysmeticulous/recorder-loader";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
 
@@ -12,5 +13,30 @@ const element = document.getElementById("root");
 if (element === null) {
   throw new Error("root element is null");
 }
+
 const root = createRoot(element);
-root.render(<App />);
+async function startApp() {
+  // Record all sessions on localhost, staging stacks and preview URLs
+  if (isInternal()) {
+    // Start the Meticulous recorder before you initialise your app.
+    // Note: all errors are caught and logged, so no need to surround with try/catch
+    await tryLoadAndStartRecorder({
+      projectId: "Y4uHy1qs0B660xxUdrkLPkazUMPr6OuTqYEnShaR",
+      isProduction: false,
+    });
+  }
+
+  root.render(<App />);
+}
+
+function isInternal() {
+  return (
+    window.location.hostname.indexOf("dev.coder.com") > -1 ||
+    window.location.hostname.indexOf("localhost") > -1 ||
+    window.location.hostname.indexOf("127.0.0.1") > -1
+  );
+}
+
+startApp().catch((error) => {
+  console.error(error);
+});