react-google-maps-api icon indicating copy to clipboard operation
react-google-maps-api copied to clipboard

getNorthEast in getExtendedBounds can sometimes return undefined.

Open ariccio opened this issue 2 years ago • 2 comments

Issue template

Please provide an explanation

I think you can consider this a low priority issue, but someone out there might see the same issue, so I'll document it.

This was seen in production a few times. Apparently, sometimes the call to getNorthEast in getExtendedBounds can return undefined. My gut tells me that it's something strange like the latlng object being invalid.

Your Environment

In production someone was running a very old build of chrome.

React 17.0.2

"@react-google-maps/api@^2.7.0":
  version "2.7.0"
  resolved "https://registry.yarnpkg.com/@react-google-maps/api/-/api-2.7.0.tgz#c4d7b8a53f03ee63643b0d0f313aa3b2d79dde92"
  integrity sha512-Fb/l7aR69ObYvzhpt1d1931454ylRkTPKF1C8GfLvXtg19wc36zTev2Afbahd+qAdyKuQyDdf5/SQyMjYBHI/A==
  dependencies:
    "@googlemaps/js-api-loader" "1.12.8"
    "@googlemaps/markerclusterer" "1.0.12"
    "@react-google-maps/infobox" "2.6.0"
    "@react-google-maps/marker-clusterer" "2.6.0"
    "@types/google.maps" "3.46.1"
    invariant "2.2.4"

How is it behave?

Sentry caught an exception.

How should it behave correctly?

Render correctly OR fail in some way. Maybe check for invalid bounds somewhere?

basic implementation of incorrect behavior in codesandbox.com

:)

ariccio avatar Mar 23 '22 22:03 ariccio

Ah! More info. If the referrer is not allowed for the API (in the cloud console) this happens.

I'm seeing several variants of these stacks:

Clusterer.createClusters Clusterer.redraw Clusterer.repaint Clusterer.onAdd

TypeError: Cannot read properties of undefined (reading 'lat')
    at e.getExtendedBounds (esm.js:771:39)
    at e.createClusters (esm.js:891:27)
    at e.redraw (esm.js:790:14)
    at e.addMarker (esm.js:681:18)
    at r.value (Marker.tsx:182:28)
TypeError: Cannot read properties of undefined (reading 'lat')
    at e.getExtendedBounds (esm.js:771:39)
    at e.createClusters (esm.js:891:27)
    at e.redraw (esm.js:790:14)
    at e.repaint (esm.js:755:14)
    at e.removeMarker (esm.js:733:18)
    at r.value (Marker.tsx:223:30)
   

ariccio avatar Mar 24 '22 16:03 ariccio

On a related note, this ternary is hard to read and debug... might be worth refactoring a bit! You might even be able to avoid some of the repeated calls to getMap and getBounds.

ariccio avatar Mar 24 '22 16:03 ariccio