CODEWITHSUNDEEP
javascriptgoogle-chromemapboxmapbox-gl-jsdomexception
Nino
Nino

Reputation: 707

"DOMException: Operation too large" error on specific domain name

Lately I started getting "DOMException: Operation too large" error when running more than one MAPBOX GL-JS map on the same page.

blob:https://yrpa.co…abcc-70b9646eef89:1 Uncaught (in promise) DOMException: Operation too large.
Promise.then (async)
(anonymous) @ 1c1d7fe3-7456-4fc3-abcc-70b9646eef89:1
Promise.then (async)
t.enforceCacheSizeLimit @ 1c1d7fe3-7456-4fc3-abcc-70b9646eef89:1
enforceCacheSizeLimit @ 1c1d7fe3-7456-4fc3-abcc-70b9646eef89:1
processTask @ 1c1d7fe3-7456-4fc3-abcc-70b9646eef89:1
cancelCallbacks.<computed>.scheduler.add.t.metadata.type @ 1c1d7fe3-7456-4fc3-abcc-70b9646eef89:1
add @ 1c1d7fe3-7456-4fc3-abcc-70b9646eef89:1
receive @ 1c1d7fe3-7456-4fc3-abcc-70b9646eef89:1

With simple code as shown below the error seem to be harmless, however, once adding features like images and polygons, at about half of the times they will not be shown as the error is pops.

<!DOCTYPE html>
<html lang="en">

    <head>
        <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet">
        <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>

        <style>
            #map_a { 
                position: absolute; 
                width: 100%;
                height: 100%;
            }

            #map_b { 
                position: absolute; 
                bottom: 0; 
                width: 50%; 
                height: 50%; 
            }
        </style>

    </head>

    <body>
        <div id="map_a"></div>
        <div id="map_b"></div>
    </body>

</html>


<script>

    const satelite = "mapbox://styles/irpa/cl67ly2a8000214qo7ys3qvv1";
    const outdoors = "mapbox://styles/irpa/cl6pdhle7000w15o3lfunszkt";
    
    mapboxgl.accessToken = "pk.eyJ1IjoiaXJwYSIsImEiOiJjbDh1a2s2dTQwNHdnM3Btb2U1NnJwNWdtIn0.LltQLXeHaIEpNuX3SJLXoQ";

    const map_a = new mapboxgl.Map({
        container: "map_a",
        style: satelite
    });
     
    const map_b = new mapboxgl.Map({
        container: "map_b",
        style: outdoors
    });

</script>

Trying to find the cause I checked the same code on multiple servers, browsers, map styles, domain names and MAPBOX tokens and here's what I found:

Domain name: First and most impressive fact, the error is domain name dependent, it pops on one domain but not on other domain even when both point to same physical server/path/file!

Browser: The error pops on Chrome (105.0.5195.127) but not on Edge (105.0.1343.53), nevertheless the effect is on Edge as well, in about half of the cases it will not show loaded features as described above.

Styles: The error will not pop when one specific style (satelite) is used for both maps. Otherwise, different styles will generate the error.

Babbel: The error links to an explanation about "improper transpilation by Babel" but I am not using Babel on this server.

Others: Changing servers (Ubuntu 22.04 LTS) and configurations (CPU, RAM...) had no effect, same for MAPBOX Tokens (public, domain specific). 'requestAnimationFrame' Violations are shown in most cases but seem unconnected to the issue.

Upvotes: 4

Views: 304

Answers (0)

Related Questions