fix: Stripe load error (#6632)

Author: jdolle

.changeset/weak-items-tap.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Capture Stripe.js load error to avoid raising an unhandled error

packages/web/app/src/lib/billing/stripe.tsx

@@ -1,5 +1,6 @@
 import { FC, ReactNode, Suspense, useState } from 'react';
 import { env } from '@/env/frontend';
+import { captureMessage } from '@sentry/react';
 import { Elements as ElementsProvider } from '@stripe/react-stripe-js';
 // Why not @stripe/stripe-js?
 // `loadStrip` from the main entry loads Stripe.js before the function is called.
@@ -10,18 +11,27 @@ import { getStripePublicKey } from './stripe-public-key';
 
 export const HiveStripeWrapper: FC<{ children: ReactNode }> = ({ children }) => {
   // eslint-disable-next-line react/hook-use-state -- we don't need setter
-  const [stripe] = useState<ReturnType<typeof loadStripe> | void>(() => {
+  const [stripe] = useState<ReturnType<typeof loadStripe> | void>(async () => {
     if (env.nodeEnv !== 'production') {
-      return;
+      return null;
     }
 
     const stripePublicKey = getStripePublicKey();
 
     if (!stripePublicKey) {
-      return;
+      return null;
     }
 
-    return loadStripe(stripePublicKey);
+    try {
+      return await loadStripe(stripePublicKey);
+    } catch (e) {
+      const message =
+        e instanceof Error ? e.message : typeof e === 'string' ? e : 'Failed to load Stripe.js';
+      captureMessage(message, {
+        level: 'warning',
+      });
+      return null;
+    }
   });
 
   if (!stripe) {