fix: sentry Illegal invocation on sendBeacon

sebastian-software · Aug 13, 2024 · dcf3bd5 · dcf3bd5
1 parent 6c30c3e
commit dcf3bd5
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/app/components/hooks/webVitals.ts b/app/components/hooks/webVitals.ts
@@ -15,16 +15,25 @@ async function sendToAnalytics(metric: Metric) {
   }
   const body = JSON.stringify(data)
 
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (navigator.sendBeacon) {
-    navigator.sendBeacon("/analytics/performance", body)
-  } else {
-    await fetch("/analytics/performance", {
+  const doSendViaFetch = async () => {
+    return fetch("/analytics/performance", {
       body,
       method: "POST",
       keepalive: true
     })
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (navigator.sendBeacon) {
+    try {
+      navigator.sendBeacon("/analytics/performance", body)
+    } catch {
+      // Fallback to fetch
+      await doSendViaFetch()
+    }
+  } else {
+    await doSendViaFetch()
+  }
 }
 
 export function useWebVitals() {