记录 JavaScript 错误

• 下载源代码 - 3.65 KB

引言

最近，在我参与的一个项目中，我的 QA 团队告诉我，在某些页面上他们遇到了崩溃，或者某些页面在一段时间后无法正常工作。

我们的团队寻找了可能产生错误的代码。我从 QA 团队收到的反馈无法帮助我重现错误。但毫无疑问，我们需要仅在 JavaScript 代码中查找，而不是在其他代码中查找。

通常，在发布项目时，我会直接忽略/绕过 JavaScript 错误。这意味着，每当出现 JavaScript 错误时，它不会报告给用户，而是被抑制。

背景

以下是我们通常用来抑制 JavaScript 错误的函数

var isDebugging = true;
function ErrorSetting(msg, file_loc, line_no) {
    var e_msg=msg;
    var e_file=file_loc;
    var e_line=line_no;
    var error_d = "Error in file: " + file_loc +
                          "\nline number:" + line_no +
                           "\nMessage:" + msg;
    if(isDebugging)
        alert("Error Found !!!\n--------------\n"+error_d);

     return true;
}
window.onerror = ErrorSetting;   

window.onerror = ErrorSetting; 这一行会在每次出现 JavaScript 错误时调用 'ErrorSetting' 函数。该函数将返回 true。因此，用户不会收到 JavaScript 错误通知，也不会感到烦恼。

在开发阶段，变量 'isDebugging' 设置为 true，我们可以获取 JavaScript 警报，通知包含行号、文件名和错误消息的错误。

许多 Web 开发人员通常使用上述方法。这和我以前的项目中使用的方法相同。

但是在这个特定项目中，我必须实时获取错误消息，当他们使用它时，我立即想到了记录错误的想法。（后来我在网上搜索了一下，发现有很多开发人员都这样做了！？:( ）

但是在客户端将日志记录到文件有两个问题

1. Internet Explorer 以外的浏览器不支持（仅使用 ActiveX 对象）
2. 文件将存储在客户端，而不是服务器端

所以我使用 AJAX，将 JavaScript 错误静默发送到服务器，在那里错误将被写入一个平面文件。稍后，我们可以查看该文件以获取错误日志。

下一步？

开始将 AJAX 代码添加到函数中。

捕获错误并准备数据

var isDebugging = false;
var logJsErrors = true;
function ErrorSetting(msg, file_loc, line_no) {
    var e_msg=msg;
    var e_file=file_loc;
    var e_line=line_no;
    var   error_d = "Error in file: " + file_loc +"\nline number:" 
            + line_no +
                        "\nMessage:" + msg;

    if(logJsErrors){
        theData = "file="+file_loc+"&line="+line_no+"&err="+msg;
        ajaxCtrl(
            function(){
                return true;
            },"ajxerrorLogger.php",theData
        );
    }

    if(isDebugging)
        alert("Error Found !!!\n--------------\n"+error_d);

     return true;
}
window.onerror = ErrorSetting;     

上面的函数做什么？

if(logJsErrors){ //this line is used for enable or disable Logging. 

行号、文件名和错误消息被组合为键值对。

theData = "file="+file_loc+"&line="+line_no+"&err="+msg;

现在数据已准备好，我们现在可以调用 AJAX 函数将数据发送到服务器。

将数据发送到服务器

ajaxCtrl(    
    function(){
        return true;
    },"ajxerrorLogger.php",theData
); 

远程文件是 "ajxerrorLogger.php"。

我为此使用了 PHP。相反，您也可以使用 ASP、JSP。

这用于接收从 JavaScript 错误处理函数发送的数据。就这样。我们的 JavaScript 错误现在已静默发送到服务器。接下来是什么？在服务器端，我们必须编写 "ajxerrorLogger.php" 的代码。

接收数据并写入文件

if($_POST && $_POST['file']!=''){
    $filename = "./errlogs.txt";
    $fh = fopen($filename,"a+");

    //the content is in the form
    //Date    File    LineNo    Error Message
    //(tab delimited)
    $fcontent = date("d/m/Y h:i:s", mktime())."\t".
    $_POST['file']."\t".$_POST['line']."\t".$_POST['err']."\r\n";
    if (is_writable($filename)) {
        if (fwrite($fh, $fcontent) === FALSE) {
        }
        fclose($fh);
    }
}

$fh = fopen($filename,"a+"); 

以追加模式打开文件 errlogs.txt。因此，新错误将被添加到文件中，而不会覆盖它。

我们将以制表符分隔的形式保存数据（js 错误）。为了方便参考，我们也可以存储日期和时间。

$fcontent=date("d/m/Yh:i:s", mktime()). "\t".
$_POST['file']. "\t" .$_POST['line'].
                "\t".$_POST['err']."\r\n"; 

现在数据已准备好写入文件。

fwrite($fh, $fcontent)  

这将数据写入文件。为了进行额外的错误处理，我们可以检查文件是否可写。

if (is_writable($filename)) { 

如果文件可写，这将检查并返回 TRUE。然后我们可以写入数据。就这样。我们已成功地在服务器上静默地记录了 JavaScript 错误，并且我们可以看到客户端在使用该站点时发生的错误。

实时查看错误？

如何？ 我们必须添加一个小的、单独的 PHP 文件来查看我们上面生成的日志。该脚本将读取文件并显示内容。

if (file_exists($filename) && is_readable($filename)) { //if exists and readable
    $contents = fread($fh,filesize ($filename)); //read the whole file
    fclose($fh); //and close
} 
//now split the file content into lines
//using the line delimiter \r\n
$splitcontents = explode($linedelim, $contents);
...
...

添加一些行来显示从文件中读取的每一行。我们完成了。

摘要

• 编写了一个 JavaScript 错误捕获代码，该代码将抑制错误
• 添加了 Ajax 代码以将捕获的错误发送到服务器
• 接收数据并使用 PHP 存储到平面文件中
• 添加了一个小脚本以远程查看记录的 JavaScript 错误

改进

• 可以通过添加将日志通过邮件发送给管理员的功能来进一步改进该脚本。
• 我们可以将其存储到数据库中，而不是写入平面文件。
• 同样的事情可以使用 PHP 以及 ASP、JSP 来完成。

历史

• 2008 年 2 月 18 日：首次发布