chore: add debug logging for push notifications

components/push-manager.tsx

@@ -1,12 +1,13 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Bell, BellOff, Loader2 } from "lucide-react"
+import { Bell, BellOff, Loader2, AlertTriangle } from "lucide-react"
 import { toast } from "sonner"
 import { subscribeUser, unsubscribeUser } from "@/app/actions/subscription"
 import { Button } from "@/components/ui/button"
 
 function urlBase64ToUint8Array(base64String: string) {
+    try {
         const padding = '='.repeat((4 - base64String.length % 4) % 4)
         const base64 = (base64String + padding)
             .replace(/\-/g, '+')
@@ -19,17 +20,30 @@ function urlBase64ToUint8Array(base64String: string) {
             outputArray[i] = rawData.charCodeAt(i)
         }
         return outputArray
+    } catch (e) {
+        console.error("VAPID Key conversion failed", e)
+        throw new Error("Invalid VAPID Key format")
+    }
 }
 
 export function PushSubscriptionSettings({ planId }: { planId: string }) {
     const [isSupported, setIsSupported] = useState(false)
     const [subscription, setSubscription] = useState<PushSubscription | null>(null)
     const [loading, setLoading] = useState(false)
+    const [debugInfo, setDebugInfo] = useState<string | null>(null)
 
     useEffect(() => {
-        if ('serviceWorker' in navigator && 'PushManager' in window && process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY) {
+        const checks = []
+        if (!('serviceWorker' in navigator)) checks.push("No Service Worker support")
+        if (!('PushManager' in window)) checks.push("No PushManager support")
+        if (!process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY) checks.push("Missing VAPID Key")
+
+        if (checks.length === 0) {
             setIsSupported(true)
             registerServiceWorker()
+        } else {
+            console.warn("Push not supported:", checks.join(", "))
+            setDebugInfo(checks.join(", "))
         }
     }, [])
 
@@ -38,16 +52,19 @@ export function PushSubscriptionSettings({ planId }: { planId: string }) {
             const registration = await navigator.serviceWorker.ready
             const sub = await registration.pushManager.getSubscription()
             setSubscription(sub)
-        } catch (e) {
+        } catch (e: any) {
             console.error("SW registration error", e)
+            setDebugInfo(`SW Error: ${e.message}`)
         }
     }
 
     async function subscribe() {
         setLoading(true)
+        setDebugInfo(null)
         try {
-            // Explicitly request permission first
+            console.log("Requesting permission...")
             const permission = await Notification.requestPermission()
+            console.log("Permission result:", permission)
 
             if (permission === 'denied') {
                 toast.error("Notifications are blocked in your browser settings.")
@@ -61,17 +78,23 @@ export function PushSubscriptionSettings({ planId }: { planId: string }) {
                 return
             }
 
+            console.log("Waiting for SW ready...")
             const registration = await navigator.serviceWorker.ready
+            console.log("SW Ready. Subscribing...")
+
             const sub = await registration.pushManager.subscribe({
                 userVisibleOnly: true,
                 applicationServerKey: urlBase64ToUint8Array(process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!)
             })
+
+            console.log("Subscribed locally:", sub)
             setSubscription(sub)
             await subscribeUser(planId, sub.toJSON())
             toast.success("Push Notifications enabled")
-        } catch (error) {
+        } catch (error: any) {
             console.error("Subscription failed", error)
-            toast.error("Failed to enable notifications. Please check site permissions.")
+            setDebugInfo(`Error: ${error.message || "Unknown error"}`)
+            toast.error("Failed to enable notifications. See debug info.")
         } finally {
             setLoading(false)
         }
@@ -94,10 +117,11 @@ export function PushSubscriptionSettings({ planId }: { planId: string }) {
         }
     }
 
-    if (!isSupported) return null
+    if (!isSupported && !debugInfo) return null
 
     return (
-        <div className="flex items-center justify-between p-4 border rounded-md mb-4 bg-muted/50">
+        <div className="flex flex-col gap-2 p-4 border rounded-md mb-4 bg-muted/50">
+            <div className="flex items-center justify-between">
                 <div className="space-y-0.5">
                     <h3 className="font-medium text-sm">Device Notifications</h3>
                     <p className="text-xs text-muted-foreground">
@@ -110,11 +134,18 @@ export function PushSubscriptionSettings({ planId }: { planId: string }) {
                         Disable
                     </Button>
                 ) : (
-                <Button size="sm" onClick={subscribe} disabled={loading} variant="secondary">
+                    <Button size="sm" onClick={subscribe} disabled={loading || !isSupported} variant="secondary">
                         {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Bell className="w-4 h-4 mr-2" />}
                         Enable
                     </Button>
                 )}
             </div>
+            {debugInfo && (
+                <div className="text-xs text-destructive flex items-center gap-1 bg-destructive/10 p-2 rounded">
+                    <AlertTriangle className="w-3 h-3" />
+                    {debugInfo}
+                </div>
+            )}
+        </div>
     )
 }

lib/notifications.ts

@@ -39,6 +39,7 @@ export async function sendPlanNotification(planId: string, message: string, webh
         });
 
         if (subscriptions.length > 0) {
+            console.log(`[Push] Found ${subscriptions.length} subscriptions for plan ${planId}`);
             const payload = {
                 title: "Cat Sitting Planner",
                 body: message,
@@ -56,12 +57,24 @@ export async function sendPlanNotification(planId: string, message: string, webh
 
             subscriptions.forEach(sub => {
                 promises.push((async () => {
+                    try {
+                        console.log(`[Push] Sending to endpoint ${sub.endpoint.slice(0, 20)}...`);
                         const res = await sendPushNotification(sub, payload);
-                    if (!res.success && (res.statusCode === 410 || res.statusCode === 404)) {
+                        console.log(`[Push] Result for ${sub.endpoint.slice(0, 20)}...:`, res);
+                        if (!res.success) {
+                            console.error(`[Push] Failed for endpoint: ${res.statusCode}`);
+                            if (res.statusCode === 410 || res.statusCode === 404) {
+                                console.log(`[Push] Deleting stale subscription`);
                                 await prisma.pushSubscription.delete({ where: { id: sub.id } });
                             }
+                        }
+                    } catch (err) {
+                        console.error(`[Push] Error inside loop:`, err);
+                    }
                 })());
             });
+        } else {
+            console.log(`[Push] No subscriptions found for plan ${planId}`);
         }
     } catch (e) {
         console.error("Failed to fetch/send push subscriptions", e);

lib/push.ts

@@ -18,13 +18,15 @@ interface PushSubscriptionData {
 
 export async function sendPushNotification(subscription: PushSubscriptionData, payload: any) {
     try {
-        await webpush.sendNotification({
+        console.log(`[PushLib] Sending to ${subscription.endpoint.slice(0, 30)}...`);
+        const result = await webpush.sendNotification({
             endpoint: subscription.endpoint,
             keys: {
                 p256dh: subscription.p256dh,
                 auth: subscription.auth,
             }
         }, JSON.stringify(payload));
+        console.log(`[PushLib] Success: ${result.statusCode}`);
         return { success: true, statusCode: 201 };
     } catch (error: any) {
         if (error.statusCode === 410 || error.statusCode === 404) {

public/push-sw.js

@@ -1,8 +1,13 @@
 self.addEventListener('push', function (event) {
-    if (!event.data) return;
+    console.log('[SW] Push Received', event);
+    if (!event.data) {
+        console.log('[SW] No data provided in push event');
+        return;
+    }
 
     try {
         const data = event.data.json();
+        console.log('[SW] Push Data:', data);
         const title = data.title || 'Cat Sitting Planner';
         const options = {
             body: data.body || '',
@@ -15,6 +20,8 @@ self.addEventListener('push', function (event) {
 
         event.waitUntil(
             self.registration.showNotification(title, options)
+                .then(() => console.log('[SW] Notification shown'))
+                .catch(e => console.error('[SW] Error showing notification:', e))
         );
     } catch (err) {
         console.error('Error processing push event:', err);