detect 404 error on page load

Question

I am embedding a google map in my website and sometimes google responds with a 404 error. I know I should know this, but I can't remember and I cannot find it quickly. None of the other 404 iframe related questions on this site were ever answered.

How do I check if there is a 404 response in javascript? I plan to call location.reload() when the response is 404.

<iframe src="https://mapsengine.google.com/map/embed?mid=zGLD-nMIJQAg.k0gTyNlOPz_Q" width="640" height="480"></iframe>

The error code is:

GET https://khms0.googleapis.com/kh?v=159&hl=en&x=784456&y=1636828&z=22&token=122715 404 (Not Found)

I tried this: It didn't help.

var url = 'https://mapsengine.google.com/map/embed?mid=zGLD-nMIJQAg.k0gTyNlOPz_Q';
if (url.statusCode === '404'){
    window.location.reload();
}

I think it's better to solve the 404 problem. But if you are sure you want to reload... How do you getting the map? Can you show us the code? — Andreas Furster, Oct 29 '14 at 12:47
I don't think I can do anything about the 404 problem without not using this version of a Google Map. — MimiBambino, Oct 29 '14 at 12:53
Are you sure you have the right url to the map? Does it give problems in all browsers? How frequent is it? Also it's not a good solution. Think of the url would change. The browser will reload for ever. — Andreas Furster, Oct 29 '14 at 12:57
Welcome to Stack Overflow. Best way to check is to use a get request to see if you get a 404 status code. There may be some issue with the google maps url you're using because my sites (using their embed option) never have 404s when showing the map. — mark, Oct 29 '14 at 13:18
Now I think something on my page is preventing the map from loading. It happens with other map services as well. I'll have to dig deeper. — MimiBambino, Oct 29 '14 at 13:19
I am facing the same problem. What was the outcome of your investigation? Any conflict with other elements? Thank you for a reply. — neurix, Jan 03 '15 at 23:53
I never really fixed the issue. I just massively changed the layout. I think that is where the problem was. When I rewrote the html, the map just showed up and worked perfectly, even when I modified the position on the page. Good luck. Sorry I can't help more. — MimiBambino, Jan 05 '15 at 09:35
possible duplicate https://stackoverflow.com/questions/23713982/detecting-404-code-in-javascript — Xanlantos, Mar 22 '18 at 15:15

score 21 · Answer 1 · edited Sep 11 '15 at 02:09

21

var url = 'https://mapsengine.google.com/map/embed?mid=zGLD-nMIJQAg.k0gTyNlOPz_Q';
function UrlExists(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    if (http.status != 404)
        //  do something
    else
        window.location.reload();
}

Use this function and pass the URL as Parameter.if the status is not 404 then nothing will happen or you can do something else it will refresh the page as per your requirement.

edited Sep 11 '15 at 02:09

Majid Fouladpour

29,356
21
76
127

answered Oct 29 '14 at 13:07

Amit Guleria

211
2
11

Status always return as `0` for me. – Valachio Jan 25 '18 at 03:42

Adam Sparks · Answer 2 · 2019-03-31T18:19:35.663

12

I know this is an old question, but here is an updated way of doing it with fetch (doesn't work on IE):

function urlExists(url, callback) {
  fetch(url, { method: 'head' })
  .then(function(status) {
    callback(status.ok)
  });
}

let url = 'https://mapsengine.google.com/map/embed?mid=zGLD-nMIJQAg.k0gTyNlOPz_Q';

urlExists(url, function(exists) {
  if (exists) {
    // it exists, do something
  } else {
    // it doesn't exist, do something else
  }
});

edited Mar 31 '19 at 18:19

answered Mar 26 '17 at 09:23

Adam Sparks

497
5
12

It says `ok is not defined` in the console – Marvin Oct 28 '18 at 20:40
What are main differences between fetch and XMLHttpRequest method above? Isn't XMLHttpRequest using head therefor more efficient for this purpose? – Armin Nikdel Mar 13 '19 at 10:24
1

@ArminNikdel If you use one, and have your dev console open, you will get a message that reads: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ Simply put... They are bad for performance. – Aug 22 '21 at 19:32

detect 404 error on page load

2 Answers2

Linked