TileLayer sometimes fails to fetch from local server using Anywidget and Google Colab

[cornhundred]

Hi, I'm experimenting with building a Jupyter widget using Anywidget in order to use deck.gl's TileLayer in a Jupyter notebook and load pyramidal JPEG images that are saved on disk and hosted using a server run in the notebook.

See Google Colab Notebook link for a live example which appears after running the cells

However, sometimes after a few minutes or longer the tiles will sometimes spontaneously stop loading and the console logs will say:

TypeError: Failed to fetch
    at L (fetch-file.ts:43:18)
    at Mt (load.ts:75:18)
    at getTileData (cd391e52-18f9-414b-9e91-0e4ac342fd9d:24:24)
    at Dr.getTileData (tile-layer.ts:295:14)
    at $0._loadData (tile-2d-header.ts:132:24)
value @ tile-layer.ts:37

Do you think this could be an issue with how I'm implementing error handling on my TileLayer or is it more likely outside the scope of deck.gl and related to the local server. If so, do you have any advice on setting up a server to more stably provide tiles to the front-end?

Here is the code for the front-end:

class DeckWidget(anywidget.AnyWidget):
    # Define a traitlet for the port number
    port_number = Int(default_value=server_address).tag(sync=True)

    _esm = """
    import { Deck, OrthographicView, TileLayer, BitmapLayer } from 'https://esm.sh/deck.gl@8.9.21?bundle';
    import * as d3 from "https://esm.sh/d3@7";
    import * as mathGl from 'https://cdn.skypack.dev/math.gl@2.3.3';
    import { load } from 'https://esm.sh/@loaders.gl/core';

    const max_zoom = 15;
    const dimensions = {height: 24000, width: 24000, tileSize: 512};

    export function render({ model, el }) {
        const portNumber = model.get('port_number');
        const ROOT_URL = `http://localhost:${portNumber}/deck.gl-data/website/image-tiles/moon.image`;
        const image_name = 'moon';

        const tile_layer = new TileLayer({
            tileSize: dimensions.tileSize,
            minZoom: -7,
            maxZoom: 0,
            maxCacheSize:5,
            extent: [0, 0, dimensions.width, dimensions.height],

            getTileData: ({index}) => {
                const {x, y, z} = index;
                const full_url = `${ROOT_URL}/${image_name}.image_files/${max_zoom + z}/${x}_${y}.jpeg`;

                return load(full_url).then(data => {
                    return data; // Successfully loaded the tile data
                }).catch(error => {
                    console.error('Failed to load tile:', error);
                    // Handle the error, e.g., return a fallback value or null
                    return null;
                });
            },

            renderSubLayers: props => {
                const {
                    bbox: {left, bottom, right, top}
                } = props.tile;
                const {width, height} = dimensions;
                return new BitmapLayer(props, {
                    data: null,
                    image: props.data,
                    bounds: [
                        mathGl.clamp(left, 0, width),
                        mathGl.clamp(bottom, 0, height),
                        mathGl.clamp(right, 0, width),
                        mathGl.clamp(top, 0, height)
                    ]
                });
            },
        });

        let root = document.createElement("div");
        root.style.height = "800px";
        let deck = new Deck({
            parent: root,
            controller: true,
            initialViewState: {target: [20000, 20000, 0], zoom: -6},
            views: [new OrthographicView({id: 'ortho'})],
            layers: [tile_layer],
        });
        el.appendChild(root);

        return () => deck.finalize();
    }
    """

# Usage example
widget = DeckWidget(port_number=server_address)
widget

and server

server = HTTPServer(("", 0), SimpleHTTPRequestHandler)
print(server.server_address)

service = thr.Thread(target=server.serve_forever)
service.start()

server_address = server.server_address[1]
server_address

which is hosting the JPEG files that I obtained by cloning the repo into the Colab notebook instance.