一个简易的前端异常监控系统

  在制作webapp的时候页面前端使用了大量的js，还有大量后台生成注入到页面中的js变量，一旦这些js出错，或者后台注入的js变量格式错误，页面就奔溃了，有的时候连基本的控件样式都初始化不了，用户体验非常糟糕，由于业务的复杂性，在测试阶段这些错误很难被发现，在上线阶段，错误也只发生在用户的浏览器。基于此我们很自然的想到了，把前端的错误收集起来通过ajax发送给后端再写入日志文件或者数据库。

 错误的捕获很简单就是利用window.onerror事件，一旦页面出错浏览器就会自动调用这个事件。

现在贴出我的简单实现。

js代码（基于jQuery）

(function(){
    /*配置*/
    var Conf={
        /*处理错误的Url相对路径*/
        Url:"index.php/Mgr/Debug/listen",
        /*最大错误数量，超过该数量不再处理错误*/
        MaxCount:100
    };

    /*当前域名*/
    var BaseUrl;
    /*当前Url*/
    var HrefUrl;
    /*设备屏幕宽度*/
    var DeviceWidth;
    /*设备屏幕高度*/
    var DeviceHeight;
    /*错误计数*/
    var ErrorCount;
    /*发送错误*/
    function Send(sMessage,sUrl,sLine){
        if($!=undefined){
            /*判断JQuery是否存在*/
            $.post("http://"+BaseUrl+"/"+Conf.Url,{
                sMessage:sMessage,
                sUrl:sUrl,
                sLine:sLine,
                ErrorCount:ErrorCount,
                DeviceWidth:DeviceWidth,
                DeviceHeight:DeviceHeight,
                HrefUrl:HrefUrl
            },function(){

            });
        }
    }
    function Debuger(sMessage,sUrl,sLine){
        if(Conf.MaxCount<0){
            /*页面错误数量超过最大限制不再处理*/
            window.onerror=function(){}
        }
        ErrorCount++;
        Send(sMessage,sUrl,sLine);
        Conf.MaxCount--;
    }
    function Init(){
        BaseUrl=window.location.host;
        HrefUrl=window.location.href;
        DeviceWidth=window.screen.width;
        DeviceHeight=window.screen.height;
        ErrorCount=0;

        /*绑定页面onerror事件*/
        window.onerror=Debuger;
    }
    /*初始化*/
    Init();
})();

后端代码（基于thinkPHP）

<?php

namespace Mgr\Controller;
use Think\Controller;
use Think\Log;

class DebugController extends Controller{



    /*收集前端错误*/
    public function Listen(){
        /*当前时间*/
        $Time= date('y-m-d h:i:s',time());
        /*错误信息*/
        $sMessage=I('sMessage');
        /*错误文件*/
        $sUrl=I('sUrl');
        /*错误行号*/
        $sLine=I('sLine');
        /*错误计数*/
        $ErrorCount=I('ErrorCount');
        /*设备宽度*/
        $DeviceWidth=I('DeviceWidth');
        /*设备高度*/
        $DeviceHeight=I('DeviceHeight');
        /*当前地址*/
        $HrefUrl=I('HrefUrl');
        /*客户ip*/
        $ClientIp=get_client_ip();
        /*浏览器信息*/
        $Ua= var_export($_SERVER['HTTP_USER_AGENT'],true);
        /*回话状态*/
        $Session=var_export($_SESSION,true);

        $Log="----------------------------------
Time:
$Time
sMessage:
$sMessage
sUrl:
$sUrl
sLine:
$sLine
ErrorCount:
$ErrorCount
DeviceWidth:
$DeviceWidth
DeviceHeight:
$DeviceHeight
HrefUrl:
$HrefUrl
ClientIp:
$ClientIp
Ua:
$Ua
Session:
$Session
----------------------------------


";
        $destination = C('LOG_PATH').'borwser-'.date('y_m_d').'.log';
        error_log($Log,3,$destination);
    }
}

好了，把以上代码不熟到thinkPHP的网站中去就实现了最简单的前端错误记录，没有做更多的优化