A little 404 Error Document Magic

Published in Web Development on Thursday, August 12th, 2004

Putting a custom 404 script to work behind the scenes to help find broken images on your site.

While monkeying around with an error document for a clients site, I accidentally discovered a neat solution to a problem we were having. While rather specific to the situation, I thought I'd post it up here as maybe someone could extend it in other directions, or maybe there are other ways to solve the issue we were having. Please, feel free to brainstorm or share ideas in the comments...

The case of the missing images

The client in question has roughly 600 images that are used on various pages within their website. They have in house staff that prep all of the images, thumbnails and larger versions. Image names are entered into their in-house database app, and the db and image files are uploaded/updated nightly.

As should be expected in such situations, sometimes either the thumbnail or large versions are mistakenly not created, or files are mis-named between the actual image and the value that they record in the database. This leads to problems in the form of missing images on their website.

Missing image = 404

The little trick involved here is quite simple, and relies on the fact that the missing image results in a 404 - not found error. By using a custom error document (in our case php driven - for more on error docs, perhaps start with The Great Custom 404 Page Adventure) and checking the $_SERVER['REQUEST_URI'], we are able to check if the request was from the image folder, and if so record the name of the missing image in a database.

Subtle beauty

The kicker of this is that a list of broken images is built up and stored in the db as users browse the site. We pass on the list to the client and they clean up the mess. Quick and effective.

Comments and Feedback

Your custom error document could even use some output buffering, save the missing image details into a database, flush the buffer, then send a JPEG or GIF header and write out a pre-prepared (or specially generated) "missing" image, so the page isn't left with a hole. Maybe a grey background with "image temporarily offline" written across it. Elegant and useful...

You could improve this by having your system automatically create missing thumbnails on-the-fly using something like Image Magick (where possible).

Hey good thinking. That looks like an effective solution, especially with the above mentioned additions. Now, what I really want to know is, can you create a 404 page that'll make us coffee and bagels?

Low-carb bagels, that is.

No way. Enough with that Atkins crap. Get some excercise!

Perhaps you could take it one step further, and use the missing image name to generate a set of search results from the image folder? That way if someone accidentally mistyped an image name your search results might help them find what they were looking for (or another interesting image).

Of course, for some sites this would be overkill, it does depend upon what those images are - and how they are named. It also requires a nice search function, but that should be easy.

Talking about coffee & bagel 404 pages, I was asked to modify one client's website and found that every dynamic page was generated from a 404 page error - the designer thought it was cute to use multiple nested imaginary folder names, but then only interpreted the last part of the URL in order to get the identify of the data the user actually wanted. This led to maintenance being very cumbersome.

Check out the blog categories for older content