Enhance push notification debugging and timeout handling

- Improved browser push subscription timeout handling (30s)
- Enhanced server request timeout and error reporting (15s)
- Added detailed logging for subscription timing and endpoints
- Better user-friendly error messages for common failure scenarios
- Separated browser push service issues from server-side issues
- Added timeout detection for push service connectivity problems

🤖 Generated with Claude Code
This commit is contained in:
2025-09-30 16:42:36 +01:00
parent 4be8dbfa1b
commit 151abfb2f7

View File

@@ -330,16 +330,41 @@ class PWAManager {
throw new Error('Notification permission is required for push notifications. Please allow notifications and try again.');
}
// Subscribe to push notifications
const subscription = await this.swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: this.urlBase64ToUint8Array(this.vapidPublicKey)
});
// Subscribe to push notifications with enhanced debugging
console.log('PWA: Requesting push subscription from browser...');
console.log('PWA: VAPID public key (first 32 chars):', this.vapidPublicKey.substring(0, 32) + '...');
const subscriptionStartTime = Date.now();
let subscription;
try {
subscription = await Promise.race([
this.swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: this.urlBase64ToUint8Array(this.vapidPublicKey)
}),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Browser push subscription timed out after 30 seconds. This may indicate an issue with your browser\'s push service connectivity.')), 30000)
)
]);
const subscriptionTime = Date.now() - subscriptionStartTime;
console.log(`PWA: Browser subscription completed in ${subscriptionTime}ms`);
console.log('PWA: Subscription endpoint:', subscription.endpoint);
} catch (subscriptionError) {
console.error('PWA: Browser subscription failed:', subscriptionError);
throw new Error(`Failed to subscribe with browser push service: ${subscriptionError.message}`);
}
// Send subscription to server with timeout
console.log('PWA: Sending subscription to server...');
const serverStartTime = Date.now();
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
const timeoutId = setTimeout(() => {
controller.abort();
console.error('PWA: Server request timeout after 15 seconds');
}, 15000);
const response = await fetch('/api/push/subscribe', {
method: 'POST',
@@ -356,7 +381,8 @@ class PWAManager {
});
clearTimeout(timeoutId);
console.log('PWA: Server response received:', response.status, response.statusText);
const serverTime = Date.now() - serverStartTime;
console.log(`PWA: Server response received in ${serverTime}ms:`, response.status, response.statusText);
if (response.ok) {
this.pushSubscription = subscription;
@@ -463,9 +489,14 @@ class PWAManager {
if (error.message.includes('permission')) {
userMessage = 'Please allow notifications when your browser asks, then try again.';
} else if (error.message.includes('timeout')) {
userMessage = 'Push notification setup timed out. This may be due to network or browser issues. Please try again or check your internet connection.';
userMessage = 'Push notification setup timed out. This may be due to network or browser push service issues. Please check your internet connection and try again.';
} else if (error.message.includes('push service')) {
userMessage = 'Failed to connect to browser push service. This may be a temporary network issue. Please try again in a few moments.';
} else if (error.message.includes('AbortError')) {
userMessage = 'Request was cancelled due to timeout. Please check your internet connection and try again.';
}
console.error('PWA: Full error details:', error);
alert('Failed to enable push notifications: ' + userMessage);
subscribeBtn.disabled = false;
subscribeBtn.innerHTML = 'Enable';