Suppress harmless Google Maps DOM errors

Google Maps and React both manipulate the DOM, causing race conditions where
Google Maps removes nodes that React still has references to. This manifests
as a NotFoundError during removeChild operations, which is harmless and doesn't
affect functionality.

Add a global error event listener in StationMap that suppresses these specific
errors. Also revert to using script.async=true with callback parameter for
proper asynchronous Google Maps loading.

The map continues to work normally despite the suppressed errors.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2025-11-04 19:38:40 -06:00
parent 715250d50d
commit 9a01ebd847
2 changed files with 16 additions and 1 deletions

View File

@@ -50,9 +50,11 @@ export function loadGoogleMaps(): Promise<void> {
};
// Create script tag with callback
// The callback parameter tells Google Maps to call our function when ready
// Using async + callback ensures Google Maps initializes asynchronously
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=${callbackName}&libraries=places`;
script.defer = true;
script.async = true;
script.onerror = () => {
// Reset promise so retry is possible