Mapbox-gl-js: JS errors while zooming (Cannot read property '_values' of undefined)

[alecf]

mapbox-gl-js version: 0.50

browser: Chrome 69

Steps to Trigger Behavior

1. Zoom in and out rapidly

Link to Demonstration

I can try to provide one if this isn't immediately obvious from the stack trace

https://jsbin.com/

Expected Behavior

No errors

Actual Behavior

This stack trace (pardon the formatting, this was extracted manually from our production error reporter with sourcemaps turned on)

Error: Cannot read property '_values' of undefined

at in in webpack:///src/style/style_layer.js
Line 248 : Column 49
247 | isStateDependent() {
248 | for (const property in (this: any).paint._values) {
249 | const value = (this: any).paint.get(property);

at filter in webpack:///src/data/bucket.js
Line 110 : Column 68
109 | (bucket: any).layers = layers;
110 | (bucket: any).stateDependentLayers = layers.filter((l) => l.isStateDependent());
111 | for (const layer of layers) {

at Array.filter 

at filter in webpack:///src/data/bucket.js
Line 110 : Column 52
109 | (bucket: any).layers = layers;
110 | (bucket: any).stateDependentLayers = layers.filter((l) => l.isStateDependent());
111 | for (const layer of layers) {

at CollisionBoxArray in webpack:///src/source/tile.js
Line 171 : Column 41
170 | this.collisionBoxArray = data.collisionBoxArray;
171 | this.buckets = deserializeBucket(data.buckets, painter.style);
172 |  

at callback in webpack:///src/source/vector_tile_source.js
Line 143 : Column 17
142 | if (this.map._refreshExpiredTiles && data) tile.setExpiryData(data);
143 | tile.loadVectorData(data, this.map.painter);
144 |  

at callback(deserialize in webpack:///src/util/actor.js
Line 83 : Column 12
82 | } else if (callback) {
83 | callback(null, deserialize(data.data));
84 | }

[alecf]

Perhaps related, another stack we see periodically in our production deploys:

Error: this._onEaseFrame is not a function

Error: this._onEaseFrame is not a function

at _renderFrameCallback in webpack:///src/ui/camera.js
Line 1026 : Column 13
1025 | const t = Math.min((browser.now() - this._easeStart) / this._easeOptions.duration, 1);
1026 | this._onEaseFrame(this._easeOptions.easing(t));
1027 | if (t < 1) {

at assert in webpack:///src/util/task_queue.js
Line 52 : Column 17
51 | if (task.cancelled) continue;
52 | task.callback();
53 | if (this._cleared) break;

at _render in webpack:///src/ui/map.js
Line 1571 : Column 30
1570 |  
1571 | this._renderTaskQueue.run();
1572 |  

at triggerRepaint in webpack:///src/ui/map.js
Line 1693 : Column 21
1692 | this._frame = null;
1693 | this._render();
1694 | });

[ryanhamley]

I'm not able to reproduce this. Are you able to provide a minimal reproduction that reliably produces this error?

[mourner]

I can try to provide one if this isn't immediately obvious from the stack trace

Yeah, not immediately obvious unfortunately — will need a minimal test case.

[jdeboer-geoplan]

I've seen this too but I'm still on 0.46.0, so I doubt this is of much help.

ERROR TypeError: Cannot read property '_values' of undefined
at e.isStateDependent (mapbox-gl.js:7253) => for (var t in this.paint._values) {
at mapbox-gl.js:13766 => return t.isStateDependent();
at Array.filter ()
at mapbox-gl.js:13765 => (a.stateDependentLayers = o.filter(function(t) {
at Ss.loadVectorData (mapbox-gl.js:13772) => (this.buckets = (function(t, e) {
at mapbox-gl.js:19346 => (e.loadVectorData(o, i.map.painter, "reloadTile" === n)

[mourner]

@jdeboer-geoplan are you seeing this in production logs too, or is this something you could provide a reproducible live test case for? There's a blind workaround in #7615, but we'd prefer to get to the bottom of this if possible.

[jdeboer-geoplan]

@mourner sorry, I've not got a reproducible test case, It's just errors I see from time to time in the console whilst debugging in chrome, must be some odd race condition.

[alecf]

I also don't have a reproducible test case yet - our app is reasonably complex as well, with a homegrown react wrapper around the map.

We do a lot of fine-grained map control and exercise a lot of the mapbox-gl-js features like max bounds and whatnot. As a result, we have listeners on almost every event that the map can produce, such as keeping track of the loading/loaded state of the map (i.e. are there tiles loading, etc) and also try to be careful about only mutating the map (i.e. calling map API calls that would otherwise mutate the map) at certain time and that has to be kept in sync with the react lifecycle methods.

my personal theory is that one of these event listeners are triggering some map mutation at the "wrong" time, but we don't know what is wrong about it!

[EddFigueiredo]

I'm seeing this one, not quite the same exception details:

Uncaught TypeError: Cannot read property '_values' of undefined
at e.isStateDependent (mapbox-gl.js:29)
at mapbox-gl.js:29
at Array.filter ()
at mapbox-gl.js:29
at zs.loadVectorData (mapbox-gl.js:29)
at mapbox-gl.js:33
at ls.receive (mapbox-gl.js:29)

But is really difficult to reproduce, looks like random or something, but it has to do with events triggered but layers in the map

[mourner]

@EddFigueiredo did you see this in v0.53.0, or an earlier version?

[JulesAU]

Also getting this._onEaseFrame is not a function in production quite regularly, unfortunately with no reproducible test case.

[jacknkandy]

Hey Guys,

I've been getting similar random errors that I can't seem to be able to reproduce. They are inconsistent - they do not always show up, but they seem to happen when the map is zooming in to view a feature (e.g. using flyTo or similar functions):

Not sure if its the actual cause, but this was the best existing issue I could find that relates to my problem.

Uncaught TypeError: Cannot read property 'get' of undefined
    at ha (mapbox-gl.js:29)
    at e.queryRadius (mapbox-gl.js:29)
    at ju.loadVectorData (mapbox-gl.js:29)
    at i.a (mapbox-gl.js:33)
    at vu.receive (mapbox-gl.js:29)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14051)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)

Also I'm running version 0.53.0 and the problem only seems to have started to occur recently since updating version of Mapbox from 0.49.0.

[kuhnwei]

Uncaught TypeError: Cannot read property '_values' of undefined
at e.isStateDependent (mapbox-gl.js:29)
at mapbox-gl.js:29
at Array.filter ()
at mapbox-gl.js:29
at Qs.loadVectorData (mapbox-gl.js:29)
at mapbox-gl.js:33
at js.receive (mapbox-gl.js:29)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)

[oward98]

Uncaught TypeError: this._onEaseFrame is not a function.

After encountering this error while using flyTo, I found the source of the problem was that I was calling flyTo within a component's render method, which caused flyTo to be called about thirty times in quick succession with the same destination. flyTo would execute but easing would be disabled, and after execution scrolling the map through user interaction no longer worked although it would work by altering the viewport manually.

After altering the application so that flyTo was only called once outside the render method, the error disappeared.

My guess is that calling flyTo twice within a _very_ short space of time caused the error.