How to catch a layer failing to load within a webmap (JS API + Experience Builder)

[AlejandroMari1]

Hello! We're building an application using Experience Builder 1.7 and JS API 4.24.

The application has a WebMap, and currently if a layer within that map fails to load the app silently continues and there is no indication to the end user that something went wrong during load and the layer is simply excluded form the layer list. 

I'd like to catch this event in code so I can properly handle this, and tell the user which layer(s) failed to load so they are aware the data won't be present.

I've tried adding a catch on the when() method for for the map view, and also tried to see if the loadError property of the WebMap would have something, but nothing is there.

I looked around the community and code samples, but can't find anything. Any thoughts?

This is what I've tried so far:

jimuMapView.view.when()
    .then(m => {
        const map = jimuMapView.view.map as WebMap;
        map.when().then(mp => {
            console.log("Map loaded Loaded:");
            console.log(map.loadError)
            console.log(map.loadStatus)
        });
    })
    .catch(error => {
        console.log("ERROR IN Loading Map View: ");
        console.log(error)
    });

Thanks!!

Alejandro

[KenBuja · Accepted solution]

You can use the layerview-create-error event to notify the user that something didn't load properly.

view.on("layerview-create-error", function(event) {
  console.error("LayerView failed to create for layer with the id: ", event.layer.id);
});

This error will fire for each layer that doesn't load properly

[AlejandroMari1]

Thanks Ken! That works well!

Just for reference, yesterday I found that each layer has a loadStatus and loadError properties that can be used as well:

const failedLayers = map.layers.filter(i => i.loadStatus != 'loaded');
if (failedLayers.length > 0) {
	failedLayers.forEach(i=>{
		console.error("Layer Failed to Load");
		console.error(i.loadError);
	});
}