JSON.stringify丢失属性：如何完整记录保存JavaScript用户会话事件

我太懂你这个困扰了——明明浏览器事件里有一大堆有用的属性，结果序列化后传给后端就只剩isTrusted和date，其他全丢了，简直离谱！这问题根源其实出在浏览器事件对象的特殊性上，咱们一步步解决：

为什么会丢失属性？ #

浏览器的Event对象属于宿主环境提供的特殊对象，不是普通的JavaScript对象。它的很多核心属性（比如clientX、bubbles）是不可枚举的，而JSON.stringify()只能序列化对象的可枚举属性，直接转的话自然会丢东西。

解决方案：手动提取所有事件属性 #

咱们需要写一个工具函数，把事件对象里的可枚举和不可枚举属性都提取到一个普通JS对象里，这样再序列化就不会丢数据了。

1. 编写属性提取函数 #

function extractEventDetails(event) {
  const eventData = {};

  // 先提取所有可枚举属性
  for (const prop in event) {
    eventData[prop] = event[prop];
  }

  // 再提取不可枚举的核心属性
  Object.getOwnPropertyNames(event).forEach(prop => {
    if (!(prop in eventData)) {
      try {
        // 有些属性可能无法直接访问（比如循环引用），加个异常捕获
        eventData[prop] = event[prop];
      } catch (error) {
        eventData[`${prop}_access_error`] = error.message;
      }
    }
  });

  // 把timeStamp转成可读性更好的ISO时间字符串（可选）
  eventData.isoTimestamp = new Date(event.timeStamp).toISOString();
  // 如果原始date属性是自定义的，也可以保留
  if (event.date) eventData.customDate = event.date;

  // 处理DOM元素引用：避免循环引用，只存关键标识
  if (event.target) {
    eventData.targetInfo = {
      id: event.target.id,
      className: event.target.className,
      tagName: event.target.tagName
    };
  }

  return eventData;
}

2. 修改事件监听逻辑 #

原来的handleEvent是直接把原始事件push到数组，现在改成push提取后的普通对象：

let events = [];

function handleEvent(event) {
  const processedEvent = extractEventDetails(event);
  events.push(processedEvent);
}

// 页面加载时绑定监听器
window.onload = function() {
  window.addEventListener("abort", handleEvent);
  window.addEventListener("blur", handleEvent);
  // 其他事件监听器...
};

3. 发送事件给后端 #

现在events数组里都是普通JS对象，axios会自动处理序列化，不用手动JSON.stringify了：

function sendEvents() {
  axios.post('/api/logger', events)
    .then(() => {
      console.log('事件已成功发送');
      events = []; // 发送后清空数组
    })
    .catch(err => {
      console.error('发送失败:', err);
    });
}

4. 后端（Node.js + MongoDB）处理 #

后端直接接收req.body里的数组，插入MongoDB即可，因为已经是标准JSON格式了：

// 示例：Express + Mongoose
const Event = require('./models/Event'); // 假设你的Mongoose模型

app.post('/api/logger', async (req, res) => {
  try {
    await Event.insertMany(req.body);
    res.status(200).json({ message: '所有事件已保存' });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

额外注意点 #

• 避免循环引用：比如event.target是DOM元素，里面可能包含对事件的引用，直接存会导致序列化失败，所以上面的函数里只存了target的id、className等标识。
• 按需提取：如果不需要所有属性，可以在函数里筛选你关心的字段，减少数据传输量和存储大小。
• 测试验证：在前端调用extractEventDetails后，用console.log打印结果，确认所有需要的属性都被提取到了。

内容的提问来源于stack exchange，提问作者Darío GL