Feat: Upgrade Mixpanel browser and enable session replay (#3725)

packages/frontend-2/components/workspace/CreatePage.vue

@@ -31,12 +31,14 @@
 import { workspacesRoute } from '~~/lib/common/helpers/route'
 import { WizardSteps } from '~/lib/workspaces/helpers/types'
 import { useWorkspacesWizard } from '~/lib/workspaces/composables/wizard'
+import { useMixpanel } from '~/lib/core/composables/mp'
 
 defineProps<{
   workspaceId?: string
 }>()
 
 const { currentStep, resetWizardState } = useWorkspacesWizard()
+const mixpanel = useMixpanel()
 
 const isCancelDialogOpen = ref(false)
 
@@ -46,6 +48,7 @@ const onCancelClick = () => {
   if (isFirstStep.value) {
     navigateTo(workspacesRoute)
     resetWizardState()
+    mixpanel.stop_session_recording()
   } else {
     isCancelDialogOpen.value = true
   }

packages/frontend-2/components/workspace/wizard/CancelDialog.vue

@@ -97,5 +97,6 @@ const onConfirm = async () => {
   isOpen.value = false
   resetWizardState()
   mixpanel.track('Workspace Creation Canceled')
+  mixpanel.stop_session_recording()
 }
 </script>

packages/frontend-2/components/workspace/wizard/Wizard.vue

@@ -97,6 +97,10 @@ onResult((result) => {
   }
 })
 
+onMounted(() => {
+  mixpanel.start_session_recording()
+})
+
 watch(currentStep, (newStep, oldStep) => {
   if (newStep !== oldStep && showPaymentError.value) {
     showPaymentError.value = false

packages/frontend-2/lib/common/helpers/mp.ts

@@ -14,6 +14,8 @@ export type MixpanelClient = Merge<
     | 'add_group'
     | 'get_group'
     | 'alias'
+    | 'start_session_recording'
+    | 'stop_session_recording'
   >,
   {
     people: Pick<OverridedMixpanel['people'], 'set' | 'set_once'>
@@ -35,5 +37,7 @@ export const fakeMixpanelClient = (): MixpanelClient => ({
   },
   add_group: noop,
   get_group: noop as MixpanelClient['get_group'],
-  alias: noop
+  alias: noop,
+  start_session_recording: noop,
+  stop_session_recording: noop
 })

packages/frontend-2/lib/core/clients/mp.ts

@@ -101,7 +101,8 @@ export const useClientsideMixpanelClientBuilder = () => {
     // Init
     mixpanel.init(mixpanelTokenId, {
       api_host: mixpanelApiHost,
-      debug: !!import.meta.dev && logCsrEmitProps
+      debug: !!import.meta.dev && logCsrEmitProps,
+      record_sessions_percent: 0
     })
     const utmParams = collectUtmTags()
 

packages/frontend-2/lib/workspaces/composables/wizard.ts

@@ -115,6 +115,7 @@ export const useWorkspacesWizard = () => {
 
   const completeWizard = async () => {
     wizardState.value.isLoading = true
+    mixpanel.stop_session_recording()
 
     const needsCheckout =
       wizardState.value.state.plan !== PaidWorkspacePlans.Starter ||

packages/frontend-2/package.json

@@ -67,7 +67,7 @@
     "marked": "^5.1.0",
     "marked-plaintext": "^0.0.2",
     "mitt": "^3.0.0",
-    "mixpanel-browser": "^2.45.0",
+    "mixpanel-browser": "^2.58.0",
     "nanoid": "^3.0.0",
     "pino": "^8.14.1",
     "pino-http": "^8.3.3",
@@ -111,7 +111,7 @@
     "@types/jsdom": "^21.1.1",
     "@types/lodash-es": "^4.17.6",
     "@types/marked": "^5.0.0",
-    "@types/mixpanel-browser": "^2.38.0",
+    "@types/mixpanel-browser": "^2.50.2",
     "@types/node": "^18.17.5",
     "@types/pino-http": "^5.8.1",
     "@types/tryghost__content-api": "^1",

packages/frontend/package.json

@@ -75,7 +75,7 @@
     "@types/apollo-upload-client": "^17.0.1",
     "@types/dompurify": "^2.3.3",
     "@types/lodash": "^4.14.180",
-    "@types/mixpanel-browser": "^2.38.0",
+    "@types/mixpanel-browser": "^2.50.2",
     "@types/node": "^17.0.43",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",

packages/server/package.json

@@ -178,7 +178,7 @@
     "@types/verror": "^1.10.6",
     "@types/xml-escape": "^1.1.3",
     "@types/yargs": "^17.0.10",
-    "@types/zxcvbn": "^4.4.1",
+    "@types/zxcvbn": "^4.4.5",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
     "axios": "^1.7.4",

yarn.lock

@@ -15239,6 +15239,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rrweb/types@npm:^2.0.0-alpha.13":
+  version: 2.0.0-alpha.18
+  resolution: "@rrweb/types@npm:2.0.0-alpha.18"
+  checksum: 10/ddb632d49490ac6c20d011825b7b44e28a3783bbdabdf72f09649fdf2c5e107f756e7d926e5074b827c2311f28562905e8fa1911bbe8119ca014b3e24fb87f72
+  languageName: node
+  linkType: hard
+
 "@rushstack/eslint-patch@npm:^1.10.3":
   version: 1.10.3
   resolution: "@rushstack/eslint-patch@npm:1.10.3"
@@ -16757,7 +16764,7 @@ __metadata:
     "@types/jsdom": "npm:^21.1.1"
     "@types/lodash-es": "npm:^4.17.6"
     "@types/marked": "npm:^5.0.0"
-    "@types/mixpanel-browser": "npm:^2.38.0"
+    "@types/mixpanel-browser": "npm:^2.50.2"
     "@types/node": "npm:^18.17.5"
     "@types/pino-http": "npm:^5.8.1"
     "@types/tryghost__content-api": "npm:^1"
@@ -16787,7 +16794,7 @@ __metadata:
     marked-plaintext: "npm:^0.0.2"
     mitt: "npm:^3.0.0"
     mixpanel: "npm:^0.18.0"
-    mixpanel-browser: "npm:^2.45.0"
+    mixpanel-browser: "npm:^2.58.0"
     nanoid: "npm:^3.0.0"
     nuxt: "npm:^3.12.2"
     pino: "npm:^8.14.1"
@@ -16858,7 +16865,7 @@ __metadata:
     "@types/apollo-upload-client": "npm:^17.0.1"
     "@types/dompurify": "npm:^2.3.3"
     "@types/lodash": "npm:^4.14.180"
-    "@types/mixpanel-browser": "npm:^2.38.0"
+    "@types/mixpanel-browser": "npm:^2.50.2"
     "@types/node": "npm:^17.0.43"
     "@typescript-eslint/eslint-plugin": "npm:^7.12.0"
     "@typescript-eslint/parser": "npm:^7.12.0"
@@ -17145,7 +17152,7 @@ __metadata:
     "@types/verror": "npm:^1.10.6"
     "@types/xml-escape": "npm:^1.1.3"
     "@types/yargs": "npm:^17.0.10"
-    "@types/zxcvbn": "npm:^4.4.1"
+    "@types/zxcvbn": "npm:^4.4.5"
     "@typescript-eslint/eslint-plugin": "npm:^5.39.0"
     "@typescript-eslint/parser": "npm:^5.39.0"
     ajv: "npm:^8.12.0"
@@ -19728,6 +19735,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/css-font-loading-module@npm:0.0.7":
+  version: 0.0.7
+  resolution: "@types/css-font-loading-module@npm:0.0.7"
+  checksum: 10/f70b9098ee3b2e006f5f6d5cecc627dcc7b898f266bfc594e73a8720636f1a3bc5f8c38fa0e8f7e5b7878038b46fd70da0c797c3288e072af984097210f4c056
+  languageName: node
+  linkType: hard
+
 "@types/datadog-metrics@npm:0.6.1":
   version: 0.6.1
   resolution: "@types/datadog-metrics@npm:0.6.1"
@@ -20282,10 +20296,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mixpanel-browser@npm:^2.38.0":
-  version: 2.38.0
-  resolution: "@types/mixpanel-browser@npm:2.38.0"
-  checksum: 10/cbba35227218356e4729e36971ce3e1a6ea6da467adc597dc9e8729149f6e033e081881c16067e9728dab8a4db3c1bab33b384d18f0f446c16405fa28a4f1c06
+"@types/mixpanel-browser@npm:^2.50.2":
+  version: 2.50.2
+  resolution: "@types/mixpanel-browser@npm:2.50.2"
+  checksum: 10/e525fc2a3e36b11e5ef5f10a10fc0abeb0a9705c7e2a06533bc7e09f7bdc29c1868930b10dd6c8e9fb4c433879266d44072a2dcc0019da592c53acd148255a04
   languageName: node
   linkType: hard
 
@@ -21047,10 +21061,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/zxcvbn@npm:^4.4.1":
-  version: 4.4.1
-  resolution: "@types/zxcvbn@npm:4.4.1"
-  checksum: 10/85e8feb1a693cc8a4f643207bdf8109fc9be4c18afac37584f52060463f05bbe3034f114e50cd196682ffe66407e03e0f05b1b50e88671f91fe8a866913b981c
+"@types/zxcvbn@npm:^4.4.5":
+  version: 4.4.5
+  resolution: "@types/zxcvbn@npm:4.4.5"
+  checksum: 10/279b0d43e21b8de48a9ef98b5753e343673fdb6cfdd2679e2afbb292410d610a0f01d7c1cb1dad1acbd0d35ee01e8a8dbe21cb034a2e2f3458492cf5fd3b44c3
   languageName: node
   linkType: hard
 
@@ -23831,6 +23845,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xstate/fsm@npm:^1.4.0":
+  version: 1.6.5
+  resolution: "@xstate/fsm@npm:1.6.5"
+  checksum: 10/deae1501169d41d5395ce1581d7b08bde17911b7dec1533eacd5bee17060d22273055d6d6bc7e8f32222a502e4dcf510cd29064a5c9c5fa5aa2ced0ad60b2512
+  languageName: node
+  linkType: hard
+
 "@xtuc/ieee754@npm:^1.2.0":
   version: 1.2.0
   resolution: "@xtuc/ieee754@npm:1.2.0"
@@ -25466,6 +25487,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"base64-arraybuffer@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "base64-arraybuffer@npm:1.0.2"
+  checksum: 10/15e6400d2d028bf18be4ed97702b11418f8f8779fb8c743251c863b726638d52f69571d4cc1843224da7838abef0949c670bde46936663c45ad078e89fee5c62
+  languageName: node
+  linkType: hard
+
 "base64-js@npm:^1.0.2, base64-js@npm:^1.3.0, base64-js@npm:^1.3.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
@@ -32088,6 +32116,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fflate@npm:^0.4.4":
+  version: 0.4.8
+  resolution: "fflate@npm:0.4.8"
+  checksum: 10/c0c75029bcbefd0b47cede4ad2a3698f571e38d3d93dfbb96d744c655ec3bf5e31111044c2c01fa3965109874f5be8b5a6b3686b958392693689665cbabf3ece
+  languageName: node
+  linkType: hard
+
 "fflate@npm:^0.8.1":
   version: 0.8.2
   resolution: "fflate@npm:0.8.2"
@@ -39534,13 +39569,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mixpanel-browser@npm:^2.39.0, mixpanel-browser@npm:^2.45.0":
+"mixpanel-browser@npm:^2.39.0":
   version: 2.45.0
   resolution: "mixpanel-browser@npm:2.45.0"
   checksum: 10/a3d0ce4b508c6b41f78b7cd0bcde1fa47c91f3c5efa526127ea0861d61994cc9777fce31c1243256232c4e9e0e357b09b851e5d6f76ddd590658c618c40b6551
   languageName: node
   linkType: hard
 
+"mixpanel-browser@npm:^2.58.0":
+  version: 2.58.0
+  resolution: "mixpanel-browser@npm:2.58.0"
+  dependencies:
+    rrweb: "npm:2.0.0-alpha.13"
+  checksum: 10/c57d460d542a92c21ac7f0730543f03429c0d9d99fa82e0098309fda8d981a30a981673e2ef8749394bf9bc34ef55e24df48fe778a06510eae54252e16bcdac3
+  languageName: node
+  linkType: hard
+
 "mixpanel@npm:^0.17.0":
   version: 0.17.0
   resolution: "mixpanel@npm:0.17.0"
@@ -47483,13 +47527,47 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rrdom@npm:^2.0.0-alpha.13":
+  version: 2.0.0-alpha.18
+  resolution: "rrdom@npm:2.0.0-alpha.18"
+  dependencies:
+    rrweb-snapshot: "npm:^2.0.0-alpha.18"
+  checksum: 10/4b02e60a6828dd29893b2a003e7611f8db275bb21b24a0b8db97ecbfd75020b6d4be26e90ada0cae4a9b28fdc75fa258dd174d21e33d30c33aded797cc23b9bc
+  languageName: node
+  linkType: hard
+
 "rrweb-cssom@npm:^0.6.0":
   version: 0.6.0
   resolution: "rrweb-cssom@npm:0.6.0"
   checksum: 10/5411836a4a78d6b68480767b8312de291f32d5710a278343954a778e5b420eaf13c90d9d2a942acf4718ddf497baa75ce653a314b332a380b6eaae1dee72257e
   languageName: node
   linkType: hard
 
+"rrweb-snapshot@npm:^2.0.0-alpha.13, rrweb-snapshot@npm:^2.0.0-alpha.18":
+  version: 2.0.0-alpha.18
+  resolution: "rrweb-snapshot@npm:2.0.0-alpha.18"
+  dependencies:
+    postcss: "npm:^8.4.38"
+  checksum: 10/5dbc717cf80057855d43c7afdbffc117af5074dc627c5b1375234512f1b04c03756836605cf8cb9615639a244fe6d5b2a139955a4ab131a2050dab7808332aa2
+  languageName: node
+  linkType: hard
+
+"rrweb@npm:2.0.0-alpha.13":
+  version: 2.0.0-alpha.13
+  resolution: "rrweb@npm:2.0.0-alpha.13"
+  dependencies:
+    "@rrweb/types": "npm:^2.0.0-alpha.13"
+    "@types/css-font-loading-module": "npm:0.0.7"
+    "@xstate/fsm": "npm:^1.4.0"
+    base64-arraybuffer: "npm:^1.0.1"
+    fflate: "npm:^0.4.4"
+    mitt: "npm:^3.0.0"
+    rrdom: "npm:^2.0.0-alpha.13"
+    rrweb-snapshot: "npm:^2.0.0-alpha.13"
+  checksum: 10/5c677b14baea186b72a41ad2ef2662cd92abfa505633a647a5d318ff55f56f133840c3a45decf750defe564cc5c037c14f8f0b8038ea8d5b4ec31b34c2722623
+  languageName: node
+  linkType: hard
+
 "run-applescript@npm:^7.0.0":
   version: 7.0.0
   resolution: "run-applescript@npm:7.0.0"