Failed to execute 'shaderSource' on 'WebGLRenderingContext

[jliebrand]

We are seeing the following error in our client side error logging (eg real users are seeing this issue, but until recently I was unable to reproduce):

Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.

I've just used testobject.com to test something unrelated, but managed to find a device that crashes with a "Rats WebGL hit a snag." error while trying to render our map. Initially it loaded fine, but when we added a marker on the map, it crashed with that UX message and in our client side error logging the shaderSource error showed up.

Reloading the site now crashes webgl each time, regardless of adding custom markers or not. Even just rendering the map seems to do it.

The device in question is a:

Motorola Moto E2

Android version: 5.1 API level: 22 Resolution: 540 x 960 (hdpi) Screen size: 4.5" CPU: ARM | dual-core | 1200 MHz RAM: 1024 MB Internal storage: 8192 MB Model number: Moto E2 ID: Motorola_Moto_E2_real_us Location: United States

I suspect it's not supporting the correct webgl bits, and indeed this is dubious:

from http://webglreport.com/?v=2 (alrhough v1 is supported)

But if I try the mapbox example to test if mapbox is supported, that map renders fine... so not sure what we are doing that might be causing this?

[jliebrand]

Seems to originate from:

exSource).join("\n"),p=s.createShader(s.FRAGMENT_SHADER);s.shaderSource(p,u),s.compileShader(p),s.attachShader(this.program,p);var h=s.creat {snip}

(sorry, sourcemap is missing)

[jfirebaugh]

WebGL v2 support doesn't matter, it's only v1 support that GL JS requires.

Can you put together a minimal test case on jsbin.com that reproduces the issue?

[jliebrand]

I've been trying to nail it down to something reproducible, but so far haven't been able to. I'll close this for now and re-open it if/when I find a better repro case

[hyperknot]

I've run into this exact same error. Sentry trace here: https://sentry.io/share/issue/ea4f5bd78b1a4373b5fcfa3b6542a162/

Device is Chrome 56 on Android 6.0.1.

[jimjkelly]

Saw this on Chrome 68.0.3440 on Windows 10. If it helps at all, it seems that in this particular session, the user loaded the site, things went fine, then came back to it the next day and this error occurred. Right before the error it successfully made a call out for a font, so the site was somewhat responsive.

[yocontra]

Also seen this a few times - here is one case:

Seems to only happen on Windows machines using Chrome. Could we please get this reopened?

[abelvarga]

Yesterday this issue started to pop up for me running our test suite in Puppeteer. It spins up a Chromium Version 71.0.3542.0 (Developer Build) (64-bit) on OS X Mojave 10.14 (18A391).

We're on MapboxGL version v0.44.1.

The exact error is:

Error: TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at new Program (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:184:646)
    at Painter._createProgramCached (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:180:8111)
    at Painter.useProgram (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:180:8248)
    at setFillProgram (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:156:1800)
    at drawFillTile (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:156:1038)
    at drawFillTiles (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:156:922)
    at Object.drawFill [as fill] (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:156:427)
    at Painter.renderLayer (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:180:7270)
    at Painter.render (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:180:6392)
    at e._render (https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js:495:15361)

[sheerun]

We're also seeing it on Chrome 70 on Android 7. Here's is sentry error:

https://sentry.io/share/issue/99ca1304d7504aebbd21e15060eccc69/

[msbarry]

I'm also seeing this error quite a bit and I think that it results in users seeing road labels, but not the roads themselves.

According to google analytics, most that experience the issue are on android. Here are some of the devices/browsers the issue has happened on:

after android, the issue appears next most often on windows:

[ghost]

I'm also having problems with this issue

Chrome version: 70.0.3538 Windows 10 https://sentry.io/share/issue/5ff71ad3fec343c8b0f0735dd047d39f/

[karlguillotte]

We are also having the same issue. This issue should be reopen.

[abelvarga]

Also customers face this issue, on FF (59.0.0, 62.0.0, 63.0.0) tho. Mostly on Windows 7 machines. We're still using v0.44.1 of mapbox-gl-js.

TypeError Argument 1 of WebGLRenderingContext.shaderSource is not an object. 
    src/render/program.js:41:8 Program
    src/render/painter.js:461:30 [90]</Painter.prototype._createProgramCached
    src/render/painter.js:467:28 [90]</Painter.prototype.useProgram
    src/render/painter.js:201:24 [90]</Painter.prototype.clearStencil
    src/render/painter.js:344:20 [90]</Painter.prototype.render
    src/ui/map.js:1505:8 [247]</Map</e.prototype._render
    src/ui/map.js:1567:16 [247]</Map</e.prototype._rerender/this._frameId<

[elderph]

We're having this issue on a variety of devices. It's accompanied by this warning

WARNING: Too many active WebGL contexts. Oldest context will be lost.

It's intermittent and will only affect some of the maps on a page.

[ghost]

This issue has stopped for me, and as @elderph has pointed out, it was related to having to many WebGL contexts so the context was being ignored resulting in this error and a few others. This was due to re-initialising the map along with 2 other instances generating their own WebGL context when changing pages on our single page app. After pages being navigated to multiple times the browser would give the warning WARNING: Too many active WebGL contexts. Oldest context will be lost. and the errors, including this one, would follow.

To address this I had to persist the map instance so that it wouldn't create a new instance when routing from page to page, to debug your own projects I'd recommend checking the number of WebGL contexts that are being created and try and reduce it and see if you still get this bug... #7332

[sheerun]

can't mapbox reuse old context by itself?

[hyperknot]

I'm having this error on a server side routed web page, where there is only one map on each page, so it cannot be the cause in my case.

[abelvarga]

We have a similar use case as @hyperknot. Could too many tabs of the same page also cause this?

[hyperknot]

@abelvarga in Chrome at least tabs are individual processes, they shouldn't effect each other in any way. In theory at least.

[abelvarga]

@hyperknot, I can reproduce the WARNING: Too many active WebGL contexts. Oldest context will be lost., with just opening mapbox-gl-js docs' example page in like 10-15 different tabs. After the Nth tab loads, it produces the warning and the map crashes. So I'm guessing here, that the problem is resource limit. I could not see the WebGLRenderingContext.shaderSource is not an object tho.

[hyperknot]

@abelvarga that's a nice idea! So we can finally reproduce it! I don't know if Mapbox GL can do anything with this, but a nice warning message would be a big UX improvement. Something like, please close other tabs using WebGL or something similar.

[abelvarga]

@hyperknot, but are these warnings and errors actually related?

[ghost]

This will happen once you try and execute other methods on the map instance when the context is not there so you get Failed to execute 'shaderSource' on 'WebGLRenderingContext' because there is no WebGLRenderingContext. Again, this was the problem I had, your use case might not be related.

[hyperknot]

@abelvarga I see, that your error is different. It might be something different, or it might be related as well, I don't know.

[abelvarga]

@jordmccordgcv, you are right! I just tried to open our site ~15 times, and voila, there's the error too. The question is, can this be checked before trying to render the map, which should be done by mapbox-gl-js IMO.

[abelvarga]

Also, the map renders fine after a few tabs are closed.

Note: sometimes it might be glitchy afterward. Adding some details, not sure if they help.

Relevant console log

mapbox-gl.js:33 WARNING: Too many active WebGL contexts. Oldest context will be lost.
(anonymous) @ mapbox-gl.js:33
mapbox-gl.js:33 WARNING: Too many active WebGL contexts. Oldest context will be lost.
r._setupPainter @ mapbox-gl.js:33
2mapbox-gl.js:33 Uncaught TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at new ui (mapbox-gl.js:33)
    at io.useProgram (mapbox-gl.js:33)
    at io.clearStencil (mapbox-gl.js:33)
    at io.render (mapbox-gl.js:33)
    at r._render (mapbox-gl.js:33)
    at mapbox-gl.js:33
3mapbox-gl.js:33 Uncaught TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at new ui (mapbox-gl.js:33)
    at io.useProgram (mapbox-gl.js:33)
    at io.clearStencil (mapbox-gl.js:33)
    at io.render (mapbox-gl.js:33)
    at r._render (mapbox-gl.js:33)
    at mapbox-gl.js:33
ui @ mapbox-gl.js:33
io.useProgram @ mapbox-gl.js:33
io.clearStencil @ mapbox-gl.js:33
io.render @ mapbox-gl.js:33
r._render @ mapbox-gl.js:33
(anonymous) @ mapbox-gl.js:33
24WebGL: INVALID_OPERATION: texParameter: no texture bound to target
30WebGL: INVALID_VALUE: bufferSubData: buffer overflow
202[.WebGL-0x7fbb794b4200]GL ERROR :GL_INVALID_OPERATION : glDrawElements: bound to target 0x8893 : no buffer
identity_reviews:1 WebGL: too many errors, no more errors will be reported to the console for this context.

Screenshot

[CHBaker]

I'm having this issue as well, windows 10 vmware hosting CENTOS, on chrome

[aMoniker]

We just noticed this issue in our production build from a user on Chrome 72.0.3626 running OSX 10.13.6 I haven't tried to replicate yet, but judging by this thread it's already pretty well diagnosed.

[vcebotari]

hi, is there any solutions on this ?

the map is used a couple of times in iframes on the same page on the third-party sites

[thunderkid]

I'm getting this with mapbox-gl 1.1.1, on Chrome 75, Windows 10, with the following call stack:

Uncaught TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at new pi (program.js:47)
    at ao.useProgram (painter.js:520)
    at ao.clearStencil (painter.js:237)
    at ao.render (painter.js:395)
    at r._render (map.js:1748)
    at map.js:1832

[korywka]

@thunderkid can you give please more info how to reproduce it? how many tabs with mapbox are opened? what do you see after this error? is map broken?

[thunderkid]

@bravecow Hard to pin down I'm afraid - this is a problem that seems to occur inconsistently, and I've found it very hard to reproduce it in a predictable way. After a reboot, it generally occurs after I've opened and closed my application on around 6 tabs. I generally have about another 20 non-mapbox tabs open. My app is only generating ~200 circles on a single layer. I am now using Chrome 78, Windows 10, and mapbox-gl 1.2.1 (I can't upgrade mapbox-gl beyond 1.2.1 yet due to the jerkiness bug of #8701, but apparently 1.6.0 will fix that so after I've transitioned to that version I'll let you know if it's different.) I'm only seeing these errors logged in the developer console - the map appears to continue running fine. I've just noticed in mapbox-gl 1.2.1 that the error is preceded by this warning:

Unable to perform style diff: Cannot read property 'setState' of undefined.  Rebuilding the style from scratch.

Followed by repeated errors of the form:

program.js:47 Uncaught TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at new pi (program.js:47)
    at ao.useProgram (painter.js:520)
    at ao.clearStencil (painter.js:237)
    at ao.render (painter.js:395)
    at r._render (map.js:1753)
    at map.js:1837

[ansis]

I was able to reproduce this by triggering gl context loss just before a shader is created. In this case the map is already failing to render so the error is fairly harmless but I opened a PR to clean up the logs: https://github.com/mapbox/mapbox-gl-js/pull/9017