O'Reilly

Send Email Notifications for Broken Images Using MooTools AJAX

By on  

One of the little known JavaScript events is the image onError event. This event is triggered when an image 404's out because it doesn't exist. Broken images can make your website look unprofessional and it's important to fix broken images as soon as possible. I've created a MooTools / PHP script that listens for image errors, triggers an AJAX call to a PHP script, and that PHP script sends an email letting me know about the problem.

The MooTools JavaScript

window.addEvent('domready',function() {
	$$('img').addEvent('error',function() {
		var notification = new Request({
			url: 'ajax-image-error.php',
			method: 'post',
			data: {
				'image': this.get('src'),
				'page': window.location.href
			}
		}).send();
	});
});

You'll notice that I listen for the error event. You'll also notice that I only send two parameters: the image path and the page the broken image is living (or dying) on.

The PHP

if(isset($_POST['image']))
{
	$to = '[email protected]';
	$from = '[email protected]';
	$subject = 'Broken Image';
	$content = "The website is signaling a broken image!\n\nBroken Image Path:  ".stripslashes($_POST['image'])."\n\nReferenced on Page:  ".stripslashes($_POST['page']);
	$result = mail($to,$subject,$content,'From: '.$from."\r\n");
	die($result);
}

Nothing special within the email -- just the parameters we put into the AJAX call. This bare email will provide us enough information to solve the problem.

One addition to the MooTools script could be to remove the image from the page so that the user doesn't notice the problem. Have any suggestions? Share them!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

Discussion

  1. I have only one question — why do it client side? I mean, since you can make a custom e404 page (or any error) you can make the error page to handle the emails.

    Further more to avoid the “missing image” issue, you could return a 1×1 transparent gif / jpg / png to e404 requests for images. Or to make it even more advance, you could customize the return image depending on the path of the image, say 100×75 jpg if the request matches /images/thumbs.

    Of course the above mentioned approach reqiers more code.

    On a side note — is this post related to this article?

  2. @Иван: Note that this is about broken images, not broken pages. Good idea about a custom missing images image.

  3. Oh that is perfect! Nice and simple.

  4. anon

    why not just grep your logfiles? iif the page with the broken image gets dugg then your going to get a bunch of emails.

  5. I think that this article (and Benajmin Sterling’s comment) hits it on the head – this is a simple, interesting approach to an issue, and can be applied more than one way.

    This method? Anyone can handle implementing (okay, anyone with some basic code knowledge) – grepping your error log or doing custom 404 pages isn’t exactly something anyone can do.

    That, and this is a very simple method to apply to pretty much any loaded method on a page (SWF, JS, CSS….) very cool idea.

  6. umo

    Great post, never thought about this. The concept is great, however I must agree with “anon” that an active site might spanban the server smtp.

    Why not complete the email code with a seperate log entry, or a database entry? With a database entry, just one email could be sent at the first broken image hit, and the image path could serve as an identifier for the log entry.

  7. Seth

    I love this site! Not because I necessarly have a use for this myself, but I didn’t know about the error event. That is huge! Keep it up

  8. Good script!
    But a version with jquery it’s possible?
    Thanks,Mte90

  9. Interesting, it works with http://dummysite/image.jpg but fails with image.jpg

    scratching my head to figure what’s going on….

  10. Superb Post. Better then the simillar post I seen couple of days ago online. Keep up the good work.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...