Unexpected Page Crashes: How to Send Notifications When JavaScript Threads Fail?

In web applications, when JavaScript threads crash and render the page unusable, it is essential to implement a mechanism for notifying users or developers. In such cases, since the main JavaScript thread has crashed, traditional error handling mechanisms such as try-catch or window.onerror event listeners may not be effective. However, we can still employ the following strategies:

1. Using Web Workers

Web Workers operate in separate background threads from the main JavaScript thread. Even if the main thread crashes, Web Workers may continue running. Therefore, you can start a monitoring Worker during page load to detect the main thread's heartbeat. If the main thread stops sending heartbeats (e.g., by setting up periodic messages), the Worker can attempt to notify the server or update the UI to inform users of the error.

2. Utilizing window.onunload and window.onbeforeunload Events

You can report errors in window.onunload or window.onbeforeunload events. If the browser supports navigator.sendBeacon, you can send data to the server even during page unload. Although these events are not designed for error handling, they can be used to send information when the page closes, potentially including crash notifications.

3. Using Service Workers

Service Workers are scripts that run in the background of the browser, used for intercepting and caching network requests, push notifications, etc. If a Service Worker is set up, it can still receive fetch requests or push events even when the page crashes, enabling some level of error handling or status reporting.

4. External Heartbeat System

Implement an external system that periodically checks the status of the web application. For example, the server can send requests to the client at regular intervals to detect page responses. If no response is received within a specified time or an error response is received, the server can log the event and take appropriate actions.

5. Automated Monitoring and Error Reporting Tools

Use third-party error monitoring services like Sentry or LogRocket, which can automatically report errors when uncaught exceptions occur in JavaScript. Although these tools may fail in some crash scenarios, they remain effective for automated monitoring.

6. Client-Side Storage

Use client-side storage such as localStorage or sessionStorage to write status flags when issues are detected. Then, on page reload or reopen, check these flags. If an abnormal state is found, take appropriate notification measures.

7. Using Global Error Handlers

Register a global error handler with window.addEventListener('error', function() {...}) when possible. Although it may not be triggered in some crash scenarios, it provides an opportunity to capture exceptions and attempt notifications.

Example

Here's a simple example using Web Workers for heartbeat detection:

Assume we have a function in the main thread that runs periodically to simulate heartbeats:

javascript
function sendHeartbeat() {
    if (worker) {
        worker.postMessage('heartbeat');
    }
}

// Periodically send heartbeats to the Worker
setInterval(sendHeartbeat, 5000);