基于Electron+Angular应用集成Heap会话录制无UI/CSS显示问题求助

问题本质 #

Heap、Hotjar、FullStory 这类工具的会话录制并非像素级录屏，而是通过追踪用户交互事件，回放时从事件记录的 URL 拉取页面资源（如 CSS）。但 Electron 应用的 CSS 多为本地动态资源：

• 动态注入的样式没有公开可被爬虫抓取的 URL
• 工具的爬虫无法访问 Electron 的本地文件系统
  最终导致回放时仅能看到标签结构，加载不到样式。

解决办法 #

1. 把动态 CSS 转为静态可访问资源 #

• 修改 Angular 构建配置，将所有组件样式打包为独立的静态 CSS 文件，输出到 dist 目录
• 确保 Electron 加载时使用相对路径引用这些静态文件，而非动态注入内联样式
• 配置 Electron 的 webPreferences，允许加载本地静态资源，让 Heap 能捕获到静态 CSS 的 URL

2. 手动将样式信息附加到 Heap 事件 #

利用 Heap 的自定义事件 API，在 Angular 组件样式加载完成后，把当前生效的 CSS 规则作为自定义属性发送给 Heap：

import { Component, AfterViewInit } from '@angular/core';

declare var heap: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 收集当前页面所有可访问的 CSS 规则
    const allStyles = Array.from(document.styleSheets)
      .reduce((styles, sheet) => {
        try {
          return styles + Array.from(sheet.cssRules).map(r => r.cssText).join('\n');
        } catch (e) {
          return styles; // 跳过跨域无法读取的样式表
        }
      }, '');

    // 将样式数据作为自定义事件发送给 Heap
    heap.addEvent('app_styles_loaded', {
      full_styles: allStyles
    });
  }
}

注意：这种方式会增加事件数据体积，需要确认 Heap 的事件存储限额是否允许。

3. 映射本地资源为 Web 可访问 URL #

用 Electron 的 protocol 模块把本地资源路径转为类似 Web 的 URL，让 Heap 爬虫能识别并抓取：

const { app, protocol } = require('electron');
const path = require('path');

app.whenReady().then(() => {
  // 注册自定义协议，映射本地资源到 app:// 开头的 URL
  protocol.registerFileProtocol('app', (req, callback) => {
    const resourcePath = req.url.replace('app://', '');
    const filePath = path.join(__dirname, '../dist', resourcePath);
    callback({ path: filePath });
  });
});

• 在 Angular 构建时设置 base-href 为 /
• 把所有资源引用（包括 CSS）改为 app://assets/xxx.css 这类路径，确保 Heap 记录的 URL 能被其爬虫解析

局限性 #

Heap 这类工具核心设计是针对 Web 应用，即使做了上述适配，仍可能存在样式还原不完全的情况。如果需要更可靠的桌面应用会话录制，建议选择专门针对 Electron/桌面应用的录制工具。

内容的提问来源于stack exchange，提问作者Rahal Rajapakse