Add telemetry to frontend

This commit is contained in:
Vladyslav Matsiiako
2022-11-25 16:08:56 -05:00
parent d70d1f23d8
commit 22e7137e74
7 changed files with 35 additions and 14 deletions

View File

@@ -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,
});
}
}

View File

@@ -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"

View File

@@ -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}) => {

View File

@@ -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");

View File

@@ -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
};

View File

@@ -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");
}
}

View File

@@ -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,