Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS errors while zooming (Cannot read property '_values' of undefined) #7523

Closed
alecf opened this issue Oct 31, 2018 · 16 comments · Fixed by #7790
Closed

JS errors while zooming (Cannot read property '_values' of undefined) #7523

alecf opened this issue Oct 31, 2018 · 16 comments · Fixed by #7790

Comments

@alecf
Copy link

alecf commented Oct 31, 2018

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
Copy link
Author

alecf commented Oct 31, 2018

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
Copy link
Contributor

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

@mourner
Copy link
Member

mourner commented Oct 31, 2018

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
Copy link

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
Copy link
Member

mourner commented Nov 23, 2018

@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
Copy link

@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
Copy link
Author

alecf commented Dec 1, 2018

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
Copy link

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
Copy link
Member

mourner commented Feb 19, 2019

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

@JulesAU
Copy link

JulesAU commented Feb 19, 2019

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

@jacknkandy
Copy link

jacknkandy commented Mar 11, 2019

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
Copy link

kuhnwei commented Apr 2, 2019

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
Copy link

oward98 commented Apr 30, 2020

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.

@joshxyzhimself
Copy link

Uncaught TypeError: this._onEaseFrame is not a function
    _renderFrameCallback camera.js:1605
    run task_queue.js:52
    _render map.js:2889
    _frame map.js:3276
    frame browser.js:35
    _triggerFrame map.js:3270
    triggerRepaint map.js:3264
    _update map.js:2825
    Map map.js:519
    fire evented.js:129
    _fireMoveEvents camera.js:1274
    We camera.js:1220
    _renderFrameCallback camera.js:1605
    run task_queue.js:52
    _render map.js:2889
    _frame map.js:3276
    frame browser.js:35
    _triggerFrame map.js:3270
    triggerRepaint map.js:3264
    _update map.js:2825
    Map map.js:519
    fire evented.js:129
    _fireMoveEvents camera.js:1274
    We camera.js:1220
    _renderFrameCallback camera.js:1605
    run task_queue.js:52
    _render map.js:2889
    _frame map.js:3276
    frame browser.js:35
    _triggerFrame map.js:3270
    triggerRepaint map.js:3264
    _update map.js:2825
    Map map.js:519
    fire evented.js:129
    _fireMoveEvents camera.js:1274
    We camera.js:1220
    _renderFrameCallback camera.js:1605

@joshxyzhimself
Copy link


Uncaught TypeError: this._onEaseFrame is not a function
    _renderFrameCallback camera.js:1605
    run task_queue.js:52
    _render map.js:2889
    _frame map.js:3276
    frame browser.js:35
    _triggerFrame map.js:3270
    triggerRepaint map.js:3264
    _update map.js:2825
    Map map.js:519
    fire evented.js:129
    _fireMoveEvents camera.js:1274
    We camera.js:1220
    _renderFrameCallback camera.js:1605
    run task_queue.js:52
    _render map.js:2889
    _frame map.js:3276
    frame browser.js:35
    _triggerFrame map.js:3270
    triggerRepaint map.js:3264
    _update map.js:2825
    Map map.js:519
    fire evented.js:129
    _fireMoveEvents camera.js:1274
    We camera.js:1220
    _renderFrameCallback camera.js:1605
    run task_queue.js:52
    _render map.js:2889
    _frame map.js:3276
    frame browser.js:35
    _triggerFrame map.js:3270
    triggerRepaint map.js:3264
    _update map.js:2825
    Map map.js:519
    fire evented.js:129
    _fireMoveEvents camera.js:1274
    We camera.js:1220
    _renderFrameCallback camera.js:1605
    run task_queue.js:52
    _render map.js:2889
    _frame map.js:3276
    frame browser.js:35
    _triggerFrame map.js:3270
    triggerRepaint map.js:3264
    _update map.js:2825

@stevage
Copy link
Contributor

stevage commented May 19, 2024

FWIW I ran into this today on version 1.1 (don't ask). Upgraded to 1.13.3 and it went away.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment