[CodeSharing] Gestionnaire d'erreurs. Avis ?

Willpower · 08/02/2011, 18h54

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// by dessy boris
// for test just include jQuery in a html page and this file(name it : "handler.js")
// sample like this :
/*
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="handler.js"></script>
*/
// welcome ^^
 
var handler = {
		log : function(msg,type){
				var p = type=='function'?'()':'';	
				console.log(type+' : '+handler.level+msg+p);
				// logFile isn't used here, but you can use for send packet with all log to your server via ajax.
				handler.logFile.push(type+':'+msg);
		},
		exception : function(err,o,arg,name,f){
				handler.log(err,'## error');
				// -- you can do lot of things to handle your error here
				//-----------------
				// fn.name = name;
				// fn = f;
				// fn.caller =  arguments.callee.caller.caller
				// object = o;
				// arguments = arg;
				// error = err;
				//-----------------
		},
		create : function(f,name){	
				// return a new function to replace original
				return function(){
					// log function call
					handler.log(name,'function');
					// increment deep level of call
					handler.level += '--';
					// make the call and catch(+log) error
					try{ 	var r = f.apply(this,arguments);	}
					catch(e){	 handler.exception(e,this,arguments,name,f);		}
					// decrement deep level of call
					handler.level = handler.level.substr(2);
					// return value of call
					return r;
				};
		},
		init : function(o,restrict){
				handler.log('_begin','handling');
				// browse all functions of the object (except the restricted)
				for(var i in o) if(typeof o[i] == 'function') if(!restrict || restrict[i]==undefined){
					// overwrite each function with new
					o[i] = handler.create(o[i],i);	
				}
				handler.log('_end','handling');	
		},
		logFile : [],
		level : ''
};
 
myOwnFn = {};
 
 
$(document).ready(function() {
	// create console if none is define		   
	if(!window.console){
		window.console = document.createElement('div');
		console.setAttribute('style','position:absolute;top:0;right:0;height:150px;width:400px;border:solid black 1px;overflow:auto;background-color:white;');
		console.innerHTML = '<b>CONSOLE:</b><br/>';
		document.body.appendChild(console);
		console.log = function(msg){this.innerHTML += '-'+msg+'<br/>';this.scrollTop=999999;};
	}
	console.log('console : initialized');
 
 
	// SAMPLES :
 
	// handling myOwnFn
	handler.init(myOwnFn);
 
	// handling jQuery.fn
	handler.init(jQuery.fn,{init:1});
 
	// sample of use (of jQuery)
	$('<div id="test">hello world(click me)</div>').appendTo('body');
	$('#test').click(	function(){	$('#test').fadeOut();}		);
});

Voila, je viens de coder ça en une petite heure (donc, oui, il y a encore certainement plein d'erreurs.)

Mais je voudrais connaitre votre avis sur ce bout de code ? Intéressant ? Inutile ? Toutes critiques seront les bienvenues.

Pour le tester, ajoutez simplement jQuery et ce bout de code à une page vierge. (sous Chrome, j'utilise la console du navigateur, pour les autres je créé un div qui affiche les logs.)

Evidement, dans certains cas, certaines fonctions ne pourront pas être remplacées pour diverses raisons. (appel au "caller" ou utilisation de variables locales ou que sais-je?). Pour ce faire, j'ai prévu un paramètre qui permet de spécifier les fonctions qu'on ne souhaite pas remplacer. Comme par exemple la fonction "init" de jQuery.fn qui faisait planter le bazar. (mais justement grâce à ce gestionnaire d'erreurs, j'ai pu voir directement la fonction qui posait problème ! l'est pas belle la vie ? )

Willpower · 09/02/2011, 04h48

première correction :
la surcharge de la fonction "init()" de jQuery ne fonctionnait pas car elle était appelée par un "new". j'ai donc rajouté la gestion des fonction "constructeurs" qui instancient de nouveaux objets :

CODE CORRIGE:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// by dessy boris
// for test just include jQuery in a html page and this file(name it : "handler.js")
// sample like this :
/*
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="handler.js"></script>
*/
// welcome ^^
 
var handler = {
		log : function(msg,type){
				var p = type=='function'?'()':'';	
				console.log(type+' : '+handler.level+msg+p);
				// logFile isn't used here, but you can use for send packet with all log to your server via ajax.
				handler.logFile.push(type+':'+msg);
		},
		exception : function(err,o,arg,name,f){
				handler.log(err,'## error');
				// -- you can do lot of things to handle your error here
				//-----------------
				// fn.name = name;
				// fn = f;
				// fn.caller =  arguments.callee.caller.caller
				// object = o;
				// arguments = arg;
				// error = err;
				//-----------------
		},
		create : function(f,name){	
				// return a new function to replace original
				return function(){
					// log function call
					handler.log(name,'function');
					// increment deep level of call
					handler.level += '--';
					// make the call and catch(+log) error
					try{ 	var r = f.apply(this,arguments);	}
					catch(e){	 handler.exception(e,this,arguments,name,f);	}
					// decrement deep level of call
					handler.level = handler.level.substr(2);
					// return value of call
					return r;
				};
		},
		init : function(o,restrict){
				handler.log('_begin','handling');
				var f;
				// browse all functions of the object (except the restricted)
				for(var name in o) if(typeof o[name] == 'function') if(!restrict || restrict[name]==undefined){
					f=o[name];
					// overwrite each function with new
					o[name] = handler.create(f,name);	
					o[name].prototype = f.prototype;
				}
				handler.log('_end','handling');	
		},
		logFile : [],
		level : ''
};
 
myOwnFn = {
	initPage : function(){		
		$('<div id="test">hello world(click me)</div>').appendTo('body');
		$('#test').click(	function(){	$('#test').fadeOut();}		);
	}
};
 
$(document).ready(function() {
	// create console if none is define		   
	//if(!window.console){
		window.console = document.createElement('div');
		console.setAttribute('style','position:absolute;top:0;right:0;height:150px;width:400px;border:solid black 1px;overflow:auto;background-color:white;');
		console.innerHTML = '<b>CONSOLE:</b><br/>';
		document.body.appendChild(console);
		console.log = function(msg){this.innerHTML += '-'+msg+'<br/>';this.scrollTop=999999;};
	//}
	console.log('console : initialized');
 
 
	// SAMPLES :
 
	// handling myOwnFn
	handler.init(myOwnFn);
 
	// handling jQuery.fn
	handler.init(jQuery.fn);
 
	// sample of use (of jQuery)
	myOwnFn.initPage();
});

ps: jQuery n'est qu'un exemple de surcharge ici, mon code n'utilise pas jQuery. [smile][/i][/i][/i][/i]

Willpower · 09/02/2011, 17h08

Franchement, vous ne pensez pas que ça pourrait faciliter le débogage de codes possédant beaucoup de fonctions ?

Moi, je pense qu'en l'améliorant un peu, ce code pourrait être vraiment utile ... je pourrais en créer un article/source/tuto sur ce site, non ?

dukej · 09/02/2011, 17h28

Citation:

Envoyé par Willpower

Franchement, vous ne pensez pas que ça pourrait faciliter le débogage de codes possédant beaucoup de fonctions ?

Moi, je pense qu'en l'améliorant un peu, ce code pourrait être vraiment utile ... je pourrais en créer un article/source/tuto sur ce site, non ?

Le débogage de javascript ne se fait pas à coup de console.log ou console.info ou détection des erreurs et affichage dans une console (div ou console du navigateur)

Soit tu active le "break on error" de firefox pour qu'il colle automatiquement un point d'arrêt dans le code. ou alors tu colles toi même ton point d'arrêt.
Ainsi comme un vrai développeur tu pourras regarder la pile de fonction, les variables ou autres qui sont visibles dans le scope de la fonction.

Et les points d'arrêts on peut en mettre sous :
Chrome, Safari, Firefox (firebug), IE8+, pour IE6 et 7 il faut le MS Script debugger qui est livré avec MS Office. Pour Opera je ne sais pas, je n'ai jamais besoin de débugger avec quand j'ai débuggé dans les premiers si erreur il y a.

Willpower · 09/02/2011, 17h32

Citation:

Envoyé par dukej

Le débogage de javascript ne se fait pas à coup de console.log ou console.info ou détection des erreurs et affichage dans une console (div ou console du navigateur)

Soit tu active le "break on error" de firefox pour qu'il colle automatiquement un point d'arrêt dans le code. ou alors tu colles toi même ton point d'arrêt.
Ainsi comme un vrai développeur tu pourras regarder la pile de fonction, les variables ou autres qui sont visibles dans le scope de la fonction.

Et les points d'arrêts on peut en mettre sous :
Chrome, Safari, Firefox (firebug), IE8+, pour IE6 et 7 il faut le MS Script debugger qui est livré avec MS Office. Pour Opera je ne sais pas, je n'ai jamais besoin de débugger avec quand j'ai débuggé dans les premiers si erreur il y a.

Okay, j'avoue que je ne m'y connais pas énormement en javascript.

Mais en fait, ce serait surtout pour faire un gros site en ajax (dans le genre facebook qui appelle en permanence des fonctions JS pour des refresh via serveur) et je me dis qu'il pourrait en ressortir des bugs "inconnus"(du developpeur) qui pourraient par exemple être loggés sur le serveur et ainsi faciliter leurs détections et leurs corrections. Mon idée est mauvaise ?

dukej · 09/02/2011, 22h23

Citation:

Envoyé par Willpower

Okay, j'avoue que je ne m'y connais pas énormement en javascript.

Mais en fait, ce serait surtout pour faire un gros site en ajax (dans le genre facebook qui appelle en permanence des fonctions JS pour des refresh via serveur) et je me dis qu'il pourrait en ressortir des bugs "inconnus"(du developpeur) qui pourraient par exemple être loggés sur le serveur et ainsi faciliter leurs détections et leurs corrections. Mon idée est mauvaise ?

Dans un sens tu n'as pas tord de faire ça, car débugger une boucle for c'est chiant, et on est bien content d'avoir un logger pour ensuite analyser le bordel

Mais sinon, regarde du coté de : http://getfirebug.com/firebuglite

09/02/2011, 17h08	#3
Willpower Membre Expert Boris Dessy sans emploi Inscription : décembre 2010 Messages : 847 Détails du profil Informations personnelles : Nom : Boris Dessy Localisation : Belgique Informations professionnelles : Activité : sans emploi Informations forums : Inscription : décembre 2010 Messages : 847 Points : 1 344 Points : 1 344	Franchement, vous ne pensez pas que ça pourrait faciliter le débogage de codes possédant beaucoup de fonctions ? Moi, je pense qu'en l'améliorant un peu, ce code pourrait être vraiment utile ... je pourrais en créer un article/source/tuto sur ce site, non ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email