从零实现前端日志上报

前期准备

• XAMPP —— PHP环境+数据库可视化操作

进入主题

建表结构

首先需要确定需要上传哪些信息

• 通过 window.onerror 可以获取 msg, url, line, col, error等错误信息,JS 的错误行号、url错误地址，
• 通过 window.navigator.userAgent 获取 设备浏览器的信息集合

如果你已经安装并配置好XAMPP

http://localhost:8080/phpmyadmin

执行SQL语句

CREATE TABLE `j_log` (
  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'id号',
  `os_version` char(10) DEFAULT NULL COMMENT '系统版本号',
  `msg` varchar(255) DEFAULT NULL COMMENT '错误信息',
  `error_url` varchar(255) DEFAULT NULL COMMENT '错误所在的url',
  `line` int(10) DEFAULT NULL COMMENT '错误所在的行',
  `col` int(10) DEFAULT NULL COMMENT '错误所在的列',
  `error` varchar(255) DEFAULT NULL COMMENT '具体的error对象',
  `url` varchar(255) DEFAULT NULL,
  `browser` varchar(255) DEFAULT NULL COMMENT '浏览器类型',
  `product_name` char(255) CHARACTER SET utf8 DEFAULT '' COMMENT '产品名称',
  `error_time` char(20) DEFAULT NULL COMMENT '时间戳',
  `os` char(10) DEFAULT NULL COMMENT '系统类型',
  `extend` varchar(255) DEFAULT NULL COMMENT '业务扩展字段、保存JSON字符串',
  `ua` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=55 DEFAULT CHARSET=utf8;

采用何种方式进行日志上报

基于日志上报前端除去将数据发给后端外不需要进行额外的数据处理，我采用img标签的形式进行。

let path = 'http://localhost:8080/dashboard/log.php'
let os_version = 'V_0.0.1';
let msg = '这是一条测试的msg';
let error_url = 'index.php';

function click_me (path, os_version, msg, error_url) {
    (new Image).src = `${path}?os_version=${os_version}&msg=${msg}&error_url=${error_url}`;
}

PHP代码编写

简单使用mysqli封装的数据库操作类

数据库操作类

<?php 
	/**
	 * MySQL操作数据库
	 */
	class Mysql{
		public $mydb; // 接收数据库实例
		public function __construct($host, $username, $password, $db)
		{
			$this->mydb = new mysqli($host, $username, $password, $db); // 服务器，用户名，密码，数据库名
	
			if ($this->mydb->connect_errno) {	# 非0即为数据库连接失败
				die('Connect Error (' . $this->mydb->connect_errno . ') '
		            . $this->mydb->connect_error);
			} else {
				// echo "成功链接到数据库：". $db . "<br>";
			};
		}

		public function runSql ($sql) { // 执行SQL语句
			$this->mydb->query("set names utf8"); // 设置编码规则

			$result = $this->mydb->query($sql);
			echo $sql;

			if ($result) {
				if ($result->num_rows) {
					# 第一种方法
					# $row = $result->fetch_row();
					# print_r($row);
					/*
					while ($row = $result->fetch_row()) {
						print_r($row);
					}
					*/
					# 第二种方法
					/*
					while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
						print_r($row);	
					}
					*/
					# 第三种方法
					$row = $result->fetch_all(MYSQLI_ASSOC);
					# 将数组转为json数据
					return json_encode($row);
				}
			}else{
				echo "语句执行失败! <br>";
				echo $this->mydb->error . "<br>";
			    echo $this->mydb->errno . "<br>";
			}
		}

		public function insert ($table, $field) { // 增加数据
			$sql = "INSERT INTO " . $table . " VALUES " . $field;
			$this->runSql($sql);
		}

		public function update ($table, $field, $condition) { // 更新数据
			$sql = "UPDATE " . $table . " SET " . $field . " WHERE " . $condition;
			$this->runSql($sql);
		}

		public function delete ($table, $condition) {	// 删除数据
			$sql = "DELETE FROM " . $table . " WHERE " . $condition;
			$this->runSql($sql);
		}

		public function selece ($table, $condition = false) { // 查数据
			$sql = $condition ?
				"SELECT * FROM " . $table . " WHERE " . $condition :
				"SELECT * FROM " . $table;
			$res = $this->runSql($sql);

			if ($res) return $res;
		}
		
		public function closeSql () {	// 断开数据库链接
			$this->mydb->close();
		}
	}
?>

log.php业务逻辑代码

// 引入PHP代码
<?php include "./fetch/database.php" ?> 

<?php 
    // 用到的变量，需要先定义在外部
    $os_version=NULL;
    $msg=NULL;
    $error_url=NULL;

    if ($_GET['os_version'] AND $_GET['msg'] AND $_GET['error_url']) {
        $os_version = $_GET['os_version'];
        $msg = $_GET['msg'];
        $error_url = $_GET['error_url'];

        $mysqli = new Mysql('localhost', 'root', '', 'my_firstDB');

        // '$os_version' 两侧的''很关键 ，如不加SQL语句中不能拿到正确的字符，会被当做变量解析为null
        $mysqli->insert("j_log(os_version, msg, error_url)", "('$os_version', '$msg', '$error_url')");

        $mysqli->closeSql();
    } else {
        echo '请补全';
        return;
    }
?>

此时调用click_me方法即可实现日志上报