Javascript Global Error Handler

Today i’have created a simple class to log in the backend the javascript error, so i can have a real time monitoring of how error appear to the users.

We can use a window.onerror and the addEventListener rewrite.

Window.onerror has been available in most browser, but the argument that are passed on each browser are different:

BrowserMessageURLlineNocolNoerrorObj
Firefox
Chrome
Edge
IE 11
IE 10
IE 9, 8
Safari 10 and up
Safari 9
Android Browser 4.4

This is my class with a _wrap function, and a SendError that trasmit the data on the backend

class ErrorHandler {

	constructor() {
		let $this = this;
		$this._prototypeInit();

		window.onerror = function (message, file, line, col, error) {
			let data = message+" from "+error.stack;
			$this.SendError(data);
		};
	}

	_prototypeInit() {
		let $this = this;
		var addEventListener = window.EventTarget.prototype.addEventListener;
		window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
			addEventListener.call(this, event, $this._wrap(callback), bubble);
		}
		var removeEventListener = window.EventTarget.prototype.removeEventListener;
		window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
			removeEventListener.call(this, event, callback._wrapped || callback, bubble);
		}
	}

	_wrap(func) {
		let $this = this;
		if (!func._wrapped) {
			func._wrapped = function () {
				try {
					func.apply(this, arguments);
				} catch (e) {
					let data = e.message+" from "+e.stack;
					$this.SendError(data);
					throw e;
				}
			}
		}
		return func._wrapped;
	}

	SendError(message) {
		let $this = this;
		fetch('/ErrorHandler/WriteLog', {
			method: 'POST',
			body: JSON.stringify({ message: message }),
			headers: {
				'Content-Type': 'application/json'
			}
		}).then(res => res.json()).catch(error => console.error('Error:', error));
	}
}

In the message we put the stacktrace.
To use it at the init of your application:
let handlerError = new HandlerError();

Write to me if you have some suggestion to improve it.

WordPress Plugin Creation Tutorial – Simplest way

Today I asked myself how to explain to a junior, how to create a wordpress plugin, the simplest way. Without the inclusion of complex structures with public folder, includes, ….., but something very very simple.

Below I will explain how to create a plugin to manage some date, in this example is a Sport Race:
– Create Sport Race
– Insert members of a Sport Race
– Show table with Sport Race, and manage data (bulk delete)
– Show table with Sport Race, and manage data (bulk delete)
– Upload media using WordPress System (media manager of wordpress)

You can download it on: GITHUB

The structure of the project in the Plugin name directory is:

As you can see, a simple list of file with no directory

My project as two section: Sport Race and Members
Each section is composed by two file: _page.php and _table.php
And a file of system: plugin_activation.php

For example now analyze two file: sportrace_page.php and sportrace_table.php

For the sportrace_table.php will explain in the next article how to create a table, now take a look at file, is very simple.
For now i will explain how to use it in the sportrace_page.php

At top of page we put

<?php 
global $wpdb;

// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
?>

For the inclusion of table put:

<?php 
echo '<form method="post">';
require_once 'sportrace_table.php';
$class = new Sportrace_Table();
$class->prepare_items();
$class->display();
echo '</form>';
?>

In the plugin_activation.php you can find the mysql create query and the menu inclusion!

Let’s start to create your wordpress plugin! Simple and Fast!