Warn but continue if requested glyph PBF is unavailable

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Fix 3D map freezing when camera is adjusted against map bounds. ([#4537](https://github.com/maplibre/maplibre-gl-js/issues/4537))
 - Fix `getStyle()` to return a clone so the object cannot be internally changed ([#4488](https://github.com/maplibre/maplibre-gl-js/issues/4488))
 - Prefer local glyph rendering for all CJKV characters, not just those in the CJK Unified Ideographs, Hiragana, Katakana, and Hangul Syllables blocks. ([#4560](https://github.com/maplibre/maplibre-gl-js/pull/4560)))
+- Fix crash on missing glyph PBF.
 - - _...Add new stuff here..._
 
 ## 4.5.2

src/style/load_glyph_range.test.ts

@@ -5,7 +5,7 @@ import {loadGlyphRange} from './load_glyph_range';
 import {fakeServer} from 'nise';
 import {bufferToArrayBuffer} from '../util/test/util';
 
-test('loadGlyphRange', async ()  => {
+describe('loadGlyphRange', () => {
     global.fetch = null;
 
     const transform = jest.fn().mockImplementation((url) => {
@@ -14,27 +14,52 @@ test('loadGlyphRange', async ()  => {
 
     const manager = new RequestManager(transform);
 
-    const server = fakeServer.create();
-    server.respondWith(bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/0-255.pbf'))));
-
-    const promise = loadGlyphRange('Arial Unicode MS', 0, 'https://localhost/fonts/v1/{fontstack}/{range}.pbf', manager);
-    server.respond();
-    const result = await promise;
-
-    expect(transform).toHaveBeenCalledTimes(1);
-    expect(transform).toHaveBeenCalledWith('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf', 'Glyphs');
-
-    expect(Object.keys(result)).toHaveLength(223);
-    for (const key in result) {
-        const id = Number(key);
-        const glyph = result[id];
-
-        expect(glyph.id).toBe(Number(id));
-        expect(glyph.metrics).toBeTruthy();
-        expect(typeof glyph.metrics.width).toBe('number');
-        expect(typeof glyph.metrics.height).toBe('number');
-        expect(typeof glyph.metrics.top).toBe('number');
-        expect(typeof glyph.metrics.advance).toBe('number');
-    }
-    expect(server.requests[0].url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('requests and receives a glyph range', async () => {
+        const server = fakeServer.create();
+        server.respondWith(bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/0-255.pbf'))));
+
+        const promise = loadGlyphRange('Arial Unicode MS', 0, 'https://localhost/fonts/v1/{fontstack}/{range}.pbf', manager);
+        server.respond();
+        const result = await promise;
+
+        expect(transform).toHaveBeenCalledTimes(1);
+        expect(transform).toHaveBeenCalledWith('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf', 'Glyphs');
+
+        expect(Object.keys(result)).toHaveLength(223);
+        for (const key in result) {
+            const id = Number(key);
+            const glyph = result[id];
+
+            expect(glyph.id).toBe(Number(id));
+            expect(glyph.metrics).toBeTruthy();
+            expect(typeof glyph.metrics.width).toBe('number');
+            expect(typeof glyph.metrics.height).toBe('number');
+            expect(typeof glyph.metrics.top).toBe('number');
+            expect(typeof glyph.metrics.advance).toBe('number');
+        }
+        expect(server.requests[0].url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
+    });
+
+    test('warns on missing glyph range', async () => {
+        jest.spyOn(console, 'warn').mockImplementation(() => { });
+
+        const server = fakeServer.create();
+
+        const promise = loadGlyphRange('Arial Unicode MS', 2, 'https://localhost/fonts/v1/{fontstack}/{range}.pbf', manager);
+        server.respond();
+        expect(async () => {
+            const result = await promise;
+            expect(console.warn).toHaveBeenCalledTimes(1);
+            expect(Object.keys(result)).toHaveLength(0);
+        }).not.toThrow();
+
+        expect(transform).toHaveBeenCalledTimes(1);
+        expect(transform).toHaveBeenCalledWith('https://localhost/fonts/v1/Arial Unicode MS/512-767.pbf', 'Glyphs');
+
+        expect(server.requests[0].url).toBe('https://localhost/fonts/v1/Arial Unicode MS/512-767.pbf');
+    });
 });

src/style/load_glyph_range.ts

@@ -18,14 +18,18 @@ export async function loadGlyphRange(fontstack: string,
         ResourceType.Glyphs
     );
 
-    const response = await getArrayBuffer(request, new AbortController());
-    if (!response || !response.data) {
-        throw new Error(`Could not load glyph range. range: ${range}, ${begin}-${end}`);
-    }
     const glyphs = {};
+    try {
+        const response = await getArrayBuffer(request, new AbortController());
+        if (!response || !response.data) {
+            throw new Error(`Could not load glyph range. range: ${range}, ${begin}-${end}`);
+        }
 
-    for (const glyph of parseGlyphPbf(response.data)) {
-        glyphs[glyph.id] = glyph;
+        for (const glyph of parseGlyphPbf(response.data)) {
+            glyphs[glyph.id] = glyph;
+        }
+    } catch (e) {
+        console.warn(`Could not load glyph range. range: ${range}, ${begin}-${end}`, e);
     }
 
     return glyphs;

test/integration/render/tests/text-local-glyphs/missing/style.json

@@ -0,0 +1,43 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "pixelRatio": 2,
+            "localIdeographFontFamily": "sans-serif",
+            "width": 800,
+            "height": 600
+        }
+    },
+    "zoom": 8,
+    "sources": {
+        "sample": {
+            "type": "geojson",
+            "data": {
+                "type": "Feature",
+                "geometry": {
+                    "type": "Point",
+                    "coordinates": [0, 0]
+                },
+                "properties": {
+                    "name_en": "Georgia",
+                    "name_ka": "საქართველო"
+                }
+            }
+        }
+    },
+    "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+    "layers": [
+        {
+            "id": "sample-text",
+            "type": "symbol",
+            "source": "sample",
+            "layout": {
+                "text-anchor": "top",
+                "text-field": "{name_en} ({name_ka})",
+                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+                "text-size": 30,
+                "text-offset": [0, 0]
+            }
+        }
+    ]
+}