Comment récupérer la ligne qui a causé une erreur ?

**schnee** · 14/09/2014, 17h50

Bonjour,

J'ai développé dans mon système de gestion de contenu un module qui capte les erreurs javascript chez les visiteurs et envoie un rapport sur le serveur par Ajax.
Pour certains navigateurs, l'objet error me donne le numéro de la ligne où l'erreur s'est produite. Quand il s'agit d'un fichier .js, ça aide en effet, mais quand le script se trouve à l'intérieur du code qui a produit la page, ce nº ne sert à rien, parce qu'il n'a rien à voir avec la ligne dans le code qui a produit la page finale, d'où ma question:

Est-ce que qq'un aurait un truc pour récupérer non pas le nº, mais le CONTENU de la ligne qui a produit l'erreur ?
Merci.

**sekaijin** · 15/09/2014, 07h11

perso je ne mets jamais de code js dans le HTML
ça règle bien des problèmes.

mais non le parseur JS ne connais que le code JS et se réfère donc aux info qu'il a

de même je ne mets pas de code JS and les échanges ajax seulement des données
ainsi pas de problème en cas d'erreur elle viens nécessairement d'un fichier js et non d'un contenu ajax.

A+JYT

**schnee** · 15/09/2014, 17h07

perso je ne mets jamais de code js dans le HTML
ça règle bien des problèmes.

Bien sûr, cependant dans un système qui génère du HTML dynamique, que ce soit avec PHP, ASP ColdFusion etc. c'est bien utile, voire indispensable, que le système introduise, ne serait-ce que des définitions de variables, dans le HTML.

mais non le parseur JS ne connais que le code JS et se réfère donc aux info qu'il a

Pourtant quand il donne le nº de la ligne dans le fichier source qui a causé l'erreur, il doit bien tenir cette information de quelque part, et quand le débuggeur affiche le source et la ligne en question, il a bien été capable de la retrouver.

Je retrouve bien le code source dans document.documentElement.innerHTML, mais ça ne contient que ce qui est inclus dans la balise <HTML>, ça ne tient pas compte des lignes qui précèdent, comme le DOCTYPE, les commentaires etc. donc les nº de ligne sont décalés.

**sekaijin** · 15/09/2014, 20h48

le Parseur javascript reçois du navigateur des flux de string
ces flux viennent des fichiers JS
là le parseur sais repérer le numéro de ligne dans le fichier.

et du contenu des balise <script>
dans ce cas le parseur reçois que le contenu de la balise il ne peux donc commencer à numéroter qu'à partir du début du contenu il ne reçois pas le reste.

document.documentElement.innerHTML ne contient pas le code source mais la stérilisation du DOM

le navigateur reçois un source HTML
il le parce et crée un DOM
si le source n'est pas conforme le moteur HTML implémente un DOM au mieux. le DOM c'est a dire les élément HTML que tu vois dans ton navigateur ne sont donc pas les balises html de ton code source mais les objet DOM créé par le moteur HTML.

il peut donc déjà y avoir une divergence.
en suite la page vie sa vie et des éléments du DOM sont crée et supprimé dynamiquement.

à un instant t le DOM est le résultat de toute ces actions.

lorsque tu fait appel à document.documentElement.innerHTML tu demande au Moteur HTML de générer une chane de caractère à partir du DOM (sérialisation)
cette string a toute les chance d'être différente du code source de ta page.

si tu utilise chrome ou firefox tu as deux menu "afficher la source" et "inspecter l'élément"
la première te montre le code sources et le second présente le DOM sous forme de chaine.
pour illustrer mon propos voici un exemple

Code html :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ExtTop - Desktop Sample App</title>
 
    <link rel="stylesheet" type="text/css" href="css/desktop.css" />
 
    <!-- GC -->
 
    <!-- <x-compile> -->
    <!-- <x-bootstrap> -->
    <script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
    <script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
    <!-- </x-bootstrap> -->
    <script type="text/javascript">
        Ext.Loader.setPath({
            'Ext.ux.desktop': 'js',
            MyDesktop: ''
        });
 
        Ext.require('MyDesktop.App');
 
        var myDesktopApp;
        Ext.onReady(function () {
            myDesktopApp = new MyDesktop.App();
        });
    </script>
    <!-- </x-compile> -->
</head>
 
<body>
 
    <a href="http://www.sencha.com" target="_blank" alt="Powered by Ext JS"
       id="poweredby"><div></div></a>
 
</body>
</html>

et

Code html :

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
<html class="x-strict x-viewport"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ExtTop - Desktop Sample App</title>
 
    <link rel="stylesheet" type="text/css" href="css/desktop.css">
 
    <!-- GC -->
 
    <!-- <x-compile> -->
    <!-- <x-bootstrap> -->
    <script type="text/javascript" src="../../examples/shared/include-ext.js"></script><link rel="stylesheet" type="text/css" 
href="http://docs-origin.sencha.com/extjs/4.2.2/extjs-build/resources/css/ext-all-neptune-debug.css">
<script type="text/javascript" src="http://docs-origin.sencha.com/extjs/4.2.2/extjs-build/ext-all.js"></script>
<script type="text/javascript" src="http://docs-origin.sencha.com/extjs/4.2.2/extjs-build/packages/ext-theme-neptune/build/ext-theme-neptune.js" defer=""></script>
    <script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
    <!-- </x-bootstrap> -->
    <script type="text/javascript">
        Ext.Loader.setPath({
            'Ext.ux.desktop': 'js',
            MyDesktop: ''
        });
 
        Ext.require('MyDesktop.App');
 
        var myDesktopApp;
        Ext.onReady(function () {
            myDesktopApp = new MyDesktop.App();
        });
    </script><script type="text/javascript" src="App.js?_dc=1410806578439"></script>
    <!-- </x-compile> -->
<script type="text/javascript" src="js/App.js?_dc=1410806578541"></script><script type="text/javascript" src="js/ShortcutModel.js?_dc=1410806578542"></script><script type="text/javascript" src="SystemStatus.js?_dc=1410806578542"></script><script type="text/javascript" src="VideoWindow.js?_dc=1410806578544"></script>
<script type="text/javascript" src="GridWindow.js?_dc=1410806578545"></script><script type="text/javascript" src="TabWindow.js?_dc=1410806578546"></script><script type="text/javascript" src="AccordionWindow.js?_dc=1410806578552"></script><script type="text/javascript" src="Notepad.js?_dc=1410806578557"></script><script type="text/javascript" src="BogusMenuModule.js?_dc=1410806578560"></script><script type="text/javascript" src="BogusModule.js?_dc=1410806578561"></script>
<script type="text/javascript" src="Settings.js?_dc=1410806578564">
</script><script type="text/javascript" src="js/Desktop.js?_dc=1410806578750"></script><script type="text/javascript" src="js/Module.js?_dc=1410806578814"></script>
<script type="text/javascript" src="js/Wallpaper.js?_dc=1410806579031"></script><script type="text/javascript" src="WallpaperModel.js?_dc=1410806579031"></script><script type="text/javascript" src="js/TaskBar.js?_dc=1410806579032"></script>
<script type="text/javascript" src="js/Video.js?_dc=1410806579033"></script><script type="text/javascript" src="js/StartMenu.js?_dc=1410806579250"></script></head>
 
<body class="x-body x-webkit x-chrome x-mac x-theme-neptune x-layout-fit x-border-box x-container x-container-default" id="ext-gen1018" style="">
<div class="x-panel x-fit-item x-panel-default" id="desktop-1013" style="margin: 0px; width: 1039px; height: 96px;"><div id="desktop-1013-body" class="x-panel-body x-panel-body-default x-layout-fit x-panel-body-default x-noborder-trbl" role="presentation" style="width: 1039px; left: 0px; top: 0px; height: 60px;">
<div class="x-component ux-wallpaper x-fit-item x-component-default ux-wallpaper-tiled" id="desktop-1013_wallpaper" style="margin: 0px; width: 1039px; height: 60px; background-image: url(http://docs-origin.sencha.com/extjs/4.2.2/extjs-build/examples/desktop/wallpapers/Blue-Sencha.jpg);"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" id="ext-gen1099" style="visibility: hidden;"></div><div class="x-component x-fit-item x-component-default" style="position: absolute; left: 0px; top: 0px; right: auto; margin: 0px; width: 1039px; height: 60px;" id="dataview-1055" tabindex="-1"><div class="ux-desktop-shortcut" id="Grid Window-shortcut"><div class="ux-desktop-shortcut-icon grid-shortcut"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" title="Grid Window"></div><span class="ux-desktop-shortcut-text">Grid Window</span></div>
<div class="ux-desktop-shortcut" id="Accordion Window-shortcut"><div class="ux-desktop-shortcut-icon accordion-shortcut"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" title="Accordion Window"></div><span class="ux-desktop-shortcut-text">Accordion Window</span></div><div class="ux-desktop-shortcut" id="Notepad-shortcut"><div class="ux-desktop-shortcut-icon notepad-shortcut"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" title="Notepad"></div><span class="ux-desktop-shortcut-text">Notepad</span></div>
<div class="ux-desktop-shortcut" id="System Status-shortcut"><div class="ux-desktop-shortcut-icon cpu-shortcut"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" title="System Status"></div><span class="ux-desktop-shortcut-text">System Status</span></div><div class="x-clear"></div></div>&nbsp;</div><div class="x-toolbar ux-taskbar x-docked x-toolbar-default x-docked-bottom x-toolbar-docked-bottom x-toolbar-default-docked-bottom x-box-layout-ct x-noborder-rbl" id="taskbar-1020" style="width: 1039px; right: auto; left: 0px; top: 60px;"><div id="taskbar-1020-innerCt" class="x-box-inner " role="presentation" style="width: 1035px; height: 24px;"><div id="taskbar-1020-targetEl" class="x-box-target" role="presentation" style="width: 1035px;"><a class="x-btn ux-start-button x-unselectable x-btn-toolbar x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon-text-left x-btn-icon-text-left x-btn-default-toolbar-small-icon-text-left" hidefocus="on" unselectable="on" tabindex="0" id="button-1047" style="margin: 0px; right: auto; left: 0px; top: 0px;"><span id="button-1047-btnWrap" role="presentation" class="x-btn-wrap x-btn-arrow x-btn-arrow-right" unselectable="on"><span id="button-1047-btnEl" class="x-btn-button" role="presentation"><span id="button-1047-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">Start</span><span role="presentation" id="button-1047-btnIconEl" class="x-btn-icon-el ux-start-button-icon " unselectable="on" style="">&nbsp;</span></span></span></a><div class="x-toolbar x-box-item x-toolbar-item x-toolbar-default x-box-layout-ct" style="border-width: 0px; width: 70px; margin: 0px; right: auto; left: 85px; top: 0px;" id="toolbar-1040"><div id="toolbar-1040-innerCt" class="x-box-inner x-horizontal-box-overflow-body" role="presentation" style="width: 70px; height: 24px;"><div id="toolbar-1040-targetEl" class="x-box-target" role="presentation" style="width: 70px;"><a class="x-btn x-unselectable x-btn-toolbar x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon x-btn-icon x-btn-default-toolbar-small-icon" hidefocus="on" unselectable="on" tabindex="0" id="button-1041" style="right: auto; left: 0px; top: 0px; margin: 0px;"><span id="button-1041-btnWrap" role="presentation" class="x-btn-wrap" unselectable="on"><span id="button-1041-btnEl" class="x-btn-button" role="presentation"><span id="button-1041-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">&nbsp;</span><span role="presentation" id="button-1041-btnIconEl" class="x-btn-icon-el accordion " unselectable="on" style="">&nbsp;</span></span></span></a>
<a class="x-btn x-unselectable x-btn-toolbar x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon x-btn-icon x-btn-default-toolbar-small-icon" hidefocus="on" unselectable="on" tabindex="0" id="button-1042" style="right: auto; left: 32px; top: 0px; margin: 0px;"><span id="button-1042-btnWrap" role="presentation" class="x-btn-wrap" unselectable="on"><span id="button-1042-btnEl" class="x-btn-button" role="presentation"><span id="button-1042-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">&nbsp;</span><span role="presentation" id="button-1042-btnIconEl" class="x-btn-icon-el icon-grid " unselectable="on" style="">&nbsp;</span></span></span></a></div></div><a class="x-btn x-box-inner x-box-menu-after x-toolbar-item x-unselectable x-btn-default-toolbar-small x-icon x-btn-icon x-btn-default-toolbar-small-icon" hidefocus="on" unselectable="on" tabindex="0" id="toolbar-1040-menu-trigger" style="display: none;">
<span id="toolbar-1040-menu-trigger-btnWrap" role="presentation" class="x-btn-wrap" unselectable="on"><span id="toolbar-1040-menu-trigger-btnEl" class="x-btn-button" role="presentation"><span id="toolbar-1040-menu-trigger-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">&nbsp;</span><span role="presentation" id="toolbar-1040-menu-trigger-btnIconEl" class="x-btn-icon-el x-toolbar-more-icon " unselectable="on" style="">&nbsp;</span></span></span></a></div><div class="x-splitter x-toolbar-separator x-toolbar-separator-horizontal x-box-item x-toolbar-item x-splitter-default x-splitter-vertical x-unselectable" style="width: 2px; height: 14px; margin: 0px; right: auto; left: 163px; top: 5px;" id="splitter-1048"></div><div class="x-toolbar ux-desktop-windowbar x-box-item x-toolbar-item x-toolbar-default x-box-layout-ct" style="border-width: 0px; margin: 0px; right: auto; left: 173px; top: 5px; width: 782px;" id="toolbar-1043"><div role="presentation" class="x-box-inner x-box-scroller-left"><div role="presentation" id="toolbar-1043-before-scroller" class="x-box-scroller x-toolbar-scroll-left" style="display:none"></div></div><div id="toolbar-1043-innerCt" class="x-box-inner x-horizontal-box-overflow-body" role="presentation" style="width: 782px; height: 15px;"><div id="toolbar-1043-targetEl" class="x-box-target" role="presentation" style="width: 782px;"><div class="x-toolbar-text x-box-item x-toolbar-item x-toolbar-text-default" id="tbtext-1044" style="right: auto; top: 0px; margin: 0px; left: 4px;">&nbsp;</div></div></div><div role="presentation" class="x-box-inner x-box-scroller-right"><div role="presentation" id="toolbar-1043-after-scroller" class="x-box-scroller x-toolbar-scroll-right" style="display:none"></div></div></div><div class="x-toolbar-separator x-toolbar-separator-horizontal x-box-item x-toolbar-item" id="tbseparator-1049" style="margin: 0px; right: auto; left: 963px; top: 5px;"></div><div class="x-toolbar x-box-item x-toolbar-item x-toolbar-default x-box-layout-ct" style="border-width: 0px; margin: 0px; right: auto; left: 972px; top: 5px;" id="toolbar-1045"><div id="toolbar-1045-innerCt" class="x-box-inner " role="presentation" style="width: 55px; height: 15px;"><div id="toolbar-1045-targetEl" class="x-box-target" role="presentation" style="width: 55px;"><div class="x-toolbar-text ux-desktop-trayclock x-box-item x-toolbar-item x-toolbar-text-default" id="trayclock-1046" style="right: auto; left: 4px; top: 0px; margin: 0px;">8:44 PM</div></div>
</div></div></div></div></div></div>
 
    <a href="http://www.sencha.com" target="_blank" alt="Powered by Ext JS" id="poweredby"><div></div></a>
 
 
 
<div class="x-css-shadow" role="presentation" id="ext-gen1032" style="position: fixed; z-index: 19000; right: auto; left: 812px; top: 4.0000152587890625px; width: 209px; height: 34px; box-shadow: rgb(136, 136, 136) 0px 0px 6px; display: block;"></div><div class="x-toolbar x-layer x-toolbar-default x-box-layout-ct x-border-box x-fixed-layer" style="border-width: 1px; right: auto; left: 812px; top: 0.0000152587890625px; z-index: 19001;" id="options-toolbar" tabindex="-1"><div id="options-toolbar-innerCt" class="x-box-inner " role="presentation" style="width: 199px; height: 24px;"><div id="options-toolbar-targetEl" class="x-box-target" role="presentation" style="width: 199px;">
<table class="x-field x-table-plain x-form-item x-form-type-text x-field-toolbar x-box-item x-toolbar-item x-field-default-toolbar x-hbox-form-item" style="margin: 0px; width: 170px; table-layout: fixed; right: auto; left: 0px; top: 0px;" cellpadding="0" role="presentation" id="combobox-1009"><tbody><tr role="presentation" id="combobox-1009-inputRow" class="x-form-item-input-row"><td role="presentation" id="combobox-1009-labelCell" style="" valign="top" halign="left" width="50" class="x-field-label-cell"><label id="combobox-1009-labelEl" for="combobox-1009-inputEl" class="x-form-item-label x-unselectable x-form-item-label-left" style="width:45px;margin-right:5px;cursor:move;" unselectable="on">Theme<span role="separator">:</span></label></td><td role="presentation" class="x-form-item-body  " id="combobox-1009-bodyEl" colspan="2" style="width: 100%;"><table id="combobox-1009-triggerWrap" class="x-form-trigger-wrap" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; table-layout: fixed;"><tbody role="presentation"><tr role="presentation"><td id="combobox-1009-inputCell" class="x-form-trigger-input-cell" role="presentation" style="width: 100%;"><div class="x-hide-display x-form-data-hidden" role="presentation" id="ext-gen1029"></div><input id="combobox-1009-inputEl" type="text" role="combobox" class="x-form-field x-form-text " autocomplete="off" value="Neptune" name="combobox-1009-inputEl" data-errorqtip="" style="width: 100%;"></td><td role="presentation" valign="top" class=" x-trigger-cell x-unselectable" style="width:22px;" id="ext-gen1028"><div class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-first" role="presentation" id="ext-gen1027"></div></td></tr></tbody></table></td></tr></tbody></table>
<a class="x-btn x-unselectable x-btn-toolbar x-box-item x-toolbar-item x-btn-default-toolbar-small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon" style="margin: 0px 5px 0px 0px; display: none;" hidefocus="on" unselectable="on" tabindex="0" id="button-1010"><span id="button-1010-btnWrap" role="presentation" class="x-btn-wrap" unselectable="on"><span id="button-1010-btnEl" class="x-btn-button" role="presentation"><span id="button-1010-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">RTL</span><span role="presentation" id="button-1010-btnIconEl" class="x-btn-icon-el  " unselectable="on" style=""></span></span></span></a><div class="x-tool x-box-item x-toolbar-item x-tool-default" style="width: 16px; height: 16px; right: auto; left: 175px; top: 4px; margin: 0px;" id="tool-1011"><img id="tool-1011-toolEl" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-img x-tool-close" role="presentation"></div></div></div></div><div class="x-tip x-layer x-tip-default x-border-box" id="ext-quicktips-tip" style="display: none;"><div class="x-tip-header x-header x-header-horizontal x-docked x-unselectable x-tip-header-default x-horizontal x-tip-header-horizontal x-tip-header-default-horizontal x-top x-tip-header-top x-tip-header-default-top x-docked-top x-tip-header-docked-top x-tip-header-default-docked-top" id="ext-quicktips-tip_header"><div id="ext-quicktips-tip_header-body" class="x-header-body x-tip-header-body x-tip-header-body-default x-tip-header-body-horizontal x-tip-header-body-default-horizontal x-tip-header-body-top x-tip-header-body-default-top x-tip-header-body-docked-top x-tip-header-body-default-docked-top x-box-layout-ct x-tip-header-body-default-horizontal x-tip-header-body-default-top x-tip-header-body-default-docked-top" role="presentation"><div id="ext-quicktips-tip_header-innerCt" class="x-box-inner " role="presentation"><div id="ext-quicktips-tip_header-targetEl" class="x-box-target" role="presentation">
<div class="x-component x-header-text-container x-tip-header-text-container x-tip-header-text-container-default x-box-item x-component-default" unselectable="on" id="ext-quicktips-tip_header_hd"><span id="ext-quicktips-tip_header_hd-textEl" class="x-header-text x-tip-header-text x-tip-header-text-default" unselectable="on">&nbsp;</span></div></div></div></div></div><div id="ext-quicktips-tip-body" class="x-tip-body x-tip-body-default x-tip-body-default" role="presentation"><span id="ext-quicktips-tip-outerCt" style="display:table;" role="presentation"><div id="ext-quicktips-tip-innerCt" style="display:table-cell;height:100%;vertical-align:top;" class="" role="presentation"></div></span></div><div role="presentation" class="x-tip-anchor x-tip-anchor-top" id="ext-gen1038"></div></div><div class="x-css-shadow" role="presentation" id="ext-gen1101" style="z-index: 19010; right: auto; left: 576px; top: 228px; width: 126px; height: 73px; box-shadow: rgb(136, 136, 136) 0px 0px 6px; display: block;"></div><div class="x-panel x-layer x-panel-default x-menu x-border-box" style="width: 127px; height: 77px; right: auto; left: 576px; top: 224px; z-index: 19011;" id="menu-1050" tabindex="-1"><div id="menu-1050-body" class="x-panel-body x-menu-body x-unselectable x-panel-body-default x-box-layout-ct x-panel-body-default x-noborder-trbl" role="presentation" style="width: 127px; height: 77px; left: 0px; top: 0px;"><div role="presentation" class="x-box-inner x-box-scroller-top"><div role="presentation" id="menu-1050-before-scroller" class="x-box-scroller x-menu-scroll-top" style="display:none"></div></div><div id="menu-1050-innerCt" class="x-box-inner x-vertical-box-overflow-body" role="presentation" style="height: 77px; width: 127px;"><div id="menu-1050-targetEl" class="x-box-target" role="presentation" style="width: 127px;"><div class="x-component x-box-item x-component-default x-menu-item" id="menuitem-1051" style="right: auto; left: 0px; top: 0px; margin: 0px;"><a id="menuitem-1051-itemEl" class="x-menu-item-link x-menu-item-indent-no-separator" href="#" role="presentation" hidefocus="true" unselectable="on"><span id="menuitem-1051-textEl" class="x-menu-item-text" unselectable="on">Change Settings</span></a></div><div class="x-component x-box-item x-component-default x-menu-item-separator x-menu-item x-menu-item-plain" style="border-width: 1px; right: auto; left: 0px; top: 26px; margin: 0px; width: 127px;" id="menuseparator-1052">&nbsp;</div><div class="x-component x-menu-item-disabled x-box-item x-component-default x-menu-item" id="menuitem-1053" style="right: auto; left: 0px; top: 29px; margin: 0px; width: 127px;"><a id="menuitem-1053-itemEl" class="x-menu-item-link x-menu-item-indent-no-separator" href="#" role="presentation" hidefocus="true" unselectable="on"><span id="menuitem-1053-textEl" class="x-menu-item-text" unselectable="on">Tile</span></a></div><div class="x-component x-menu-item-disabled x-box-item x-component-default x-menu-item" id="menuitem-1054" style="right: auto; left: 0px; top: 53px; margin: 0px; width: 127px;"><a id="menuitem-1054-itemEl" class="x-menu-item-link x-menu-item-indent-no-separator" href="#" role="presentation" hidefocus="true" unselectable="on"><span id="menuitem-1054-textEl" class="x-menu-item-text" unselectable="on">Cascade</span></a></div></div></div><div role="presentation" class="x-box-inner x-box-scroller-bottom"><div role="presentation" id="menu-1050-after-scroller" class="x-box-scroller x-menu-scroll-bottom" style="display:none"></div></div></div></div></body></html>

A+JYT

**Lakhdr** · 15/09/2014, 21h57

Salut !

T as essaye avec window.onerror ??
un truc comme ca

Code :

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

1
2
3
4
5
 
window.onerror = function (messageDerreur, url, numerorLign, col, ObjErreur) {
    alert('Erreur: ' + messageDerreur+ ' FIchier: ' + url + ' ligne: ' + numerorLign
    + ' colonne: ' + col+ ' Contenue de l erreur : ' +  ObjErreur);
}

ou sinon regarde ce Js qui gere meme tous les navigateurs
stacktrace.js

J espere que ca va t aider !

**schnee** · 16/09/2014, 00h35

Envoyé par sekaijin

le Parseur javascript reçoit du navigateur des flux de string
ces flux viennent des fichiers JS là le parseur sais repérer le numéro de ligne dans le fichier.

Oui, mais dans mon cas il ne s'agit pas du parseur, mais de l'exécuteur. Je ne m'intéresse qu'aux erreur d'exécution, j'ai peut-être omis de le préciser, je ne mets quand même pas du code qui contient des erreurs à la compilation sur mon serveur

Et l'exécuteur est capable de me donner le nº de ligne par rapport au fichier complet HTML, pas le contenu de la balise <HTML>.
Donc le source exact est conservé qqpart dans le navigateur, ne serait-ce que pour le mettre dans la cache.
Si j'avais accès à ce source, je pourrais y compter les lignes et retrouver la ligne exacte.

Par exemple, si j'introduis une erreur dans une page de mon système à la ligne 2 de la page, code :

Code :

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

1
2
3
<script>
erreur();
</SCRIPT>

À cause de tout l'environnement, menu, styles etc produit par mon système, cette ligne se retrouve finalement en position 106, en comptant le DOCTYPE et une ligne vide qui précèdent la balise <HTML> et la fonction onError m'indique bien la ligne 106, pas la 103 ou la 104.

document.documentElement.innerHTML ne contient pas le code source mais la stérilisation du DOM

La stérilisation ? Diable l'élément ne peut plus avoir de children alors

En fait, le HTML est reconstitué, mais il semble que la structure de ligne soit bien respectée, y compris les lignes vides, pas une de plus, pas une de moins, donc ça me suffirait. Mais il me faudrait l'en-tête du fichier avant la balise <HTML>.

si tu utilise chrome ou firefox tu as deux menu "afficher la source" et "inspecter l'élément"

Oui, bien sûr, et avec Explorer aussi d'ailleurs, mais je n'ai pas accès au navigateur du visiteur chez qui l'erreur est arrivée. Il y a tellement de types de navigateurs de nos jours qu'on ne peut tester son code sur tous. Je capte même des erreurs causées par Google Bot (Lui en général c'est parce qu'il se sert de fichiers Javascripts dans sa cache sans vérifier si l'original a changé).

**schnee** · 16/09/2014, 00h43

Envoyé par Lakhdr

T as essaye avec window.onerror ??

Oui, bien sûr, c'est avec ça que je travaille. Et quand une erreur se produit, j'envoie (Ajax) toute l'information disponible au serveur qui emmagasine dans la BD. Le problème c'est qu'il me faudrait la ligne au complet, et non son numéro, qui ne veut rien dire par rapport au code qui a généré la page.
Si window.onerror est capable de me donner le nº de ligne exact, c'est qu'il a gardé le code source qqpart, pas juste le contenu de la balise <HTML>

**sekaijin** · 16/09/2014, 07h22

Envoyé par schnee

...La stérilisation ? Diable l'élément ne peut plus avoir de children alors

oops foutu correcteur orthographique.

tu fais que la sérialisation du DOM dans ton cas corresponds au peut de chose prés au code source ce n'est qu'un coup de bol rare pour le navigateur. comme dans le source que j'ai donnée en exemple ou le DOM serialisé est jusqu'à vingt fois plus gros que le code sources.

le gestionnaire d'erreur js ne peux donc pas se baser sur ça pour afficher un numéro de ligne.
ce numéro relèverait du plus grand hasard, il faudrait au moteur JS réajuster en permanence tous les numéros de ligne. il faudrait aussi avoir ce DOM sérialisé en permanence mis à jour. et il faudrait que le moteur HTML en informe le moteur JS en permanence.

Or le moteur HTML ne sérialise le DOM que si on lui demande (innerHTML)

je parlais bien des erreur à l'exécution. le parseur et le seul à avoir accès au code source. il reçois un fragment du moteur HTML
il le parse est associe les TOKEN du texte à des position dans le fragment n° ligne N°colonne
le code est appelé
je résultat du parsing est donné au compilateur qui génère du code exécutable.
c'est exécutable est enfin exécuté et génère une erreur.
la seule information dont dispose le Moteur JS c'est que l'erreur c'est produite sur un TOKEN bien particulier dont il sait qu'il provient d'un fragment à un N° de ligne précis.
d'où vient le fragment ?? du Moteur HTML dans quel source (page ajax création dynamique document.write innerHtml) ??
je moteur n'an sais rien de rien. il ne connait que le fragment.

encore une fois il est bien plus simple de placer le code JS dans des fichiers js
lorsque tu dis que ton PHP doit bien générer le JS qui va avec le HTML généré je dis non
j'ai commencé à faire du Web Dynamique en écrivant un moteur type PHP et Javascript dans les années 90 ce n'est pas d'hier. et je n'ai jamais trouvé un seul cas ou le script client devait nécessairement être crée dynamiquement.

il suffit dans la plus par des cas de charger le bon script en fonction du HTML généré. cela remplace dans 90% des cas un script généré par php.
pour les 10% restant il suffit de repenser sont script pour le rendre parentérale et retomber dans le cas précédent.

A+JYT

**schnee** · 16/09/2014, 17h18

Merci pour ces explications.

pour les 10% restant il suffit de repenser sont script pour le rendre parentérale et retomber dans le cas précédent.

Je pourrais te citer des dizaines d'exemples pour lesquels ça ne suffit pas.
Il y a des cas où il faut absolument introduire des données qui dépendent par exemple du membre connecté, etc.
Des fois ces variables sont générées dans une boucle, ça ne peut pas être fait à l'avance dans un fichier JS.
Il y a HTML dynamique et HTML dynamique.

**Bovino** · 16/09/2014, 17h58

Un fichier .js peut être créé dynamiquement sur le serveur exactement de la même façon qu'une page HTML.

**sekaijin** · 16/09/2014, 19h08

Envoyé par schnee

Merci pour ces explications.

Je pourrais te citer des dizaines d'exemples pour lesquels ça ne suffit pas.
Il y a des cas où il faut absolument introduire des données qui dépendent par exemple du membre connecté, etc.
Des fois ces variables sont générées dans une boucle, ça ne peut pas être fait à l'avance dans un fichier JS.
Il y a HTML dynamique et HTML dynamique.

c'est bien ce que je dis le serveur génère des données
Donc génère tes variables dans des fragments JSON et tout ton js sera statique.
depuis le début de ma carrière dans le domaine je n'ai jamais rencontré un seul cas où on ne pouvait pas faire ainsi.

au passage je rappelle que la norme XHTML prévoit via les namespaces la possibilité d'ajouter ses propres attribut pour faire porter des données au élément du DOM.
il est très simple dans les boucles php de généré ses tag avec les données directement dans le sources HTML via un namespace.
un js statique peut lorsqu'il agit sur un élément lire ses données

ça ne demande qu'un peu d'imagination et de la rigueur.

A+JYT

**schnee** · 16/09/2014, 20h12

Envoyé par Bovino

Un fichier .js peut être créé dynamiquement sur le serveur exactement de la même façon qu'une page HTML.

Bien sûr, mais quand le JS est temporaire et personnalisé, le temps d'une session, il faut en plus gérer la suppression du fichier.
Sans parler de la surcharge pour le disque du serveur.
Et mon système (ColdFusion) ne crée pas non plus de fichiers HTML, il retourne du HTML suite à une requête HTTP.

**sekaijin** · 17/09/2014, 07h28

Envoyé par schnee

Bien sûr, mais quand le JS est temporaire et personnalisé, le temps d'une session, il faut en plus gérer la suppression du fichier.
Sans parler de la surcharge pour le disque du serveur.
Et mon système (ColdFusion) ne crée pas non plus de fichiers HTML, il retourne du HTML suite à une requête HTTP.

??????????
la suppression de quel fichier

là ça me dépasse

la réponse à ta question est
Le moteur javascript ne connaissant QUE le code JavaScript ne peux te fournir des erreurs que sur le code JavaScript

si tu mets ton javascript dans un fichier il numérote à partir du début du fichier
si tu mets ton javascript dans un flux http dynamique il numérote à partir du début du flux
si tu mets ton javascript dans une balise script il numérote à partir du début du contenu de la balise
si tu mets ton javascript dans un texte il numérote à partir du début du texte.

il n'a accès à rien d'autre.
A+JYT

**Bovino** · 17/09/2014, 07h55

Envoyé par sekaijin

la norme XHTML prévoit via les namespaces la possibilité d'ajouter ses propres attribut pour faire porter des données au élément du DOM

HTML5 le prévoit aussi de façon très simple à utiliser (et sans namespace) avec les attributs data-* facilement manipulables en JavaScript avec l'API dataset.

Envoyé par schnee

Et mon système (ColdFusion) ne crée pas non plus de fichiers HTML, il retourne du HTML suite à une requête HTTP.

Non, ton "système" ne retourne pas du HTML car il ne sait pas ce qu'est le HTML. Il retourne juste une chaine que ton navigateur interprètera comme du HTML. Du coup, de la même façon, en indiquant les bons header dans ta réponse, tu peux tout aussi bien t'arranger pour que cette chaine retournée corresponde à autre chose que du HTML, du JavaScript ou du CSS par exemple. Pas besoin de fichier pour ça.

**schnee** · 17/09/2014, 13h00

Envoyé par sekaijin

??????????
la suppression de quel fichier

Bovino parlait de créer un fichier .js dynamiquement.
Pour que le navigateur puisse demander un fichier .js au serveur, il faut que le fichier y existe physiquement, donc qu'il y soit créé par le programme. Et comme il est temporaire, il faudra bien que qqun s'occupe de le détruire un jour.
Ou alors il faut demander à ColdFusion de répondre à toutes les requêtes .js, ce qui est complètement farfelu.

**schnee** · 17/09/2014, 13h21

Envoyé par Bovino

HTML5 le prévoit aussi de façon très simple à utiliser (et sans namespace) avec les attributs data-* facilement manipulables en JavaScript avec l'API dataset.

.

Depuis HTML 1.0 on peut ajouter les attributs qu'on veut contenant ce qu'on veut.

Non, ton "système" ne retourne pas du HTML car il ne sait pas ce qu'est le HTML. Il retourne juste une chaine que ton navigateur interprètera comme du HTML.

Bien sûr, on peut jouer sur les mots !
ColdFusion « sait » parfaitement ce qu'est le HTML puisque le langage CFML est une extension au HTML
Et CF retourne du HTML parce que c'est moi qui le programme et moi je « sais » que ce que je lui demande de produire c'est du HTML.

Du coup, de la même façon, en indiquant les bons header dans ta réponse, tu peux tout aussi bien t'arranger pour que cette chaine retournée corresponde à autre chose que du HTML, du JavaScript ou du CSS par exemple. Pas besoin de fichier pour ça.

Oui, mais pour ça il faudra que CF traite TOUTES les requêtes HTTP pour un fichier .js, ce qui est complètement dingue.
Du plus, la requête pour le .js se fera à la réception de la page HTML, ce qui est trop tard, le serveur ne sait plus de quoi il s'agit. Ou alors il faudrait reprendre toutes les requêtes dans la base de données pour se remettre dans le conterxte de la création de la page. Tout ça pour éviter d'avoir à insérer une ligne genre
var truc = "machin"; dans le HTML, au nom de je ne sais quelle religion à la mords-moi-la.
Franchement, les enfants, je vous remercie pour vos bon conseils, mais d'abord on est complètement hors du sujet, ensuite je ne suis pas convaincu du tout que votre expérience vaille la mienne.

J'ai juste demandé si qqun avait un truc pour récupérer la ligne javascript qui a causé une erreur, apparemment vous n'en avez pas, alors restons-en là, merci.

**sekaijin** · 17/09/2014, 16h01

Mais encore une fois on ne te dis pas de produire les donnée hors de ton code CF

voilà ce que je fais c'est suffisament CON pour être reproduit

mon code serveur prépare les données
il en fait un fragment JSON

Code php :

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

1
2
3
4
5
$scriptData = Array(
  'resultCode' => $resultCode,
  'message' => $message,
  'user' => get_object_vars($mySqlQueryResult)
);

il créé un source HTML (une STRING)
il ajoute dans l'entête de la page

Code HTML :

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

1
2
3
<script type="text/javascript">
  scriptData = <?php echo json_encode($scriptData ); ?>;
</script>

UNE SEULE LIGNE généré par le serveur donc sur ce point la seul ligne d'erreur possible est là

Toutes les fonction sont dans des fichiers js statique
qui au besoin vont utiliser cette variable

Code :

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

1
2
3
4
5
6
7
8
alert(scriptData.message);
  document.getElementById('btn').onclick = function () {
    if (200 == scriptData.resultCode) {
      alert('user name : ' + scriptData.user.name)
    } else {
      alert('invalid Query !')
    }
  }

rien de plus rien, rien d'abérant, rien d'extraordinaire, rien de contrégnant, rien de compliqué.

et ça à la place de

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<?php var user= get_object_vars($mySqlQueryResult) ?>
<script type="text/javascript">
alert(<?php echo $message); ?>);
  document.getElementById('btn').onclick = function () {
    if (200== <?php echo $resultCode); ?>) {
      alert('user name : ' + <?php echo $user.name); ?>)
    } else {
      alert('invalid Query !')
    }
  }
</script>

dans le premier cas je fais du php pour traiter la demande
du HTML pour générer la réponse
et du javascript pour le client
je bénéficie
du cache du client,
du compilateur javascript
et des bonnes référence de ligne dans les erreurs

dans le deuxième cas je mélange le traitement avec la génération de la réponse et le code du client
je ne bénéficie pas du cache ni du compilateur et je n'ai pas les référence des lignes dans mes erreurs

je ne vois vraiment pas en quoi notre propos est abérant.

Je maintiens que je n'ai jamais rencontré un seul cas où je n'ai pas pu faire comme ça. (ou équivalent)
et j'ai commencé à script à la fois côté client et côté serveur bien avant javascript et php.

A+JYT

Comment récupérer la ligne qui a causé une erreur ?

JavaScript

Discussions similaires

Partager

Partager