Ajax-Powered Error Logs for WordPress

In my previous post, I share my technique for Ajax-Powered Error Logs. That tutorial shows you how to set up dynamic error monitoring on any typical website, but the script requires some tweaking to get it working with WordPress. In this quick post, I explain how to set up Ajax Error Logs specifically for WordPress sites.

About the different methods

By default, WordPress handles 404 errors for anything under its control. For example, if WordPress is installed in the root directory of your site, it pretty much handles all 404 (Not Found) errors for the entire site. In this scenario, implementing an Ajax Error Log as directed in the original tutorial is going to be difficult because WordPress will be intercepting the 404 errors and making them unavailable to the Ajax Error script. Of course, the easiest way around this is to replace your theme’s 404.php file with a customized version of the Ajax Error script that is designed to work with WordPress. This is more or less what we’re doing in this tutorial.

The other scenario is that WordPress is installed in a SUBdirectory, in which case you have two options: either implement the Ajax Error Log as directed in the original tutorial (placed outside of the WordPress installation directory), or follow along with this tutorial and integrate the Ajax functionality into your existing subdirectory WP installation.

Ajax Error Logs for WordPress

Most of the information and tips in the original tutorial also applies to this WordPress-specific implementation, so I’ll be focusing only on the key steps required to make it happen with WordPress. That said..

Step 1: Prepare the Database

This step is the same as before, only this time we’re creating the error_log table within our existing WordPress database. This is key for the technique to work with WordPress. Here again is the SQL query to set it up:

CREATE TABLE `error_log` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `logtime` varchar(200) NOT NULL default '',
  `request` varchar(200) NOT NULL default '',
  `referer` varchar(200) NOT NULL default '',
  `qstring` varchar(200) NOT NULL default '',
  `address` varchar(200) NOT NULL default '',
  `agent` varchar(200) NOT NULL default '',
  `error` varchar(200) NOT NULL default '',
  PRIMARY KEY  (`id`),
  cur_timestamp TIMESTAMP(8)
) AUTO_INCREMENT = 1

That should create a table named “error_log” in your database. This is where we will be storing the data collected from our 404.php file, which we set up next.

Step 2: Create the custom error page

Create a blank file named 404.php, and fill it with the following PHP code:

<?php
/*
Template Name: Ajax Error Log - 404 Page
Dynamic Error Logging by Jeff Starr @ Perishable Press
Project URL: https://perishablepress.com/ajax-error-log/
License: GNU General Public License
Version: 1.0
*/

// site URL (no trailing slash!)
$website = "http://example.com";

// set headers for error page
header("HTTP/1.1 404 Not Found");
header("Status: 404 Not Found");

// WordPress
get_header();

// set some server variables
$logtime = date("F jS Y, h:ia", time() - 10800);
$request = $site . $_SERVER['REQUEST_URI'];
$referer = $_SERVER['HTTP_REFERER'];
$qstring = $_SERVER['QUERY_STRING'];
$address = $_SERVER['REMOTE_ADDR'];
$agent   = $_SERVER['HTTP_USER_AGENT'];
$error   = "404"; // for other errors

// sanitize server variables
$logtime_esc = mysql_real_escape_string($logtime);
$request_esc = mysql_real_escape_string($request);
$referer_esc = mysql_real_escape_string($referer);
$qstring_esc = mysql_real_escape_string($qstring);
$address_esc = mysql_real_escape_string($address);
$agent_esc   = mysql_real_escape_string($agent);

// insert record and close database
$query  = "INSERT INTO `error_log` (logtime,request,referer,qstring,address,agent,error) ";
$query .= "VALUES ('$logtime_esc','$request_esc','$referer_esc','$qstring_esc','$address_esc','$agent_esc','$error')";
$result = @mysql_query($query);

// and finally output the html
?>

		<div class="left">
			<div class="post">
				<h1>Error 404 — Not Found</h1>
				<p>The requested resource was not found on this server.</p>
				<div class="content">
					<p><?php echo "Requested URL: " . $website . $request_esc; ?></p>
				</div>
			</div>
		</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The required edit is for the first variable, $website – just change that to match your site’s URL. Once you’ve got the code in place, just add the 404.php file to your active WordPress theme directory. If your theme already contains a 404.php file, rename it to something like “404_ORIGINAL.php” and then add the custom 404.php file.

Step 3: Create the WordPress Pages

At this point, 404 errors should be getting recorded in the database, and your custom 404 page should be displayed whenever there’s an error. This is pretty useful as-is, but we also want to display the errors on a page somewhere so we can keep an eye on things.

To display the results from our error_log database table, we need to create two pages in WordPress:

• Display Page – a private page used to display the Ajax Error Log
• Processing Page – a hidden page used to generate data for the Display Page

So create these two pages in the WordPress Admin and name them something like “Display Page” and “Process Page” (or whatever). Note the URL for each of these pages for later use.

Step 4: Create the Page Templates

The next step is to add the two page templates to your WordPress theme files. First, create a theme template file named something like “page-ajax-process.php” and add the following code:

<?php
/*
Template Name: Ajax Error Log - Processing Script
Dynamic Error Logging by Jeff Starr @ Perishable Press
Project URL: https://perishablepress.com/ajax-error-log/
License: GNU General Public License
Version: 1.0
*/

// site URL (no trailing slash!)
$website = "http://example.com";

// create the sql query
$query = 'SELECT id,logtime,request,referer,qstring,address,agent,error
 FROM error_log ORDER BY id DESC LIMIT 50'; // defaults to 50 entries

// execute query and return records
$result = @mysql_query($query);
$number = @mysql_num_rows($result);

// display the results
while($row = mysql_fetch_array($result)) {
	echo '<div class="log-entry"><pre>';
	echo 'Error: '.htmlspecialchars($row['error']);
	echo ' - '.htmlspecialchars($row['logtime'])."\n";
	echo 'Request: '.$website.htmlspecialchars($row['request'])."\n";
	echo 'User Agent: '.htmlspecialchars($row['agent'])."\n";
	echo 'IP Address: '.htmlspecialchars($row['address']);
	echo '</pre></div>';
}
?>

Only one edit to make: the $website variable needs set to your site’s URL. Once you’ve done that, save the file and upload it to the server. Then visit your newly created “Processing Page” in the WordPress Admin and set the page template to “Ajax Error Log - Processing Script”.

Next, create a second page template in your theme files and name it something like “page-ajax-display.php”. Inside that file, place the following code:

<?php
/*
Template Name: Ajax Error Log - Display Results
Dynamic Error Logging by Jeff Starr @ Perishable Press
Project URL: https://perishablepress.com/ajax-error-log/
License: GNU General Public License
Version: 1.0
*/
?>

<?php get_header(); ?>

	<div id="ajax-error-display">
		<style>
			#ajax-error-display { width: 735px; margin: 0 auto; }
			pre {
				font: 10px/1.5 Courier, "Courier New", mono;
				background-color: #efefef; border: 1px solid #ccc;
				width: 700px; margin: 7px; padding: 10px;
				white-space: pre-wrap;
				}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#results").load("AjaxErrorLog.php");
				var refreshId = setInterval(function() {
					$("#results").load("/wordpress/ajax-error-log-process/").fadeIn("slow");
				}, 2000); // refresh time (default = 2000 ms = 2 seconds)
			});
		</script>
		<noscript><div id="response"><h1>JavaScript is required for this demo.</h1></div></noscript>
		<div id="results"></div>
	</div>

<?php get_footer(); ?>

Only one edit is required for this code to work – change the /wordpress/ajax-error-log-process/ path in the jQuery snippet to match the permalink of your own processing page. Once you’ve got that, just save the file and upload to your server. Then visit your newly created “Display Page” in the WordPress Admin and set the page template to “Ajax Error Log - Display Results”.

Note that jQuery is included from Google’s API server. If you’re sure that jQuery is already included elsewhere on the page, then you should delete (or comment out) the following line in the code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

Viewing your site’s errors

That’s pretty much it. At this point everything should be up and running. You can view the 404 errors for your site by visiting your new Display Page. To trigger some test errors, visit a URL on your site that doesn’t exist, like http://your-site.com/thereisnowaythispageexistsonyourserver or whatever. Once you’re sure it’s all working properly, open the Display page in a new window to keep an eye on your site’s 404 errors, which are also stored in your database for extended use.

As discussed in the original tutorial, there are ton of possibilities for this technique, which by default is very basic. Once you get everything up and running, I encourage you to experiment, modify, and customize the technique to suit your needs.

Live Demo

To the Ajax Error Log working on a live WordPress site, do the following:

1. Open the Demo Page in a new window (not tab)
2. With both the current browser window and the Demo Page window in view, click this link to trigger a 404 error (please click only once or twice :)
3. Watch the 404 error magically appear in the Ajax Error Log

Notes

As with the non-WordPress tutorial, please only click the error link a few times to get the idea and see it working. Then if you like the effect, grab the files and roll one up for yourself. It’s really pretty basic stuff, but you don’t want to make the log display file public like I’m doing with the Demo. Keeping the Display Page private helps minimize potential server load.

Note that as of 2015/04/26, this demo actually is the demo used for the regular Ajax Error Log (i.e., non-WordPress version). The underlying logic is the the same, but the steps to get there are a bit different. In either case, the end result basically is the same.

Download the files

Here you may download the source files for Ajax Error Log for WordPress.

Electric eye on you..

In this Perishable Press tutorial, we’ve seen how to implement my dynamic error logging technique in an existing WordPress site. Much more information is available in the original article, so check there for all the gory details. If you have questions, concerns, or improvements, please explain in the comments or send via email. Muchas gracias, señors and señoritas! ;)

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.