Merge pull request #14220 from supabase/fix/remove-session-id

fix: remove telemetry prop

apps/docs/package.json

@@ -56,7 +56,6 @@
     "@supabase/supabase-js": "^2.13.0",
     "algoliasearch": "^4.14.2",
     "babel": "^6.23.0",
-    "browser-session-tabs": "^3.0.0",
     "clsx": "^1.2.1",
     "common": "*",
     "config": "*",

apps/docs/pages/_app.tsx

@@ -1,6 +1,6 @@
 import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
 import { SessionContextProvider } from '@supabase/auth-helpers-react'
-import { AuthProvider, ThemeProvider, useGoogleAnalyticsProps } from 'common'
+import { AuthProvider, ThemeProvider, useTelemetryProps } from 'common'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
@@ -12,8 +12,6 @@ import Favicons from '~/components/Favicons'
 import SiteLayout from '~/layouts/SiteLayout'
 import { API_URL, IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants'
 import { post } from '~/lib/fetchWrappers'
-import { BrowserTabTracker } from 'browser-session-tabs'
-import { v4 as uuidv4 } from 'uuid'
 import '../styles/ch.scss'
 import '../styles/main.scss?v=1.0.0'
 import '../styles/new-docs.scss'
@@ -21,7 +19,7 @@ import '../styles/prism-okaidia.scss'
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const router = useRouter()
-  const googleAnalyticsProps = useGoogleAnalyticsProps()
+  const telemetryProps = useTelemetryProps()
 
   const [supabase] = useState(() =>
     IS_PLATFORM || LOCAL_SUPABASE ? createBrowserSupabaseClient() : undefined
@@ -33,21 +31,12 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       title: document.title,
       route,
       ga: {
-        screen_resolution: googleAnalyticsProps?.screenResolution,
+        screen_resolution: telemetryProps?.screenResolution,
-        language: googleAnalyticsProps?.language,
+        language: telemetryProps?.language,
-        session_id: BrowserTabTracker.sessionId,
       },
     })
   }
 
-  useEffect(() => {
-    // Generate browser session id for anon tracking
-    BrowserTabTracker.initialize({
-      storageKey: 'supabase.browser.session',
-      sessionIdGenerator: () => uuidv4(),
-    })
-  }, [])
-
   useEffect(() => {
     function handleRouteChange(url: string) {
       /*

apps/www/components/Features/index.tsx

@@ -5,43 +5,43 @@ import gaEvents from '~/lib/gaEvents'
 import SectionContainer from '../Layouts/SectionContainer'
 import ProductIcon from '../ProductIcon'
 import TextLink from '../TextLink'
-import { useGoogleAnalyticsProps } from 'common/hooks/useGoogleAnalyticsProps'
+import { useTelemetryProps } from 'common/hooks/useTelemetryProps'
 import { useRouter } from 'next/router'
 
 const Features = () => {
   const router = useRouter()
-  const googleAnalyticsProps = useGoogleAnalyticsProps()
+  const telemetryProps = useTelemetryProps()
 
   const sendTelemetryEvent = async (product: any) => {
     switch (product) {
       case 'Database':
         return await Telemetry.sendEvent(
           gaEvents['www_hp_subhero_products_database'],
-          googleAnalyticsProps,
+          telemetryProps,
           router
         )
       case 'Authentication':
         return await Telemetry.sendEvent(
           gaEvents['www_hp_subhero_products_auth'],
-          googleAnalyticsProps,
+          telemetryProps,
           router
         )
       case 'Storage':
         return await Telemetry.sendEvent(
           gaEvents['www_hp_subhero_products_storage'],
-          googleAnalyticsProps,
+          telemetryProps,
           router
         )
       case 'Edge Functions':
         return await Telemetry.sendEvent(
           gaEvents['www_hp_subhero_products_edgeFunctions'],
-          googleAnalyticsProps,
+          telemetryProps,
           router
         )
       case 'Realtime':
         return await Telemetry.sendEvent(
           gaEvents['www_hp_subhero_products_realtime'],
-          googleAnalyticsProps,
+          telemetryProps,
           router
         )
     }

apps/www/components/Hero.tsx

@@ -2,17 +2,17 @@ import { Button, IconBookOpen } from 'ui'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import SectionContainer from './Layouts/SectionContainer'
-import Telemetry, { GoogleAnalyticsEvent } from '~/lib/telemetry'
+import Telemetry, { TelemetryEvent } from '~/lib/telemetry'
 import gaEvents from '~/lib/gaEvents'
-import { useGoogleAnalyticsProps } from 'common/hooks/useGoogleAnalyticsProps'
+import { useTelemetryProps } from 'common/hooks/useTelemetryProps'
 
 const Hero = () => {
   const router = useRouter()
   const { basePath } = router
-  const googleAnalyticsProps = useGoogleAnalyticsProps()
+  const telemetryProps = useTelemetryProps()
 
-  const sendTelemetryEvent = async (event: GoogleAnalyticsEvent) => {
+  const sendTelemetryEvent = async (event: TelemetryEvent) => {
-    await Telemetry.sendEvent(event, googleAnalyticsProps, router)
+    await Telemetry.sendEvent(event, telemetryProps, router)
   }
 
   return (

apps/www/lib/gaEvents.ts

@@ -1,10 +1,10 @@
-import { GoogleAnalyticsEvent } from './telemetry'
+import { TelemetryEvent } from './telemetry'
 
-interface GoogleAnalyticsEventType {
+interface TelemetryEventType {
-  [key: string]: GoogleAnalyticsEvent
+  [key: string]: TelemetryEvent
 }
 
-const GoogleAnalyticsEvents: GoogleAnalyticsEventType = {
+const TelemetryEvents: TelemetryEventType = {
   www_hp_hero_startProject: {
     action: 'www_hp_hero_startProject',
     category: 'link',
@@ -42,4 +42,4 @@ const GoogleAnalyticsEvents: GoogleAnalyticsEventType = {
   },
 }
 
-export default GoogleAnalyticsEvents
+export default TelemetryEvents

apps/www/lib/telemetry.ts

@@ -1,16 +1,15 @@
 import { post } from '~/lib/fetchWrapper'
 import { API_URL, IS_PROD, IS_PREVIEW } from 'lib/constants'
-import { BrowserTabTracker } from 'browser-session-tabs'
 import { NextRouter } from 'next/router'
 
-export interface GoogleAnalyticsEvent {
+export interface TelemetryEvent {
   category: string
   action: string
   label: string
   value?: string
 }
 
-export interface GoogleAnalyticsProps {
+export interface TelemetryProps {
   screenResolution?: string
   language: string
 }
@@ -18,11 +17,7 @@ export interface GoogleAnalyticsProps {
 // This event is the same as in studio/lib/telemetry.tx
 // but uses different ENV variables for www
 
-const sendEvent = (
+const sendEvent = (event: TelemetryEvent, gaProps: TelemetryProps, router: NextRouter) => {
-  event: GoogleAnalyticsEvent,
-  gaProps: GoogleAnalyticsProps,
-  router: NextRouter
-) => {
   if (!IS_PROD && !IS_PREVIEW) return
 
   const { category, action, label, value } = event
@@ -38,7 +33,6 @@ const sendEvent = (
     ga: {
       screen_resolution: gaProps?.screenResolution,
       language: gaProps?.language,
-      session_id: BrowserTabTracker.sessionId,
     },
   })
 }

apps/www/package.json

@@ -20,7 +20,6 @@
     "@next/mdx": "^12.3.2",
     "@supabase/auth-ui-react": "^0.1.6",
     "@supabase/supabase-js": "^2.13.0",
-    "browser-session-tabs": "^3.0.0",
     "classnames": "^2.3.1",
     "cobe": "^0.6.2",
     "common": "*",

apps/www/pages/_app.tsx

@@ -6,14 +6,12 @@ import { useEffect } from 'react'
 import Meta from '~/components/Favicons'
 import '../styles/index.css'
 import { post } from '~/lib/fetchWrapper'
-import { AuthProvider, ThemeProvider, useGoogleAnalyticsProps } from 'common'
+import { AuthProvider, ThemeProvider, useTelemetryProps } from 'common'
-import { BrowserTabTracker } from 'browser-session-tabs'
-import { v4 as uuidv4 } from 'uuid'
 import Head from 'next/head'
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter()
-  const googleAnalyticsProps = useGoogleAnalyticsProps()
+  const telemetryProps = useTelemetryProps()
 
   function handlePageTelemetry(route: string) {
     return post(`${API_URL}/telemetry/page`, {
@@ -21,21 +19,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       title: document.title,
       route,
       ga: {
-        screen_resolution: googleAnalyticsProps?.screenResolution,
+        screen_resolution: telemetryProps?.screenResolution,
-        language: googleAnalyticsProps?.language,
+        language: telemetryProps?.language,
-        session_id: BrowserTabTracker.sessionId,
       },
     })
   }
 
-  useEffect(() => {
-    // Generate browser session id for anon tracking
-    BrowserTabTracker.initialize({
-      storageKey: 'supabase.browser.session',
-      sessionIdGenerator: () => uuidv4(),
-    })
-  }, [])
-
   useEffect(() => {
     function handleRouteChange(url: string) {
       handlePageTelemetry(url)

package-lock.json

@@ -51,7 +51,6 @@
         "@supabase/supabase-js": "^2.13.0",
         "algoliasearch": "^4.14.2",
         "babel": "^6.23.0",
-        "browser-session-tabs": "^3.0.0",
         "clsx": "^1.2.1",
         "common": "*",
         "config": "*",
@@ -674,7 +673,6 @@
         "@next/mdx": "^12.3.2",
         "@supabase/auth-ui-react": "^0.1.6",
         "@supabase/supabase-js": "^2.13.0",
-        "browser-session-tabs": "^3.0.0",
         "classnames": "^2.3.1",
         "cobe": "^0.6.2",
         "common": "*",
@@ -12809,22 +12807,6 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
-    "node_modules/browser-session-tabs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/browser-session-tabs/-/browser-session-tabs-3.0.0.tgz",
-      "integrity": "sha512-HBJWkCbcDYFL+hlSGld54SF1SgaiSXnw9vaTPdDeOxT9HCTFt3hVdArIroQ3HDhh9vhqkbl6TkMjTFok0ZfwIA==",
-      "dependencies": {
-        "js-cookie": "^3.0.1"
-      }
-    },
-    "node_modules/browser-session-tabs/node_modules/js-cookie": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -39207,7 +39189,6 @@
         "analytics-node": "^3.5.0",
         "awesome-debounce-promise": "^2.1.0",
         "blueimp-md5": "^2.19.0",
-        "browser-session-tabs": "^3.0.0",
         "clipboard": "^2.0.8",
         "clsx": "^1.2.1",
         "common": "*",
@@ -48929,21 +48910,6 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
-    "browser-session-tabs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/browser-session-tabs/-/browser-session-tabs-3.0.0.tgz",
-      "integrity": "sha512-HBJWkCbcDYFL+hlSGld54SF1SgaiSXnw9vaTPdDeOxT9HCTFt3hVdArIroQ3HDhh9vhqkbl6TkMjTFok0ZfwIA==",
-      "requires": {
-        "js-cookie": "^3.0.1"
-      },
-      "dependencies": {
-        "js-cookie": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-          "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
-        }
-      }
-    },
     "browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -51572,7 +51538,6 @@
         "@types/react": "17.0.39",
         "algoliasearch": "^4.14.2",
         "babel": "^6.23.0",
-        "browser-session-tabs": "^3.0.0",
         "clsx": "^1.2.1",
         "common": "*",
         "config": "*",
@@ -66456,7 +66421,6 @@
         "aws-sdk": "^2.1354.0",
         "babel-loader": "^8.2.3",
         "blueimp-md5": "^2.19.0",
-        "browser-session-tabs": "^3.0.0",
         "clipboard": "^2.0.8",
         "clsx": "^1.2.1",
         "common": "*",
@@ -69909,7 +69873,6 @@
         "@types/react-dom": "^17.0.11",
         "@types/react-syntax-highlighter": "^13.5.2",
         "autoprefixer": "^10.4.12",
-        "browser-session-tabs": "^3.0.0",
         "classnames": "^2.3.1",
         "cobe": "^0.6.2",
         "common": "*",

packages/common/hooks/index.ts

@@ -1,3 +1,3 @@
 export * from './useBreakpoint'
 export * from './useParams'
-export * from './useGoogleAnalyticsProps'
+export * from './useTelemetryProps'

packages/common/hooks/useTelemetryProps.ts

@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 
 const isBrowser = typeof window !== 'undefined'
 
-export function useGoogleAnalyticsProps() {
+export function useTelemetryProps() {
   const { locale } = useRouter()
 
   return {

studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx

@@ -8,7 +8,7 @@ import { useProfileQuery } from 'data/profile/profile-query'
 import { SQL_TEMPLATES } from 'components/interfaces/SQLEditor/SQLEditor.constants'
 import SQLCard from './SQLCard'
 import { createSqlSnippetSkeleton } from '../SQLEditor.utils'
-import { useGoogleAnalyticsProps, useParams } from 'common'
+import { useTelemetryProps, useParams } from 'common'
 import { useRouter } from 'next/router'
 import { SqlSnippet } from 'data/content/sql-snippets-query'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
@@ -21,7 +21,7 @@ const SQLTemplates = observer(() => {
   const { data: profile } = useProfileQuery()
   const [sql, quickStart] = partition(SQL_TEMPLATES, { type: 'template' })
 
-  const googleAnalyticsProps = useGoogleAnalyticsProps()
+  const telemetryProps = useTelemetryProps()
   const snap = useSqlEditorStateSnapshot()
   const canCreateSQLSnippet = checkPermissions(PermissionAction.CREATE, 'user_content', {
     resource: { type: 'sql', owner_id: profile?.id },
@@ -78,7 +78,7 @@ const SQLTemplates = observer(() => {
                     action: 'script_clicked',
                     label: x.title,
                   },
-                  googleAnalyticsProps,
+                  telemetryProps,
                   router
                 )
               }}
@@ -113,7 +113,7 @@ const SQLTemplates = observer(() => {
                     action: 'quickstart_clicked',
                     label: x.title,
                   },
-                  googleAnalyticsProps,
+                  telemetryProps,
                   router
                 )
               }}

studio/components/interfaces/SQLEditor/UtilityPanel/ResultsDropdown.tsx

@@ -9,7 +9,7 @@ import { CSVLink } from 'react-csv'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
 // @ts-ignore
 import MarkdownTable from 'markdown-table'
-import { useGoogleAnalyticsProps } from 'common'
+import { useTelemetryProps } from 'common'
 import { useRouter } from 'next/router'
 
 export type ResultsDropdownProps = {
@@ -19,7 +19,7 @@ export type ResultsDropdownProps = {
 const ResultsDropdown = ({ id }: ResultsDropdownProps) => {
   const { project } = useProjectContext()
   const snap = useSqlEditorStateSnapshot()
-  const googleAnalyticsProps = useGoogleAnalyticsProps()
+  const telemetryProps = useTelemetryProps()
   const result = snap.results?.[id]?.[0] ?? undefined
   const { ui } = useStore()
   const csvRef = useRef<CSVLink & HTMLAnchorElement & { link: HTMLAnchorElement }>(null)
@@ -34,7 +34,7 @@ const ResultsDropdown = ({ id }: ResultsDropdownProps) => {
     csvRef.current?.link.click()
     Telemetry.sendEvent(
       { category: 'sql_editor', action: 'sql_download_csv', label: '' },
-      googleAnalyticsProps,
+      telemetryProps,
       router
     )
   }
@@ -58,7 +58,7 @@ const ResultsDropdown = ({ id }: ResultsDropdownProps) => {
         ui.setNotification({ category: 'success', message: 'Copied results to clipboard' })
         Telemetry.sendEvent(
           { category: 'sql_editor', action: 'sql_copy_as_markdown', label: '' },
-          googleAnalyticsProps,
+          telemetryProps,
           router
         )
       })

studio/components/ui/PageTelemetry.tsx

@@ -1,5 +1,4 @@
-import { BrowserTabTracker } from 'browser-session-tabs'
+import { useTelemetryProps } from 'common'
-import { useGoogleAnalyticsProps } from 'common'
 import { post } from 'lib/common/fetch'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { observer } from 'mobx-react-lite'
@@ -26,7 +25,7 @@ function sanitizePageViewRoute(_route?: string) {
 
 const PageTelemetry: FC = ({ children }) => {
   const router = useRouter()
-  const googleAnalyticsProps = useGoogleAnalyticsProps()
+  const telemetryProps = useTelemetryProps()
 
   useEffect(() => {
     function handleRouteChange(url: string) {
@@ -72,9 +71,8 @@ const PageTelemetry: FC = ({ children }) => {
         title: document.title,
         route,
         ga: {
-          screen_resolution: googleAnalyticsProps?.screenResolution,
+          screen_resolution: telemetryProps?.screenResolution,
-          language: googleAnalyticsProps?.language,
+          language: telemetryProps?.language,
-          session_id: BrowserTabTracker.sessionId,
         },
       })
     }

studio/lib/auth.tsx

@@ -2,7 +2,7 @@ import {
   AuthContext as AuthContextInternal,
   AuthProvider as AuthProviderInternal,
   gotrueClient,
-  useGoogleAnalyticsProps,
+  useTelemetryProps,
 } from 'common'
 import { useProfileQuery } from 'data/profile/profile-query'
 import { useStore } from 'hooks'
@@ -14,7 +14,7 @@ export const AuthContext = AuthContextInternal
 
 export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
   const { ui, app } = useStore()
-  const googleAnalyticsProps = useGoogleAnalyticsProps()
+  const telemetryProps = useTelemetryProps()
 
   // Check for unverified GitHub users after a GitHub sign in
   useEffect(() => {
@@ -36,7 +36,7 @@ export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
   // Track telemetry for the current user
   useProfileQuery({
     onSuccess(profile) {
-      Telemetry.sendIdentify(profile, googleAnalyticsProps)
+      Telemetry.sendIdentify(profile, telemetryProps)
 
       // [Joshen] Temp fix: For new users, the GET profile call also creates a default org
       // But because the dashboard's logged in state is using gotrue as the source of truth

studio/lib/telemetry.ts

@@ -1,10 +1,9 @@
 import { post } from 'lib/common/fetch'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { User } from 'types'
-import { BrowserTabTracker } from 'browser-session-tabs'
 import { NextRouter } from 'next/router'
 
-export interface GoogleAnalyticsProps {
+export interface TelemetryProps {
   screenResolution?: string
   language: string
 }
@@ -16,7 +15,7 @@ const sendEvent = (
     label: string
     value?: string
   },
-  gaProps: GoogleAnalyticsProps,
+  gaProps: TelemetryProps,
   router: NextRouter
 ) => {
   if (!IS_PLATFORM) return
@@ -34,7 +33,6 @@ const sendEvent = (
     ga: {
       screen_resolution: gaProps?.screenResolution,
       language: gaProps?.language,
-      session_id: BrowserTabTracker.sessionId,
     },
   })
 }
@@ -43,7 +41,7 @@ const sendEvent = (
  * TODO: GA4 doesn't have identify method.
  * We may or may not need gaClientId here. Confirm later
  */
-const sendIdentify = (user: User, gaProps?: GoogleAnalyticsProps) => {
+const sendIdentify = (user: User, gaProps?: TelemetryProps) => {
   if (!IS_PLATFORM) return
 
   return post(`${API_URL}/telemetry/identify`, {
@@ -51,7 +49,6 @@ const sendIdentify = (user: User, gaProps?: GoogleAnalyticsProps) => {
     ga: {
       screen_resolution: gaProps?.screenResolution,
       language: gaProps?.language,
-      session_id: BrowserTabTracker.sessionId,
     },
   })
 }

studio/package.json

@@ -41,7 +41,6 @@
     "analytics-node": "^3.5.0",
     "awesome-debounce-promise": "^2.1.0",
     "blueimp-md5": "^2.19.0",
-    "browser-session-tabs": "^3.0.0",
     "clipboard": "^2.0.8",
     "clsx": "^1.2.1",
     "common": "*",

studio/pages/_app.tsx

@@ -50,8 +50,6 @@ import Favicons from 'components/head/Favicons'
 import { IS_PLATFORM } from 'lib/constants'
 import { SessionContextProvider } from '@supabase/auth-helpers-react'
 import { createClient } from '@supabase/supabase-js'
-import { BrowserTabTracker } from 'browser-session-tabs'
-import { v4 as uuidv4 } from 'uuid'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -76,14 +74,6 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
 
   const getSavingState = () => rootStore.content.savingState
 
-  useEffect(() => {
-    // Generate browser session id for anon tracking
-    BrowserTabTracker.initialize({
-      storageKey: 'supabase.browser.session',
-      sessionIdGenerator: () => uuidv4(),
-    })
-  }, [])
-
   // prompt the user if they try and leave with unsaved content store changes
   useEffect(() => {
     const warningText = 'You have unsaved changes - are you sure you wish to leave this page?'