fix(admin-ui): disabling analytics when opted out (#4939)

* fixes #4423 by either using the `useAnalytics` hook or using an ErrorBoundary specific instance

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>

packages/admin-ui/ui/src/components/organisms/analytics-preferences/index.tsx

@@ -2,10 +2,7 @@ import clsx from "clsx"
 import { useForm, useWatch } from "react-hook-form"
 import useNotification from "../../../hooks/use-notification"
 import { useAnalytics } from "../../../providers/analytics-provider"
-import {
-  analytics,
-  useAdminCreateAnalyticsConfig,
-} from "../../../services/analytics"
+import { useAdminCreateAnalyticsConfig } from "../../../services/analytics"
 import { getErrorMessage } from "../../../utils/error-messages"
 import { nestedForm } from "../../../utils/nested-form"
 import Button from "../../fundamentals/button"
@@ -38,7 +35,7 @@ const AnalyticsPreferencesModal = () => {
     control,
   } = form
 
-  const { setSubmittingConfig } = useAnalytics()
+  const { setSubmittingConfig, trackUserEmail } = useAnalytics()
 
   const watchOptOut = useWatch({
     control: control,
@@ -65,7 +62,7 @@ const AnalyticsPreferencesModal = () => {
         )
 
         if (shouldTrackEmail) {
-          analytics.track("userEmail", { email })
+          trackUserEmail({ email })
         }
 
         setSubmittingConfig(false)

packages/admin-ui/ui/src/components/organisms/error-boundary/index.tsx

@@ -1,7 +1,9 @@
 import { AxiosError } from "axios"
 import React, { ErrorInfo } from "react"
-import { analytics, getAnalyticsConfig } from "../../../services/analytics"
+import { analyticsOptIn } from "../../../services/analytics"
 import Button from "../../fundamentals/button"
+import { WRITE_KEY } from "../../../constants/analytics"
+import { AnalyticsBrowser } from "@segment/analytics-next"
 
 type State = {
   hasError: boolean
@@ -13,6 +15,18 @@ type Props = {
   children?: React.ReactNode
 }
 
+// Analytics instance used for tracking errors
+let analyticsInstance: ReturnType<typeof AnalyticsBrowser.load> | undefined;
+
+const analytics = () => {
+  if (!analyticsInstance) {
+    analyticsInstance = AnalyticsBrowser.load({
+      writeKey: WRITE_KEY,
+    })
+  }
+  return analyticsInstance
+}
+
 class ErrorBoundary extends React.Component<Props, State> {
   public state: State = {
     hasError: false,
@@ -40,7 +54,7 @@ class ErrorBoundary extends React.Component<Props, State> {
     }
 
     const properties = getTrackingInfo(error, errorInfo)
-    analytics.track("error", properties)
+    analytics().track("error", properties)
   }
 
   public dismissError = () => {
@@ -98,19 +112,7 @@ const shouldTrackEvent = async (error: Error) => {
     return false
   }
 
-  const res = await getAnalyticsConfig().catch(() => undefined)
-
-  // Don't track if we have no config to ensure we have permission
-  if (!res) {
-    return false
-  }
-
-  // Don't track if user has opted out from sharing usage insights
-  if (res.analytics_config.opt_out) {
-    return false
-  }
-
-  return true
+  return await analyticsOptIn();
 }
 
 const errorMessage = (status?: number) => {