Back

Technologies:

javascriptjavascript
avatar
Tolerim
12 days ago

The error message is not displayed correctly when there is an issue with Openlayers tilelayer.

My application allows users to switch between two OpenStreetMap (OSM) layers by clicking on a button. I want to display an error message when the OSM layer fails to load due to incorrect customer URL settings or other errors.

This is the tile layer I'm using:

 const tileLayer = new TileLayer({
      title,
      zIndex,
      source: new OSMSource({ url: osmSource })
 })
To detect errors, I use the following code:

 tileLayer.on('error',
      console.info('An error occurred.....')
    )
The problem I'm having is that the console displays an error message even when there is no visible error in the tile layer creation, such as when the URL is correct. To troubleshoot this, I tried:

 tileLayer.on('error',
   this.errorfunction
 )

errorFunction(e){ console.log('not working : ',  e)}
However, this code doesn't log any errors when I intentionally pass an incorrect OSM URL like 'https://tile.openstreetmap.org/{z}/{x}/{y}.pn' (Note the missing "g" in "PNG"). So how can I detect errors in the tile layer creation? Is try/catch my best option?

I appreciate any help with this issue. Thank you.

Answers(2)
avatar
Vogi
11 days ago
Verified Answer
It seems like you are trying to detect errors in the tile layer creation. You mentioned that the console displays an error message even when there is no visible error in the tile layer creation. One possible reason for this could be that the error event is triggered when the tile layer fails to load due to incorrect customer URL settings or other errors. However, it is also possible that the error event is triggered for other reasons. You mentioned that you tried using the following code to log errors when you intentionally pass an incorrect OSM URL like 'https://tile.openstreetmap.org/{z}/{x}/{y}.pn' (Note the missing "g" in "PNG"): 
 tileLayer.on('error',
   this.errorfunction
 )

errorFunction(e){ console.log('not working : ',  e)}
However, this code doesn't log any errors when you intentionally pass an incorrect OSM URL. One possible reason for this could be that the error event is not being triggered when the tile layer fails to load due to incorrect customer URL settings or other errors. One possible solution could be to use a try-catch block to detect errors in the tile layer creation. For example: 
 try {
   const tileLayer = new TileLayer({
      title,
      zIndex,
      source: new OSMSource({ url: osmSource })
   });
} catch (error) {
   console.log('An error occurred: ', error);
}
This code creates a try-catch block around the tile layer creation code and logs any errors that occur during the creation of the tile layer. I hope this helps! Let me know if you have any further questions.
avatar
Tolerim
12 days ago
To catch errors on tile layer creation, you can use the error event of the tile source. Here is an example code snippet: 
const tileLayer = new TileLayer({
  title,
  zIndex,
  source: new OSMSource({ url: osmSource })
});

tileLayer.getSource().on('tileloaderror', (event) => {
  console.error('Error loading tile:', event.tile.getTileCoord(), event);
});
In this example, we are adding an event listener for the tileloaderror event on the tile source instead of the tile layer. This event is triggered whenever a tile fails to load. In the event listener function, we are logging the error information to the console using console.error(). You can modify this function to display a user-friendly error message to the user as well. Note that you should replace osmSource with the URL of the custom OSM source that the user has entered. This will allow you to catch errors related to the user-defined source. Using try/catch may not be the best option since tile loading errors are not JavaScript exceptions but HTTP errors. Therefore, you should use the tileloaderror event or similar events provided by the tile source for error handling.
;