visgl / visgl/react-google-maps

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

Open
#877 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
1.9k
Forks
193
Avg merge
3d 16h
Merged PRs (30d)
13

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the importLibrary stub implementation and the example directory mentioned in the report. Reproduce the cached-script case using a Chrome local override after the downloaded Google Maps script has expired, then trace the runtime error and dependency removal. Done means the uncaught error is understood and the affected load path is handled without breaking successful map initialization.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
api, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.