Google Maps fails to Load internal libraries correctly

[MohammedSiddiqui]

I have a very odd issue which I can't seem to pinpoint how the errors are occurring.
I have an Angular Universal (v 10.2.0) Project which is used to run an E-commerce website.

Hence the life cycle of the application is divided into 2 steps, first being rendered on the server and the second being rendered in the client's browser.

The flow is that we typically ask for the user to pinpoint his location on the App when the application bootstraps the first time on the user's browser, using a modal which renders Google Maps.

Hence I used this library to only initiate loading Google Maps on the browser's life cycle and only if the user either wants to change his location or visits us the first time.

I have abstracted this library and using Google Map's API behind my own Angular Service. And the modal only has a few css properties and the main div element which is used by Google Maps to render the Iframe within it.

I have also added sentry to my application which runs on the browser's life cycle for logging any errors which users might face.

Now the issue is I have a lot of errors on my Sentry Application which indicate that Google Maps has failed to load indirectly by telling us that internal libraries used by it, such as onion.js, or poly.js have failed.

I have tried reproducing this on my local machine, and on the production instance on multiple platforms and browsers using BrowserStack but could not reproduce it.

Any help would be highly appreciated.

Please be sure to include as much information as possible:

Environment details

1. Specify the API at the beginning of the title (for example, "Places: ...")

geometry

2. OS type and version

All Platforms, Windows, Mac and Linux. Desktop and Mobile as well.

3. Library version and other environment information

"@googlemaps/js-api-loader": "1.11.3",

Code example

...
import { Loader } from '@googlemaps/js-api-loader';
....

@Injectable({
  providedIn: 'root'
})
export class GoogleMapService {
     constructor(
    private httpClient: HttpClient,
    @Inject(AppLoggerServiceToken) private loggerService: AppLoggerService,
  ) {
    this.googleMapsLoader = new Loader({
      apiKey: environment.googleMapsAPIKey,
      version: 'weekly',
      libraries: ['geometry'],
      retries: 1,
    });
  }

....
....

// This function is used to invoke when we need to load Google Maps dynamically.
// It also is only loaded once since we track if we have attempted to load it before.
loadMapsApi(): Observable<boolean> {
    this.hasAPILoadAttempted = true;
    return from(this.googleMapsLoader.load())
      .pipe(
        map(() => true),
        catchError(() => of(false)),
      );
  }

....
....

Stack trace

A few of the errors shared in the above screenshot:

https://sentry.io/share/issue/b03f083c2d784d5aae89b3d7bdf34e5a/

https://sentry.io/share/issue/49a94e1001cc4726936a75ddc19b1829/

https://sentry.io/share/issue/be42dfdc544e4f38b8f692e998f006f5/

https://sentry.io/share/issue/713e5c1059b94106b8332ab70ecbed44/

Thanks!

[jpoehnelt]

I'm not familiar with Angular Universal, but are you excluding this code path from ssr?

[MohammedSiddiqui]

@jpoehnelt yes definitely. These are definitely running on the browser. I am certain of that.
I just want to know if this error should be raised here or on the core Google maps library.

I've tried looking for these errors online but couldn't find anything substantially relevant, which is probably why I'm stuck at the moment.

[jpoehnelt]

If these are production logs/errors, there could be some other reasons for this failing: proxy servers, firewalls, etc. Not sure what to do if this cannot be reproduced. I didn't find any reported bugs similar to this.

[carloscorti]

Happening the same using the loader on vue 2 application,

this makes sense,
https://stackoverflow.com/questions/61092932/notloadingapifromgooglemapserror-occurring-randomly-with-google-maps-javascript

https://stackoverflow.com/questions/54205790/notloadingapifromgooglemapserror-even-when-loading-correct-url

i will try forcing refresh loader http call before maps API session token expires (authentication token from https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate request)

on mounted

[jpoehnelt]

@carloscorti I'm not sure these are the same issues. I'll let @MohammedSiddiqui chime back in.

For the expiration of the session, can you open a feature request, https://issuetracker.google.com/issues/new?component=188853&template=787814, to support refreshing. I didn't find anything in the public tracker for this and the internal issue hasn't been prioritized as such. Please post the link back here if you do. Thanks!

Regarding your implementation, how are you resetting window.google and the @googlemaps/js-api-loader?

[jpoehnelt]

I opened #361 for supporting session refresh.

[carloscorti]

@carloscorti I'm not sure these are the same issues. I'll let @MohammedSiddiqui chime back in.

For the expiration of the session, can you open a feature request, https://issuetracker.google.com/issues/new?component=188853&template=787814, to support refreshing. I didn't find anything in the public tracker for this and the internal issue hasn't been prioritized as such. Please post the link back here if you do. Thanks!

Regarding your implementation, how are you resetting window.google and the @googlemaps/js-api-loader?

I'm not, just checking if expire time is reached and then call inject a different timestamp to force a new http call everz time the module is mounted

this is the initializMape implementation

[MohammedSiddiqui]

Interesting ... @carloscorti I also have faced the NotLoadingAPIFromGoogleMapsError.
Let me try the cache invalidation strategy over the weekend and push this out to Production.
Will have to monitor the errors for a few days on Sentry to see if that fixed it.
Not sure if the other errors I have mentioned on my issue will also be solved via this.

[jpoehnelt]

Closing this as duplicate of #361.