how to avoid (or handle) http 429 programmatically

Question

I have a page with a lot of <img> tags (I am assembling this page programmatically). Inevitably some of the requests for image encounter http 429. Thankfully, the remote server sends a bunch of helpful response headers as follows

HTTP/1.1 429 TOO MANY REQUESTS
X-RateLimit-Limit: 20
X-RateLimit-Remaining: 20
X-RateLimit-Reset: 1646307858.32
Retry-After: 1

I am wondering if I could somehow wrap my <img> tags in code that catches the http response.status and then uses the above headers (for example, the Retry-After header) to ask for the failed image again after a set delay.

Logically, it seems to me the above would work, but I can't figure out how to code this. Fwiw, this is a completely client-side web page.

Thanks in advance for any guidance.

Answer 1

You cannot easily get at image headers on the client.

It is not possible to use a simple onload/onerror handler to look at retry-after headers. To access headers, you need something like a server proxy that uses cURL and examines the headers after getting a 429

If you just want to try again after error, you can try something like this

window.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll("img[data-src]");
  let cnt = 0;

  const loadImage = src => {
    let img = new Image();
    let tgtImage = images[cnt];
    img.addEventListener("load", function() {
      tgtImage.src = this.src
    })
    img.addEventListener("error", function() {
      setTimeout(function() {
        loadImage(`${src}`)
      }, 1000)
    })
    img.src = src;
    cnt++
    if (cnt >= images.length) return;
    loadImage(images[cnt].dataset.src)
  }
  loadImage(images[cnt].dataset.src)
})

<img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image1" />
<img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image2" />
<img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://ERROR.com/200x300&text=image3" />
<img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image4" />