debugging

frontend/vue-app/src/components/notification/PushOptIn.vue

@@ -1,6 +1,13 @@
 <template>
   <div v-if="showBanner" class="push-opt-in-banner" role="status" aria-live="polite">
-    <template v-if="permissionState === 'default'">
+    <template v-if="errorDetail">
+      <span class="push-opt-in-text push-opt-in-error">
+        Notification setup failed: {{ errorDetail }}
+      </span>
+      <button class="btn btn-primary push-opt-in-btn" @click="onEnable">Retry</button>
+      <button class="push-opt-in-dismiss" @click="dismiss" aria-label="Dismiss">✕</button>
+    </template>
+    <template v-else-if="permissionState === 'default'">
       <span class="push-opt-in-text"
         >Enable notifications to stay updated on chores and rewards.</span
       >
@@ -18,39 +25,49 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { subscribeToPush, getPushPermissionState } from '@/services/pushSubscription'
+import { subscribeToPushWithResult, getPushPermissionState } from '@/services/pushSubscription'
 
 const permissionState = ref<NotificationPermission | 'unsupported'>('default')
 const dismissed = ref(false)
+const errorDetail = ref<string | null>(null)
 
 const showBanner = ref(false)
 
-onMounted(() => {
+onMounted(async () => {
   if (!('Notification' in window)) {
     return
   }
   permissionState.value = Notification.permission
   if (permissionState.value === 'granted') {
     // Already granted — ensure subscription is registered silently
-    subscribeToPush()
+    const result = await subscribeToPushWithResult()
+    if (!result.ok) {
+      errorDetail.value = result.detail ?? result.reason
+      showBanner.value = true
+    }
     return
   }
   showBanner.value = true
 })
 
 async function onEnable() {
-  const success = await subscribeToPush()
+  errorDetail.value = null
-  if (success) {
+  const result = await subscribeToPushWithResult()
+  if (result.ok) {
     permissionState.value = 'granted'
     showBanner.value = false
   } else {
     permissionState.value = Notification.permission as NotificationPermission
+    if (result.reason !== 'permission_denied') {
+      errorDetail.value = result.detail ?? result.reason
+    }
   }
 }
 
 function dismiss() {
   dismissed.value = true
   showBanner.value = false
+  errorDetail.value = null
 }
 </script>
 
@@ -88,4 +105,10 @@ function dismiss() {
   padding: 0 0.25rem;
   line-height: 1;
 }
+
+.push-opt-in-error {
+  color: var(--danger, #c0392b);
+  font-size: 0.82rem;
+  word-break: break-all;
+}
 </style>

frontend/vue-app/src/services/pushSubscription.ts

@@ -4,6 +4,20 @@
  * and syncing the subscription with the backend.
  */
 
+export type PushSubscribeResult =
+  | { ok: true }
+  | {
+      ok: false
+      reason:
+        | 'unsupported'
+        | 'permission_denied'
+        | 'no_vapid_key'
+        | 'sw_error'
+        | 'subscribe_error'
+        | 'backend_error'
+      detail?: string
+    }
+
 async function fetchVapidPublicKey(): Promise<string | null> {
   try {
     const res = await fetch('/api/push-vapid-key')
@@ -25,35 +39,73 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array {
 /**
  * Request notification permission and subscribe to push notifications.
  * Posts the subscription to the backend, including the user's timezone.
- * Returns true if subscription was successfully registered.
+ * Returns a result object describing success or the specific failure reason.
  */
-export async function subscribeToPush(): Promise<boolean> {
+export async function subscribeToPushWithResult(): Promise<PushSubscribeResult> {
   if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
-    return false
+    return { ok: false, reason: 'unsupported' }
   }
 
+  const permission = await Notification.requestPermission()
+  if (permission !== 'granted') {
+    return { ok: false, reason: 'permission_denied' }
+  }
+
+  const vapidKey = await fetchVapidPublicKey()
+  if (!vapidKey) {
+    console.warn('[Push] VAPID public key not available')
+    return { ok: false, reason: 'no_vapid_key' }
+  }
+
+  let registration: ServiceWorkerRegistration
   try {
-    const permission = await Notification.requestPermission()
+    // Timeout after 10 s — if SW never activates, don't hang forever
-    if (permission !== 'granted') {
+    registration = await Promise.race([
-      return false
+      navigator.serviceWorker.ready,
-    }
+      new Promise<never>((_, reject) =>
+        setTimeout(() => reject(new Error('SW ready timeout')), 10_000),
+      ),
+    ])
+  } catch (err) {
+    console.warn('[Push] Service worker not ready:', err)
+    return { ok: false, reason: 'sw_error', detail: String(err) }
+  }
 
-    const vapidKey = await fetchVapidPublicKey()
+  let subscription: PushSubscription
-    if (!vapidKey) {
+  try {
-      console.warn('[Push] VAPID public key not available; skipping subscription')
+    subscription = await registration.pushManager.subscribe({
-      return false
-    }
-
-    const registration = await navigator.serviceWorker.ready
-    const subscription = await registration.pushManager.subscribe({
       userVisibleOnly: true,
       applicationServerKey: urlBase64ToUint8Array(vapidKey),
     })
+  } catch (firstErr) {
+    // VAPID key mismatch: the browser has a stale subscription tied to a different key.
+    // Clear it and retry once.
+    console.warn(
+      '[Push] pushManager.subscribe() failed — attempting to clear stale subscription:',
+      firstErr,
+    )
+    try {
+      const existing = await registration.pushManager.getSubscription()
+      if (existing) {
+        await existing.unsubscribe()
+        console.info('[Push] Cleared stale subscription, retrying…')
+      }
+      subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(vapidKey),
+      })
+    } catch (retryErr) {
+      console.warn('[Push] Retry failed:', retryErr)
+      return { ok: false, reason: 'subscribe_error', detail: String(retryErr) }
+    }
+  }
 
-    const subJson = subscription.toJSON()
+  const subJson = subscription.toJSON()
-    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
 
-    const res = await fetch('/api/push-subscription', {
+  let res: Response
+  try {
+    res = await fetch('/api/push-subscription', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -62,12 +114,26 @@ export async function subscribeToPush(): Promise<boolean> {
         timezone,
       }),
     })
-
+  } catch (fetchErr) {
-    return res.ok
+    console.warn('[Push] Network error posting subscription:', fetchErr)
-  } catch (err) {
+    return { ok: false, reason: 'backend_error', detail: String(fetchErr) }
-    console.warn('[Push] Failed to subscribe:', err)
-    return false
   }
+
+  if (!res.ok) {
+    const body = await res.text().catch(() => '')
+    console.warn(`[Push] Backend rejected subscription: HTTP ${res.status}`, body)
+    return { ok: false, reason: 'backend_error', detail: `HTTP ${res.status}: ${body}` }
+  }
+
+  return { ok: true }
+}
+
+/**
+ * Convenience wrapper — returns boolean for callers that don't need the reason.
+ */
+export async function subscribeToPush(): Promise<boolean> {
+  const result = await subscribeToPushWithResult()
+  return result.ok
 }
 
 /**