feat: posthog (#99)

* feat: added posthog analytics
phasehq · Nov 2, 2023 · bc54389 · bc54389
1 parent b171f10
commit bc54389
Show file tree

Hide file tree

Showing 28 changed files with 106 additions and 43 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -31,6 +31,7 @@ services:
       BACKEND_API_BASE: "http://backend:8000"
       NEXT_PUBLIC_BACKEND_API_BASE: "${HTTP_PROTOCOL}${HOST}/service"
       NEXT_PUBLIC_NEXTAUTH_PROVIDERS: "${SSO_PROVIDERS}"
+      NEXT_PUBLIC_POSTHOG_KEY: "${NEXT_PUBLIC_POSTHOG_KEY}"
     networks:
       - phase-net
 

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -33,6 +33,7 @@ COPY --chown=app:app . .
 ARG NEXT_PUBLIC_BACKEND_API_BASE=BAKED_NEXT_PUBLIC_BACKEND_API_BASE
 ARG NEXT_PUBLIC_NEXTAUTH_PROVIDERS=BAKED_NEXT_PUBLIC_NEXTAUTH_PROVIDERS
 ARG NEXT_PUBLIC_APP_HOST=BAKED_NEXT_PUBLIC_APP_HOST
+ARG NEXT_PUBLIC_POSTHOG_KEY=BAKED_NEXT_PUBLIC_POSTHOG_KEY
 RUN yarn build
 
 # ---- Release ----

diff --git a/frontend/Dockerfile.dev b/frontend/Dockerfile.dev
@@ -6,12 +6,12 @@ WORKDIR /app
 
 # Copy over package files 
 COPY package.json ./
-COPY package-lock.json ./
+COPY yarn.lock ./
 
 # Install dependencies
-RUN npm install
+RUN yarn install --frozen-lockfile --no-cache && yarn cache clean
 
 # Copy all files 
 COPY . .
 
-CMD ["npm", "run", "dev"]
+CMD ["yarn", "dev"]
diff --git a/frontend/apollo/client.ts b/frontend/apollo/client.ts
@@ -5,8 +5,10 @@ import { signOut, SignOutParams } from 'next-auth/react'
 import { UrlUtils } from '@/utils/auth'
 import axios from 'axios'
 import { toast } from 'react-toastify'
+import posthog from 'posthog-js'
 
 export const handleSignout = async (options?: SignOutParams<true> | undefined) => {
+  posthog.reset()
   const response = await axios.post(
     UrlUtils.makeUrl(process.env.NEXT_PUBLIC_BACKEND_API_BASE!, 'logout'),
     {},

diff --git a/frontend/app/[team]/apps/[app]/members/page.tsx b/frontend/app/[team]/apps/[app]/members/page.tsx
@@ -410,7 +410,7 @@ export default function Members({ params }: { params: { team: string; app: strin
                                         minLength={16}
                                         required
                                         autoFocus
-                                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                                       />
                                       <button
                                         className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
@@ -820,7 +820,7 @@ export default function Members({ params }: { params: { team: string; app: strin
                               minLength={16}
                               required
                               autoFocus
-                              className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                              className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                             />
                             <button
                               className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"

diff --git a/frontend/app/[team]/apps/[app]/page.tsx b/frontend/app/[team]/apps/[app]/page.tsx
@@ -234,7 +234,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
           <div className="flex justify-between items-center w-full">
             <code
               className={clsx(
-                'break-all whitespace-break-spaces max-w-full',
+                'break-all whitespace-break-spaces max-w-full ph-no-capture',
                 sameAsProd ? 'text-amber-500' : 'text-emerald-500'
               )}
             >
@@ -299,7 +299,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
             >
               <td
                 className={clsx(
-                  'px-6 py-3 whitespace-nowrap font-mono text-zinc-800 dark:text-zinc-300 flex items-center gap-2',
+                  'px-6 py-3 whitespace-nowrap font-mono text-zinc-800 dark:text-zinc-300 flex items-center gap-2 ph-no-capture',
                   open ? 'font-bold' : 'font-medium'
                 )}
               >

diff --git a/frontend/app/[team]/apps/[app]/tokens/page.tsx b/frontend/app/[team]/apps/[app]/tokens/page.tsx
@@ -231,7 +231,9 @@ export default function Tokens({ params }: { params: { team: string; app: string
             </div>
             {!appSecret && <RotateAppDialog />}
           </div>
-          <code className="text-xs text-red-500">{appSecret || appSecretPlaceholder}</code>
+          <code className="text-xs text-red-500 ph-no-capture">
+            {appSecret || appSecretPlaceholder}
+          </code>
         </div>
       </div>
     )

diff --git a/frontend/app/[team]/newdevice/page.tsx b/frontend/app/[team]/newdevice/page.tsx
@@ -241,7 +241,7 @@ export default function NewDevice({ params }: { params: { team: string } }) {
                       minLength={16}
                       required
                       autoFocus
-                      className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                      className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                     />
                     <button
                       className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"

diff --git a/frontend/app/[team]/settings/page.tsx b/frontend/app/[team]/settings/page.tsx
@@ -133,7 +133,7 @@ const ViewRecoveryDialog = () => {
                                 minLength={16}
                                 required
                                 autoFocus
-                                className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                                className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                               />
                               <button
                                 className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"

diff --git a/frontend/app/[team]/tokens/page.tsx b/frontend/app/[team]/tokens/page.tsx
@@ -206,7 +206,9 @@ const CreateUserTokenDialog = (props: { organisationId: string }) => {
                             )}
                           </div>
                         </div>
-                        <code className="text-xs break-all text-blue-500">{userToken}</code>
+                        <code className="text-xs break-all text-blue-500 ph-no-capture">
+                          {userToken}
+                        </code>
                       </div>
                     </div>
                   ) : (

diff --git a/frontend/app/providers.tsx b/frontend/app/providers.tsx
@@ -6,14 +6,23 @@ import { ApolloProvider } from '@apollo/client'
 import { graphQlClient } from '@/apollo/client'
 import { KeyringProvider } from '@/contexts/keyringContext'
 import { OrganisationProvider } from '@/contexts/organisationContext'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+import { initializePostHog } from '@/utils/posthog'
+
+const IS_CLOUD_HOSTED = process.env.APP_HOST || process.env.NEXT_PUBLIC_APP_HOST
+
+if (IS_CLOUD_HOSTED) initializePostHog()
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider>
       <SessionProvider>
         <ApolloProvider client={graphQlClient}>
           <OrganisationProvider>
-            <KeyringProvider>{children}</KeyringProvider>
+            <KeyringProvider>
+              <PostHogProvider client={posthog}>{children}</PostHogProvider>
+            </KeyringProvider>
           </OrganisationProvider>
         </ApolloProvider>
       </SessionProvider>

diff --git a/frontend/app/webauth/[requestCode]/page.tsx b/frontend/app/webauth/[requestCode]/page.tsx
@@ -243,7 +243,7 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                         minLength={16}
                         required
                         autoFocus
-                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                       />
                       <button
                         className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
@@ -358,7 +358,7 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                   )}
                 </div>
               </div>
-              <code className="text-xs break-all text-blue-500">{userToken}</code>
+              <code className="text-xs break-all text-blue-500 ph-no-capture">{userToken}</code>
             </div>
           </div>
 

diff --git a/frontend/components/apps/NewAppDialog.tsx b/frontend/components/apps/NewAppDialog.tsx
@@ -510,7 +510,7 @@ export default function NewAppDialog(props: {
                                 type={showPw ? 'text' : 'password'}
                                 minLength={16}
                                 required
-                                className="w-full "
+                                className="w-full ph-no-capture"
                               />
                               <button
                                 className="absolute inset-y-0 right-4"

diff --git a/frontend/components/apps/tokens/SecretTokens.tsx b/frontend/components/apps/tokens/SecretTokens.tsx
@@ -280,7 +280,9 @@ const CreateServiceTokenDialog = (props: { organisationId: string; appId: string
                             )}
                           </div>
                         </div>
-                        <code className="text-xs break-all text-teal-500">{serviceToken}</code>
+                        <code className="text-xs break-all text-teal-500 ph-no-capture">
+                          {serviceToken}
+                        </code>
                       </div>
                     </div>
                   ) : (

diff --git a/frontend/components/auth/UnlockKeyringDialog.tsx b/frontend/components/auth/UnlockKeyringDialog.tsx
@@ -110,7 +110,7 @@ export default function UnlockKeyringDialog(props: { organisationId: string }) {
                             minLength={16}
                             required
                             autoFocus
-                            className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                            className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                           />
                           <button
                             className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"

diff --git a/frontend/components/environments/SecretPropertyDiffs.tsx b/frontend/components/environments/SecretPropertyDiffs.tsx
@@ -30,8 +30,10 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.key !== previousItem.key && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">KEY:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.key}</s>
-          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-no-capture">
+            {previousItem.key}
+          </s>
+          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500 ph-no-capture">
             {historyItem!.key}
           </span>
         </div>
@@ -40,8 +42,10 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.value !== previousItem.value && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">VALUE:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.value}</s>
-          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-no-capture">
+            {previousItem.value}
+          </s>
+          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500 ph-no-capture">
             {historyItem!.value}
           </span>
         </div>
@@ -50,8 +54,10 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.comment !== previousItem.comment && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">COMMENT:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.comment}</s>
-          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-no-capture">
+            {previousItem.comment}
+          </s>
+          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500 ph-no-capture">
             {historyItem!.comment}
           </span>
         </div>

diff --git a/frontend/components/environments/SecretRow.tsx b/frontend/components/environments/SecretRow.tsx
@@ -184,7 +184,7 @@ const TagsDialog = (props: {
                   <Dialog.Title as="div" className="flex w-full justify-between">
                     <h3 className="text-lg font-medium leading-6 text-black dark:text-white ">
                       Update{' '}
-                      <span className="text-zinc-700 dark:text-zinc-200 font-mono">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-mono ph-no-capture">
                         {secretName}
                       </span>{' '}
                       tags
@@ -301,7 +301,7 @@ const HistoryDialog = (props: { secret: SecretType }) => {
                 <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-900 p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title as="div" className="flex w-full justify-between">
                     <h3 className="text-lg font-medium leading-6 text-black dark:text-white ">
-                      <span className="text-zinc-700 dark:text-zinc-200 font-mono">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-mono ph-no-capture">
                         {secret.key}
                       </span>{' '}
                       history
@@ -428,7 +428,7 @@ const CommentDialog = (props: {
                   <Dialog.Title as="div" className="flex w-full justify-between">
                     <h3 className="text-lg font-medium leading-6 text-black dark:text-white ">
                       Update{' '}
-                      <span className="text-zinc-700 dark:text-zinc-200 font-mono">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-mono ph-no-capture">
                         {secretName}
                       </span>{' '}
                       comment
@@ -439,7 +439,7 @@ const CommentDialog = (props: {
                     </Button>
                   </Dialog.Title>
 
-                  <div className="space-y-6 p-4">
+                  <div className="space-y-6 p-4 ph-no-capture">
                     <textarea
                       rows={5}
                       value={commentValue}
@@ -519,7 +519,7 @@ const DeleteConfirmDialog = (props: {
                   <Dialog.Title as="div" className="flex w-full justify-between">
                     <h3 className="text-lg font-medium leading-6 text-black dark:text-white ">
                       Delete{' '}
-                      <span className="text-zinc-700 dark:text-zinc-200 font-mono">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-mono ph-no-capture">
                         {secretName}
                       </span>
                     </h3>
@@ -576,7 +576,7 @@ export default function SecretRow(props: {
   }
 
   const INPUT_BASE_STYLE =
-    'w-full text-zinc-800 font-mono custom bg-zinc-100 dark:bg-zinc-800 dark:text-white transition ease'
+    'w-full text-zinc-800 font-mono custom bg-zinc-100 dark:bg-zinc-800 dark:text-white transition ease ph-no-capture'
 
   const keyIsBlank = secret.key.length === 0
 

diff --git a/frontend/components/logs/SecretLogs.tsx b/frontend/components/logs/SecretLogs.tsx
@@ -194,12 +194,6 @@ export default function SecretLogs(props: { app: string }) {
         // Decrypt event fields
         decryptedEvent!.key = await decryptAsymmetric(event!.key, privateKey, publicKey)
 
-        // decryptedEvent!.value = await decryptAsymmetric(event!.value, privateKey, publicKey)
-
-        // if (decryptedEvent!.comment !== '') {
-        //   decryptedEvent!.comment = await decryptAsymmetric(event!.comment, privateKey, publicKey)
-        // }
-
         setDecryptedEvent(decryptedEvent)
       }
 
@@ -319,7 +313,9 @@ export default function SecretLogs(props: { app: string }) {
 
                   <div className="grid grid-cols-1 md:grid-cols-2 w-full gap-4 text-sm">
                     <LogField label="Key">
-                      <div className="flex items-center gap-2">{decryptedEvent?.key}</div>
+                      <div className="flex items-center gap-2 ph-no-capture">
+                        {decryptedEvent?.key}
+                      </div>
                     </LogField>
 
                     <LogField label="IP address"> {log.ipAddress}</LogField>

diff --git a/frontend/components/onboarding/AccountPassword.tsx b/frontend/components/onboarding/AccountPassword.tsx
@@ -73,7 +73,7 @@ export const AccountPassword = (props: AccountPasswordProps) => {
             type={showPw ? 'text' : 'password'}
             minLength={16}
             required
-            className="w-full "
+            className="w-full ph-no-capture"
           />
           <button
             className="absolute inset-y-0 right-4 text-neutral-500"
@@ -98,7 +98,7 @@ export const AccountPassword = (props: AccountPasswordProps) => {
             type={showPw2 ? 'text' : 'password'}
             minLength={16}
             required
-            className="w-full"
+            className="w-full ph-no-capture"
           />
           <button
             className="absolute inset-y-0 right-4 text-neutral-500"

diff --git a/frontend/components/onboarding/AccountSeedChecker.tsx b/frontend/components/onboarding/AccountSeedChecker.tsx
@@ -29,7 +29,7 @@ export const AccountSeedChecker = (props: AccountSeedCheckProps) => {
             readOnly={isCorrect(index) ? true : false}
             //maxLength={25}
             className={clsx(
-              'font-mono w-full',
+              'font-mono w-full ph-no-capture',
               isCorrect(index) && '!bg-emerald-400/20 !text-emerald-500'
             )}
           />

diff --git a/frontend/components/onboarding/AccountSeedGen.tsx b/frontend/components/onboarding/AccountSeedGen.tsx
@@ -28,7 +28,7 @@ export const AccountSeedGen = (props: { mnemonic: string }) => {
           key={word + index}
         >
           <span className="text-zinc-400 dark:text-zinc-700">{index + 1}</span>
-          <span className="hidden group-hover:block">{word}</span>
+          <span className="hidden group-hover:block ph-no-capture">{word}</span>
           <span className="group-hover:hidden">*****</span>
         </div>
       ))}

diff --git a/frontend/contexts/organisationContext.tsx b/frontend/contexts/organisationContext.tsx
@@ -5,6 +5,7 @@ import UpdateWrappedSecrets from '@/graphql/mutations/organisation/updateUserWra
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client'
 import { useSession } from 'next-auth/react'
 import { getLocalKeyring } from '@/utils/localStorage'
+import posthog from 'posthog-js'
 
 interface OrganisationContextValue {
   activeOrganisation: OrganisationType | null
@@ -37,6 +38,17 @@ export const OrganisationProvider: React.FC<OrganisationProviderProps> = ({ chil
 
   const { organisations } = orgsData ?? { organisations: null }
 
+  useEffect(() => {
+    if (session && organisation) {
+      if (session.user?.email)
+        posthog.identify(organisation.memberId!, {
+          email: session.user.email,
+          name: session.user.name,
+          organisation: organisation.name,
+        })
+    } else posthog.reset()
+  }, [organisation, session])
+
   useEffect(() => {
     if (session?.user?.email) getOrgs()
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -1,14 +1,14 @@
 /** @type {import('next').NextConfig} */
 const ContentSecurityPolicy = `
   default-src 'self';
-  script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval';
+  script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://app.posthog.com;
   style-src 'self' 'unsafe-inline';
   object-src 'none';
   base-uri 'self';
-  connect-src 'self' data: http://127.0.0.1:* https://*.phase.dev https://phase.statuspage.io/api/v2/status.json;
+  connect-src 'self' data: http://127.0.0.1:* https://*.phase.dev https://phase.statuspage.io/api/v2/status.json https://app.posthog.com; 
   font-src 'self';
   frame-src 'self';
-  img-src 'self' https://lh3.googleusercontent.com https://avatars.githubusercontent.com https://secure.gravatar.com https://gitlab.com;
+  img-src 'self' https://lh3.googleusercontent.com https://avatars.githubusercontent.com https://secure.gravatar.com https://gitlab.com; 
   manifest-src 'self';
   media-src 'self';
   worker-src 'none';

diff --git a/frontend/package.json b/frontend/package.json
@@ -34,6 +34,7 @@
     "next": "13.1.6",
     "next-auth": "^4.20.1",
     "npm": "^9.5.0",
+    "posthog-js": "^1.87.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
-Original file line number
+Diff line change
@@ Expand Up @@
                                 )}
                               </div>
                             </div>
-                            <code className="text-xs break-all text-blue-500">{userToken}</code>
+                            <code className="text-xs break-all text-blue-500 ph-no-capture">
+                              {userToken}
+                            </code>
                           </div>
                         </div>
                       ) : (
@@ Expand Down @@