前端公共模块日志追踪：两种轻量级记录方案

前端公共模块日志追踪：两种轻量级记录方案

近年来，Web前端开发复杂度显著提升，相较于几年前，现代前端项目大量依赖各类JS框架与面向对象设计模式。随着项目规模扩大，提取和复用公共模块已成为标准实践。

在诸如企业差旅管理等场景中，UI展示逻辑往往保持一致，差异主要在于后台业务处理。以机票预订为例，系统通常包含一个“成本中心”的公共JS模块，供用户在预订时填写相关信息。该模块需同时适配Web端（Online）、离线端（Offline）及App端，以便后续与企业客户进行月度财务结算。

随着项目向SOA架构演进，复杂度增加，前端数据可信度问题随之凸显。正如Web开发中的理论所述，所有前端数据均不可信，第三方接口返回的数据同样存在不确定性。在早期小型项目中，开发者往往仅在发生逻辑错误时记录日志，正常业务流程因Info级别日志影响美观、消耗服务器带宽及拖累Web性能而较少记录。

然而项目规模增大后，某天遭遇诡异bug，依赖残缺日志费力逐行追踪至接口，因参数繁多无法精准还原数据，尽管100%确信系接口返回所致，却缺乏完整报文且无法联系接口提供方，倍感无奈，期盼每行皆含日志。

公共模块封装与数据可信度挑战

鉴于上述教训，记录流程日志的做法日益普及。既然后端如此，前端重架构下同样需要完善的日志机制。对于公共JS模块，其内部封装的方法不应允许第三方程序直接操作其内部文本节点，例如直接修改DOM元素值。

<!--third module -->
公司：<input type="text" id="company" value="xxx有限公司" />
员工姓名：<input type="text" id="username" value="张三" />
<!-- -->
<script type="text/javascript">
//成本中心
var costCenter = (function () {
var company = (document.getElementById("company") || "") && document.getElementById("company").value;
var username = (document.getElementById("username") || "") && document.getElementById("username").value;
var result = {
getInfo: function () {
return { company: company, username: username };
             },
validation: function () {
return Boolean(company && username);
             }
         };
return result;
     })();
</script>

为简化操作，第三方UI提供了公司名和员工姓名的输入节点，并通过封装costCenter类提供读取方法。预定程序只需调用costCenter.getInfo即可获取数据，这体现了良好的封装性。

但在实际项目中，由于各种原因（包括Common UI的潜在Bug），可能导致从costCenter中无法获取到预期值。

此时，若无法确定是否成功取值，但从业务逻辑上不能阻止订单提交，为了彻底追踪Bug，需要引入日志中心（logCenter）单例类来记录日志。前端记录日志通常有以下几种方法。

前端日志记录的两种实现方案

<1> Ajax方式

这是最直观的思路。若使用原生XMLHttpRequest，需额外处理浏览器兼容性问题；若不使用原生，则需依赖第三方框架（如jQuery）。考虑到并非所有公司都使用jQuery，此方案需根据实际项目需求权衡使用。

//日志中心
var logCenter = (function () {
var result = {
info: function (title, message) {
//ajax操作
$.get("http://xxx.com", { "title": title, "message": message }, function () {
}, "post");
             }
         };
return result;
     })();

<2> Image方式

利用DOM中存在的Image对象，通过动态设置其src属性来请求后台URL，并在URL中附加title和message信息。这种方式无需考虑浏览器兼容性问题，是一种轻量且有效的方案。

//日志中心
var logCenter = (function () {
var result = {
info: function (title, message) {
//ajax操作
$.get("http://xxx.com", { "title": title, "message": message }, function () {
}, "post");
             },
info_image: function (title, message) {
//image
var img = new Image();
img.src = "http://www.baidu.com?title=" + title + "&message=" + message + "&temp=" + (Math.random() * 100000);
             }
         };
return result;
     })();

以上介绍了前端日志记录的两种主要方式，后续我们将继续深入探讨相关话题。