From 67f395eeffc480b6e42a47da793d2b6436cf0bbe Mon Sep 17 00:00:00 2001 From: Mike Date: Fri, 20 Dec 2024 09:30:23 +0100 Subject: [PATCH] Feat: Upgrade Mixpanel browser and enable session replay (#3725) --- .../components/workspace/CreatePage.vue | 3 + .../workspace/wizard/CancelDialog.vue | 1 + .../components/workspace/wizard/Wizard.vue | 4 + packages/frontend-2/lib/common/helpers/mp.ts | 6 +- packages/frontend-2/lib/core/clients/mp.ts | 3 +- .../lib/workspaces/composables/wizard.ts | 1 + packages/frontend-2/package.json | 4 +- packages/frontend/package.json | 2 +- packages/server/package.json | 2 +- yarn.lock | 104 +++++++++++++++--- 10 files changed, 111 insertions(+), 19 deletions(-) diff --git a/packages/frontend-2/components/workspace/CreatePage.vue b/packages/frontend-2/components/workspace/CreatePage.vue index f2cee08472..b7959b2192 100644 --- a/packages/frontend-2/components/workspace/CreatePage.vue +++ b/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 } diff --git a/packages/frontend-2/components/workspace/wizard/CancelDialog.vue b/packages/frontend-2/components/workspace/wizard/CancelDialog.vue index b815e01b52..3148d3d7ef 100644 --- a/packages/frontend-2/components/workspace/wizard/CancelDialog.vue +++ b/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() } diff --git a/packages/frontend-2/components/workspace/wizard/Wizard.vue b/packages/frontend-2/components/workspace/wizard/Wizard.vue index 70ffbf3925..2021b206a7 100644 --- a/packages/frontend-2/components/workspace/wizard/Wizard.vue +++ b/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 diff --git a/packages/frontend-2/lib/common/helpers/mp.ts b/packages/frontend-2/lib/common/helpers/mp.ts index 173cbd13e9..97b713138d 100644 --- a/packages/frontend-2/lib/common/helpers/mp.ts +++ b/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 @@ -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 }) diff --git a/packages/frontend-2/lib/core/clients/mp.ts b/packages/frontend-2/lib/core/clients/mp.ts index dfe015be28..fa7a1343a5 100644 --- a/packages/frontend-2/lib/core/clients/mp.ts +++ b/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() diff --git a/packages/frontend-2/lib/workspaces/composables/wizard.ts b/packages/frontend-2/lib/workspaces/composables/wizard.ts index accb81b1f5..fe9efcb2e7 100644 --- a/packages/frontend-2/lib/workspaces/composables/wizard.ts +++ b/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 || diff --git a/packages/frontend-2/package.json b/packages/frontend-2/package.json index a651463abb..a4aa3a7af8 100644 --- a/packages/frontend-2/package.json +++ b/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", diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 751689f91c..e028a6b4cb 100644 --- a/packages/frontend/package.json +++ b/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", diff --git a/packages/server/package.json b/packages/server/package.json index 89b6f99aa2..4c74a3f6aa 100644 --- a/packages/server/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 1726c53f86..b1422a4c92 100644 --- a/yarn.lock +++ b/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,6 +47527,15 @@ __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" @@ -47490,6 +47543,31 @@ __metadata: 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"