How to add custom leaflet error handler for open streat map timeouts?

A. There is a Fallback plugin: https://github.com/ghybs/Leaflet.TileLayer.Fallback

B. For manual handling of tile errors also see here:

https://gis.stackexchange.com/questions/347646/specify-an-alternative-url-for-a-tilelayer-to-use-in-leaflet

When tile load error happens, Leaflet fires tileerror event. In case of event handling function, event parameter has properties tile and coords, which can be used to fire tile load from secondary url.

var url1 = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var url2 = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'; var url2s = 'abc'; var map = L.map('map').setView([37.8, -96], 4); var myLayer = L.tileLayer(url1, {maxZoom: 18}).addTo(map); function handleTileError(evt) { if (evt.tile._hasError) return; var si = Math.floor((Math.random() * 3)); var tileSrc = url2.replace(/{s}/g, url2s.substring(si, si + 1)); tileSrc = tileSrc.replace(/{x}/g, evt.coords.x); tileSrc = tileSrc.replace(/{y}/g, evt.coords.y); tileSrc = tileSrc.replace(/{z}/g, evt.coords.z); evt.tile._hasError = true; evt.tile.src = tileSrc; }; myLayer.on('tileerror', handleTileError);