Add telemetry to frontend

Author: vmatsiiako

frontend/components/analytics/posthog.js

@@ -1,10 +1,11 @@
 import posthog from "posthog-js";
+import { ENV, POSTHOG_API_KEY, POSTHOG_HOST, TELEMETRY_ENABLED } from "../utilities/config";
 
 export const initPostHog = () => {
 	if (typeof window !== "undefined") {
-		if (process.env.NEXT_PUBLIC_ENV == "production") {
-			posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY, {
-				api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+		if (ENV == "production" && TELEMETRY_ENABLED) {
+			posthog.init(POSTHOG_API_KEY, {
+				api_host: POSTHOG_HOST,
 			});
 		}
 	}

frontend/components/basic/dialog/AddUserDialog.js

@@ -3,6 +3,7 @@ import { Fragment } from "react";
 import InputField from "../InputField";
 import { useRouter } from "next/router";
 import Button from "../buttons/Button";
+import { STRIPE_PRODUCT_STARTER } from "../../utilities/config";
 
 const AddUserDialog = ({
 	isOpen,
@@ -70,7 +71,7 @@ const AddUserDialog = ({
 											isRequired
 										/>
 									</div>
-									{currentPlan == process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER && <div className="flex flex-row">
+									{currentPlan == STRIPE_PRODUCT_STARTER && <div className="flex flex-row">
 										<button
 											type="button"
 											className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"

frontend/components/dashboard/DashboardInputField.js

@@ -6,7 +6,7 @@ import guidGenerator from "../utilities/randomId";
 
 /**
  * This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
- * @param {*} text - the value of the input in the Dashboard Input Field
+ * @param {string} text - the value of the input in the Dashboard Input Field
  * @returns 
  */
 const findReferences = (text) => {
@@ -25,11 +25,12 @@ const findReferences = (text) => {
 
 /**
  * This component renders the input fields on the dashboard
- * @param {*} index - the order number of a keyPair 
- * @param {*} onChangeHandler - what happens when the input is modified
- * @param {*} type - whether the input field is for a Key Name or for a Key Value
- * @param {*} value - value of the InputField 
- * @param {*} blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
+ * @param {object} obj - the order number of a keyPair 
+ * @param {number} obj.index - the order number of a keyPair 
+ * @param {function} obj.onChangeHandler - what happens when the input is modified
+ * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
+ * @param {string} obj.value - value of the InputField 
+ * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
  * @returns 
  */
 const DashboardInputField = ({index, onChangeHandler, type, value, blurred}) => {

frontend/components/utilities/attemptLogin.js

@@ -6,6 +6,7 @@ import { initPostHog } from "../analytics/posthog";
 import getOrganizations from "../../pages/api/organization/getOrgs";
 import getOrganizationUserProjects from "../../pages/api/organization/GetOrgUserProjects";
 import SecurityClient from "./SecurityClient";
+import { ENV } from "./config";
 
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
@@ -154,7 +155,7 @@ const attemptLogin = async (
 					}
 					try {
 						if (email) {
-							if (process.env.NEXT_PUBLIC_ENV == "production") {
+							if (ENV == "production") {
 								const posthog = initPostHog();
 								posthog.identify(email);
 								posthog.capture("User Logged In");

frontend/components/utilities/config/index.ts

@@ -0,0 +1,15 @@
+const ENV = process.env.NEXT_PUBLIC_ENV! || 'development'; // investigate
+const POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY!;
+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,
+    POSTHOG_API_KEY,
+    POSTHOG_HOST,
+    STRIPE_PRODUCT_PRO,
+    STRIPE_PRODUCT_STARTER,
+    TELEMETRY_ENABLED
+};

frontend/pages/_app.js

@@ -7,6 +7,7 @@ import { publicPaths } from "../const.js";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 import { initPostHog } from "../components/analytics/posthog";
+import { ENV } from "../components/utilities/config";
 
 config.autoAddCss = false;
 
@@ -20,7 +21,7 @@ const App = ({ Component, pageProps, ...appProps }) => {
 
 		const handleRouteChange = () => {
 			if (typeof window !== "undefined") {
-				if (process.env.NEXT_PUBLIC_ENV == "production") {
+				if (ENV == "production") {
 					posthog.capture("$pageview");
 				}
 			}

frontend/pages/settings/billing/[id].js

@@ -4,6 +4,7 @@ import Plan from "../../../components/billing/Plan";
 import getOrganizationSubscriptions from "../../api/organization/GetOrgSubscription"
 import getOrganizationUsers from "../../api/organization/GetOrgUsers"
 import NavHeader from "../../../components/navigation/NavHeader";
+import { STRIPE_PRODUCT_PRO, STRIPE_PRODUCT_STARTER } from "../../../components/utilities/config";
 
 
 export default function SettingsBilling() {
@@ -20,7 +21,7 @@ export default function SettingsBilling() {
 			subtext: "$5 per member/month afterwards.",
 			buttonTextMain: "Downgrade",
 			buttonTextSecondary: "Learn More",
-			current: currentPlan == process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER,
+			current: currentPlan == STRIPE_PRODUCT_STARTER,
 		},
 		{
 			key: 2,
@@ -31,7 +32,7 @@ export default function SettingsBilling() {
 			text: "Keep up with key management as you grow.",
 			buttonTextMain: "Upgrade",
 			buttonTextSecondary: "Learn More",
-			current: currentPlan == process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO,
+			current: currentPlan == STRIPE_PRODUCT_PRO,
 		},
 		{
 			key: 3,