disable posthog autotracking, send specific events via backend (#62)

2026-01-25 03:09:24 -06:00 · 2022-08-17 22:57:53 +02:00
parent b48018b2f8
commit f4f248860b
11 changed files with 48 additions and 91 deletions
--- a/components/form/NewFormModal.tsx
+++ b/components/form/NewFormModal.tsx
@@ -6,7 +6,6 @@ import { Fragment, useState } from "react";
 import { BsPlus } from "react-icons/bs";
 import { createForm } from "../../lib/forms";
 import { createNoCodeForm } from "../../lib/noCodeForm";
-import { trackPosthogEvent } from "../../lib/posthog";
 import { classNames } from "../../lib/utils";
 import StandardButton from "../StandardButton";

@@ -48,7 +47,6 @@ export default function NewFormModal({
    if (form.formType === "NOCODE") {
      await createNoCodeForm(form.id);
    }
-    trackPosthogEvent("newForm", { formType: form.formType });
    router.push(`/forms/${form.id}/form`);
  };

--- a/components/frontend/App.tsx
+++ b/components/frontend/App.tsx
@@ -1,7 +1,6 @@
 import { GlobeAltIcon, MailIcon, PhoneIcon } from "@heroicons/react/solid";
 import { SnoopElement, SnoopForm, SnoopPage } from "@snoopforms/react";
 import { useMemo } from "react";
-import { trackPosthogEvent } from "../../lib/posthog";
 import { generateId } from "../../lib/utils";
 import Loading from "../Loading";

@@ -45,11 +44,6 @@ export default function App({ id = "", formId, blocks, localOnly = false }) {
        formId={formId}
        localOnly={localOnly}
        className="w-full max-w-3xl mx-auto space-y-6"
-        onSubmit={() => {
-          if (!localOnly) {
-            trackPosthogEvent("submitForm", { formId });
-          }
-        }}
      >
        {pages.map((page, pageIdx) => (
          <SnoopPage
--- a/lib/apiEvents.ts
+++ b/lib/apiEvents.ts
@@ -1,5 +1,7 @@
 import { ApiEvent } from "./types";
 import { prisma } from "./prisma";
+import { caputurePosthogEvent } from "./posthog";
+import { generateId } from "./utils";

 type validationError = {
  status: number;
@@ -43,6 +45,7 @@ export const processApiEvent = async (event: ApiEvent, formId) => {
        submissionSession: { connect: { id: data.submissionSessionId } },
      },
    });
+    caputurePosthogEvent(generateId(10), "pageSubmission", { formId });
  } else if (event.type === "submissionCompleted") {
    // TODO
  } else if (event.type === "updateSchema") {
--- a/lib/posthog.ts
+++ b/lib/posthog.ts
@@ -1,48 +1,27 @@
-import { useRouter } from "next/router";
 import getConfig from "next/config";
-import posthog from "posthog-js";
-import { useEffect } from "react";
+import PostHog from "posthog-node";

-const { publicRuntimeConfig } = getConfig();
+const { serverRuntimeConfig } = getConfig();
 const enabled =
-  publicRuntimeConfig.posthogApiKey && publicRuntimeConfig.posthogApiHost;
+  serverRuntimeConfig.posthogApiKey && serverRuntimeConfig.posthogApiHost;

-export const usePosthog = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    if (enabled) {
-      // Init PostHog
-      posthog.init(publicRuntimeConfig.posthogApiKey, {
-        api_host: publicRuntimeConfig.posthogApiHost,
-        loaded: function (posthog) {
-          if (process.env.NODE_ENV === "development")
-            posthog.opt_out_capturing();
-        },
-      });
-    }
-    // Track page views
-    const handleRouteChange = () => {
-      if (enabled) {
-        posthog.capture("$pageview");
-      }
-    };
-    router.events.on("routeChangeComplete", handleRouteChange);
-
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, [router.events]);
-};
-
-export const trackPosthogEvent = (eventName: string, attributes: object) => {
-  if (enabled) {
-    posthog.capture(eventName, attributes);
+export const caputurePosthogEvent = (userId, eventName, properties = {}) => {
+  if (!enabled) {
+    return;
  }
-};
+  const client = new PostHog(
+    serverRuntimeConfig.posthogApiKey,
+    { host: serverRuntimeConfig.posthogApiHost } // You can omit this line if using PostHog Cloud
+  );

-export const identifyPoshogUser = (userId: string) => {
-  if (enabled) {
-    posthog.identify(userId);
-  }
+  console.log("send event!!!!!");
+
+  client.capture({
+    distinctId: userId,
+    event: eventName,
+    properties,
+  });
+
+  // On program exit, call shutdown to stop pending pollers and flush any remaining events
+  client.shutdown();
 };
--- a/next.config.js
+++ b/next.config.js
@@ -13,14 +13,14 @@ const nextConfig = {
    smtpUser: process.env.SMTP_USER,
    smtpPassword: process.env.SMTP_PASSWORD,
    smtpSecureEnabled: process.env.SMTP_SECURE_ENABLED,
+    posthogApiHost: process.env.POSTHOG_API_HOST,
+    posthogApiKey: process.env.POSTHOG_API_KEY,
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
-    posthogApiHost: process.env.POSTHOG_API_HOST,
-    posthogApiKey: process.env.POSTHOG_API_KEY,
    termsUrl: process.env.TERMS_URL,
    privacyUrl: process.env.PRIVACY_URL,
-    emailVerificationDisabled: process.env.EMAIL_VERIFICATION_DISABLED === '1'
+    emailVerificationDisabled: process.env.EMAIL_VERIFICATION_DISABLED === "1",
  },
  async redirects() {
    return [
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
    "next-auth": "^4.10.1",
    "nextjs-cors": "^2.1.1",
    "nodemailer": "^6.7.7",
-    "posthog-js": "^1.26.0",
+    "posthog-node": "^2.0.1",
    "react": "17.0.2",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "17.0.2",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,17 +1,15 @@
-import App, { AppProps } from "next/app";
-import { SessionProvider } from "next-auth/react";
-import { ToastContainer } from "react-toastify";
-import { usePosthog } from "../lib/posthog";
 import "highlight.js/styles/tokyo-night-dark.css";
-import "../styles/globals.css";
+import { SessionProvider } from "next-auth/react";
+import { AppProps } from "next/app";
+import { ToastContainer } from "react-toastify";
 import "../styles/editorjs.css";
+import "../styles/globals.css";
 import "../styles/toastify.css";

 function SnoopApp({
  Component,
  pageProps: { session, ...pageProps },
 }: AppProps) {
-  usePosthog();
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
@@ -20,11 +18,4 @@ function SnoopApp({
  );
 }

-SnoopApp.getInitialProps = async (appContext) => {
-  // calls page's `getInitialProps` and fills `appProps.pageProps`
-  const appProps = await App.getInitialProps(appContext);
-
-  return { ...appProps };
-};
-
 export default SnoopApp;
--- a/pages/api/forms/index.ts
+++ b/pages/api/forms/index.ts
@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "../../../lib/prisma";
 import { getSession } from "next-auth/react";
 import { generateId } from "../../../lib/utils";
+import { caputurePosthogEvent } from "../../../lib/posthog";

 export default async function handle(
  req: NextApiRequest,
@@ -56,6 +57,7 @@ export default async function handle(
        owner: { connect: { email: session?.user?.email } },
      },
    });
+    caputurePosthogEvent(session.user.email, "formCreated");
    res.json(result);
  }

--- a/pages/api/public/users/index.tsx
+++ b/pages/api/public/users/index.tsx
@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "../../../../lib/prisma";
 import { sendVerificationEmail } from "../../../../lib/email";
 import getConfig from "next/config";
+import { caputurePosthogEvent } from "../../../../lib/posthog";

 const { publicRuntimeConfig } = getConfig();

@@ -16,16 +17,17 @@ export default async function handle(
  if (req.method === "POST") {
    const user = req.body;

-    const { emailVerificationDisabled } = publicRuntimeConfig
+    const { emailVerificationDisabled } = publicRuntimeConfig;

    // create user in database
    try {
      const userData = await prisma.user.create({
        data: {
-          ...user
+          ...user,
        },
      });
      if (!emailVerificationDisabled) await sendVerificationEmail(userData);
+      caputurePosthogEvent(user.email, "userCreated");
      res.json(userData);
    } catch (e) {
      if (e.code === "P2002") {
--- a/pages/f/[id].tsx
+++ b/pages/f/[id].tsx
@@ -8,7 +8,7 @@ import Image from "next/image";

 export default function NoCodeFormPublic() {
  const router = useRouter();
-  const formId = router.query.id.toString();
+  const formId = router.query.id?.toString();
  const { noCodeForm, isLoadingNoCodeForm, isErrorNoCodeForm } =
    useNoCodeFormPublic(formId);

--- a/yarn.lock
+++ b/yarn.lock
@@ -232,11 +232,6 @@
  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27"
  integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==

-"@sentry/types@^7.2.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.9.0.tgz#8fa952865fda76f7c7c7fc6c84043979a22043ae"
-  integrity sha512-VGnUgELVMpGJCYW1triO+5XSyaPjB2Zu6esUgbb8iJ5bi+OWtxklixXgwhdaTb0FDzmRL/T/pckmrIuBTLySHQ==
-
 "@snoopforms/react@^0.2.2":
  version "0.2.2"
  resolved "https://registry.yarnpkg.com/@snoopforms/react/-/react-0.2.2.tgz#9f3020cca581d72056c405bbf1278d16aea7d30e"
@@ -1183,11 +1178,6 @@ fastq@^1.6.0:
  dependencies:
    reusify "^1.0.4"

-fflate@^0.4.1:
-  version "0.4.8"
-  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
-  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
-
 file-entry-cache@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -2131,14 +2121,12 @@ postcss@^8.4.13, postcss@^8.4.14:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-posthog-js@^1.26.0:
-  version "1.28.0"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.28.0.tgz#d1f0b7c51a5332aa5aaeb8afb91e17db0acd17e1"
-  integrity sha512-W60Xd7/UMwNO1zn1rRkkrE+qbL2dcA/PHi1TbUPNX0ArS2eijEjFolv0FBCEraZTJP19OnjTsYQEQS6fLL8ZvA==
+posthog-node@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/posthog-node/-/posthog-node-2.0.1.tgz#9e9a7da9a4c5618681369d698f1bd8bf8dd43872"
+  integrity sha512-VCn8bZMw2JkDr6V+S0c7hT3+yb3j8t9h7rpyVlYc+JGBcdrWzOtYCKvdCuvKw36JJTUej8MLVeVtr+hf6rdT8A==
  dependencies:
-    "@sentry/types" "^7.2.0"
-    fflate "^0.4.1"
-    rrweb-snapshot "^1.1.14"
+    undici "^5.8.0"

 preact-render-to-string@^5.1.19:
  version "5.2.1"
@@ -2350,11 +2338,6 @@ rimraf@^3.0.2:
  dependencies:
    glob "^7.1.3"

-rrweb-snapshot@^1.1.14:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
-  integrity sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ==
-
 run-parallel@^1.1.9:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -2682,6 +2665,11 @@ unbox-primitive@^1.0.2:
    has-symbols "^1.0.3"
    which-boxed-primitive "^1.0.2"

+undici@^5.8.0:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.9.1.tgz#fc9fd85dd488f965f153314a63d9426a11f3360b"
+  integrity sha512-6fB3a+SNnWEm4CJbgo0/CWR8RGcOCQP68SF4X0mxtYTq2VNN8T88NYrWVBAeSX+zb7bny2dx2iYhP3XHi00omg==
+
 update-browserslist-db@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38"