Merged in fix/tracking-pageload-issues (pull request #1630)

fix(tracking): fixes not sending pageview events when promise isn't resolving

* fix(tracking): fixes not sending pageview events when promise isn't resolving

* Refactor


Approved-by: Anton Gunnarsson

apps/scandic-web/components/TrackingSDK/RouterTransition.tsx

@@ -13,6 +13,7 @@ import useRouterTransitionStore from "@/stores/router-transition"
 import useTrackingStore from "@/stores/tracking"
 
 import { useSessionId } from "@/hooks/useSessionId"
+import { promiseWithTimeout } from "@/utils/promiseWithTimeout"
 import { createSDKPageObject, trackPageView } from "@/utils/tracking"
 
 import type { TrackingSDKProps } from "@/types/components/tracking"
@@ -52,7 +53,7 @@ export default function RouterTransition({
       hasRunInitial.current = true
       setHasRun()
 
-      const getPageLoadTime = () => {
+      const getPageLoadTimeEntry = () => {
         return new Promise<number>((resolve) => {
           const observer = new PerformanceObserver((entries) => {
             const navEntry = entries.getEntriesByType("navigation")[0]
@@ -65,23 +66,36 @@ export default function RouterTransition({
         })
       }
 
-      const getLCPTime = () => {
+      const getLCPTimeEntry = () => {
-        return new Promise<number>((resolve) => {
+        return new Promise<number | undefined>((resolve) => {
           const observer = new PerformanceObserver((entries) => {
-            const lastEntry = entries.getEntries().pop()
+            const lastEntry = entries.getEntries().at(-1)
             if (lastEntry) {
               observer.disconnect()
               resolve(lastEntry.startTime / 1000)
             }
           })
-          observer.observe({ type: "largest-contentful-paint", buffered: true })
+
+          const lcpSupported =
+            PerformanceObserver.supportedEntryTypes?.includes(
+              "largest-contentful-paint"
+            )
+
+          if (lcpSupported) {
+            observer.observe({
+              type: "largest-contentful-paint",
+              buffered: true,
+            })
+          } else {
+            resolve(undefined)
+          }
         })
       }
 
       const trackPerformance = async () => {
         const [pageLoadTime, lcpTime] = await Promise.all([
-          getPageLoadTime(),
+          promiseWithTimeout(getPageLoadTimeEntry(), 3000),
-          getLCPTime(),
+          promiseWithTimeout(getLCPTimeEntry(), 3000),
         ])
 
         const trackingData = {

apps/scandic-web/server/routers/user/query.ts

@@ -367,7 +367,11 @@ export const userQueryRouter = router({
     if (!isValidSession(ctx.session)) {
       return notLoggedInUserTrackingData
     }
-    const verifiedUserData = await getVerifiedUser({ session: ctx.session })
+
+    let verifiedUserData
+
+    try {
+      verifiedUserData = await getVerifiedUser({ session: ctx.session })
 
       if (!verifiedUserData || "error" in verifiedUserData) {
         return notLoggedInUserTrackingData
@@ -440,6 +444,10 @@ export const userQueryRouter = router({
         loginAction: "login success",
       }
       return loggedInUserTrackingData
+    } catch (error) {
+      console.error("Error in userTrackingInfo:", error)
+      return notLoggedInUserTrackingData
+    }
   }),
 
   stays: router({

apps/scandic-web/utils/promiseWithTimeout.ts

@@ -0,0 +1,12 @@
+export const promiseWithTimeout = <T>(
+  promise: Promise<T>,
+  timeoutMs: number,
+  fallbackValue: T | undefined = undefined
+) => {
+  return Promise.race([
+    promise,
+    new Promise<T | undefined>((resolve) =>
+      setTimeout(() => resolve(fallbackValue), timeoutMs)
+    ),
+  ])
+}