[Bug] Internal script error when Google Maps API is loaded from user cache

[BenHodgsonR2R]

Description

This is an interesting error. We get about 400 instances daily with a high traffic site- considered pretty low frequency.

Error: Google Maps JavaScript API error: NotLoadingAPIFromGoogleMapsError https://developers.google.com/maps/documentation/javascript/error-messages#not-loading-api-from-google-maps-error.

Commonalities:

• Browser-cached instance of the Google Maps API is loaded
• Error is thrown on a successful load, during runtime
• Common error is in:
  https://maps.googleapis.com/maps-api-v3/api/js/61/14/main.js
TypeError: Cannot read properties of undefined (reading 'getRootNode')
  ^ Likely because the internal map element has suddenly been removed from the DOM by another script included by google.

Why it's an issue:

• Standard errors in requesting the google maps API are handled, this is uncaught due to google.maps dependencies suddenly being deleted from the global scope- as a result of the above error. After the script is loaded and dependencies are requested, and after the map has initialized in the DOM.

Area of current interest:
My current guess is that it's a race condition in the importLibrary stub implementation, that's an issue specifically when the core maps library is loaded immediately due to the cache and the cache is considered "outdated" by googles definition somewhere in their importLibrary (or similar) implementation.

Steps to Reproduce

This is difficult.

• Download a copy of:
  https://maps.googleapis.com/maps/api/js?key={YOUR_KEY_HERE}&language=en&region=GB&libraries=core%2Cmaps%2Cgeometry&solution_channel=GMP_visgl_rgmlibrary_v1_default&loading=async&callback=__googleMapsCallback__
  (with your API key)
• Wait. This version of the script will expire at some point, my best guess at the moment is > 24hrs, but not sure yet.
• Use a local override to override the content of the script on an /example directory or similar

Environment

• Library version: ^1.7.1
• Google maps version: weekly
• Browser and Version: Chrome, Safari, Edge - any and all versions
• OS: Linux, iOS, macOS, Android, Windows - any and all

Logs

Google Maps JavaScript API error: NotLoadingAPIFromGoogleMapsError
https://developers.google.com/maps/documentation/javascript/error-messages#not-loading-api-from-google-maps-error

[BenHodgsonR2R]

We made a small change to how the API is being requested, and we're seeing signals that the error rate has reduced.

Note that this is difficult to measure, due to the error being more likely on older releases. The release needs to be out in the wild for a while before there's strong enough signal it has fixed the issue.

Snippet of the fix:

import { APIProvider as VisGlApiProvider } from "@vis.gl/react-google-maps";

const GOOGLE_MAPS_INVALIDATE_INTERVAL = 12 * 3600 * 1000; // 12 hrs

function MyApiWrapper({ children }: PropsWithChildren<{}>) {
  const [timestamp] = useState(
    () =>
      Math.floor(Date.now() / GOOGLE_MAPS_INVALIDATE_INTERVAL) *
      GOOGLE_MAPS_INVALIDATE_INTERVAL,
  );

  return (
    <VisGlApiProvider
      // other properties here
      // @ts-expect-error - This isn't an official prop, but vis.gl allows additional parameters to be passed through.
      timestamp={timestamp}
    >
      {children}
    </VisGlApiProvider>
}

This probably isn't strictly an issue with this package- although it could make sense to include safely typed support for query parameters like this.