Pre-bake some vars and change telemetry handling

frontend/Dockerfile

@@ -1,3 +1,6 @@
+ARG POSTHOG_HOST=https://app.posthog.com
+ARG POSTHOG_API_KEY=posthog-api-key
+
 FROM node:16-alpine AS deps
 # Install dependencies only when needed. Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 # RUN apk add --no-cache libc6-compat
@@ -19,23 +22,34 @@ COPY --from=deps /app/node_modules ./node_modules
 # Copy all files 
 COPY . .
 
+ENV NODE_ENV production
+ENV NEXT_PUBLIC_ENV production
+ARG POSTHOG_HOST
+ENV NEXT_PUBLIC_POSTHOG_HOST $POSTHOG_HOST
+ARG POSTHOG_API_KEY
+ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
+
 # Build
 RUN npm run build
 
 
-# Production image, copy all the files and run next
+# Production image
 FROM node:16-alpine AS runner
 WORKDIR /app
 
-ENV NODE_ENV production
-
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-COPY --from=builder /app/public ./public
+RUN mkdir -p /app/.next/cache/images && chown nextjs:nodejs /app/.next/cache/images
+VOLUME /app/.next/cache/images
 
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
+ARG POSTHOG_API_KEY
+ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
+    BAKED_NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY
+
+COPY --chown=nextjs:nodejs --chmod=555 scripts ./scripts
+COPY --from=builder /app/public ./public
+RUN chown nextjs:nodejs ./public/data
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
@@ -44,6 +58,7 @@ USER nextjs
 EXPOSE 3000
 
 ENV PORT 3000
+ENV NEXT_TELEMETRY_DISABLED 1
 
 
-CMD ["node", "server.js"]
+CMD ["/app/scripts/start.sh"]

frontend/components/analytics/posthog.js

@@ -4,12 +4,11 @@ import {
   ENV,
   POSTHOG_API_KEY,
   POSTHOG_HOST,
-  TELEMETRY_ENABLED,
 } from "../utilities/config";
 
 export const initPostHog = () => {
   if (typeof window !== "undefined") {
-    if (ENV == "production" && TELEMETRY_ENABLED) {
+    if (ENV == "production" && TELEMETRY_CAPTURING_ENABLED) {
       posthog.init(POSTHOG_API_KEY, {
         api_host: POSTHOG_HOST,
       });

frontend/components/utilities/attemptLogin.js

@@ -4,10 +4,9 @@ import login2 from "~/pages/api/auth/Login2";
 import getOrganizations from "~/pages/api/organization/getOrgs";
 import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
 
-import { initPostHog } from "../analytics/posthog";
 import pushKeys from "./secrets/pushKeys";
-import { ENV } from "./config";
 import SecurityClient from "./SecurityClient";
+import Telemetry from "./telemetry/Telemetry";
 
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
@@ -33,6 +32,8 @@ const attemptLogin = async (
 ) => {
   try {
     let userWorkspace, userOrg;
+    const telemetry = new Telemetry().getInstance();
+
     client.init(
       {
         username: email,
@@ -159,16 +160,9 @@ const attemptLogin = async (
               "Development"
             );
           }
-          try {
-            if (email) {
-              if (ENV == "production") {
-                const posthog = initPostHog();
-                posthog.identify(email);
-                posthog.capture("User Logged In");
-              }
-            }
-          } catch (error) {
-            console.log("posthog", error);
+          if (email) {
+            telemetry.identify(email);
+            telemetry.capture("User Logged In");
           }
 
           if (isLogin) {

frontend/components/utilities/config/index.ts

@@ -4,8 +4,6 @@ const POSTHOG_HOST =
   process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
-const TELEMETRY_ENABLED =
-  process.env.NEXT_PUBLIC_TELEMETRY_ENABLED! !== "false";
 
 export {
   ENV,
@@ -13,5 +11,4 @@ export {
   POSTHOG_HOST,
   STRIPE_PRODUCT_PRO,
   STRIPE_PRODUCT_STARTER,
-  TELEMETRY_ENABLED,
 };

frontend/components/utilities/telemetry/Telemetry.js

@@ -0,0 +1,43 @@
+import { initPostHog } from "~/components/analytics/posthog";
+import { ENV } from "~/components/utilities/config";
+
+class Capturer {
+  constructor() {
+      this.api = initPostHog();
+  }
+
+  capture(item) {
+    if (ENV == "production" && TELEMETRY_CAPTURING_ENABLED) {
+      try {
+        api.capture(item);
+      } catch (error) {
+        console.error("PostHog", error);
+      }
+    }
+  }
+
+  identify(id) {
+    if (ENV == "production" && TELEMETRY_CAPTURING_ENABLED) {
+      try {
+        api.identify(id);
+      } catch (error) {
+        console.error("PostHog", error);
+      }
+    }
+  }
+
+}
+
+class Telemetry {
+  constructor() {
+      if (!Telemetry.instance) {
+        Telemetry.instance = new Capturer();
+      }
+  }
+
+  getInstance() {
+      return Telemetry.instance;
+  }
+}
+
+module.exports = Telemetry;

frontend/pages/_app.js

@@ -2,11 +2,10 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import { config } from "@fortawesome/fontawesome-svg-core";
 
-import { initPostHog } from "~/components/analytics/posthog";
 import Layout from "~/components/basic/layout";
 import RouteGuard from "~/components/RouteGuard";
 import { publicPaths } from "~/const";
-import { ENV } from "~/utilities/config";
+import Telemetry from "~/utilities/telemetry/Telemetry";
 
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import "../styles/globals.css";
@@ -15,17 +14,14 @@ config.autoAddCss = false;
 
 const App = ({ Component, pageProps, ...appProps }) => {
   const router = useRouter();
-  const posthog = initPostHog();
 
   useEffect(() => {
     // Init for auto capturing
-    const posthog = initPostHog();
+    const telemetry = new Telemetry().getInstance();
 
     const handleRouteChange = () => {
       if (typeof window !== "undefined") {
-        if (ENV == "production") {
-          posthog.capture("$pageview");
-        }
+        telemetry.capture("$pageview");
       }
     };
 

frontend/scripts/replace-variable.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+
+ORIGINAL=$1
+REPLACEMENT=$2
+
+if [ "${ORIGINAL}" = "${REPLACEMENT}" ]; then
+    echo "Replacement is the same, skipping.."
+    exit 0
+fi
+
+echo "Replacing pre-baked value.."
+
+find /app/public /app/.next -type f ! -name "*.png" ! -name "*.svg" ! -name "*.gif" ! -name "*.jpg" ! -name "*.jpeg" ! -name "*.ico" |
+while read file; do
+    sed -i "s|$ORIGINAL|$REPLACEMENT|g" "$file"
+done

frontend/scripts/set-telemetry.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+VALUE=$1
+
+find /app/public /app/.next -type f ! -name "*.png" ! -name "*.svg" ! -name "*.gif" ! -name "*.jpg" ! -name "*.jpeg" ! -name "*.ico" |
+while read file; do
+    sed -i "s|TELEMETRY_CAPTURING_ENABLED|$VALUE|g" "$file"
+done

frontend/scripts/start.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+scripts/replace-variable.sh "$BAKED_NEXT_PUBLIC_POSTHOG_API_KEY" "$NEXT_PUBLIC_POSTHOG_API_KEY"
+
+if [ "$INFISICAL_TELEMETRY_ENABLED" != "false" ]; then
+    echo "Telemetry is enabled"
+    scripts/set-telemetry.sh true
+else
+    echo "Client opted out of telemetry"
+    scripts/set-telemetry.sh false
+fi
+
+
+node server.js