设置 autoRender: false 隐藏了控件，然后调用onOfflineLog方法报错【先选择时间段】

[huoyuhao]

Describe the bug

const url = await window.$harbor.onOfflineLog('upload');

Steps to reproduce

No response

System Info

chrome

Logs

No response

Validations

• Read the FAQ.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[wqcstrong]

提示 “先选择时间段” —— 是因为上传的时候检测到没有数据。

调用上传前看下有没有数据 window.$harbor.harbor.container.length ，如果没有数据自检下：

• 插件是否正确注册到 PageSpy；
• 是否调用 window.$harbor.pause() 暂停记录导致没有收集到数据；

[huoyuhao]

注册应该是没有问题的
window.$harbor = new window.DataHarborPlugin();
window.$rrweb = new window.RRWebPlugin();
[window.$harbor, window.$rrweb].forEach((p) => {
window.PageSpy.registerPlugin(p);
});
window.$pageSpy = new window.PageSpy({
...
});

[huoyuhao]

window.$harbor.harbor.container.length 打印为0

整体代码如下：

export const initPageSpy = (treeId: string) => {
if (window.PageSpy) {
window.$harbor = new window.DataHarborPlugin();
window.$rrweb = new window.RRWebPlugin();
[window.$harbor, window.$rrweb].forEach((p) => {
window.PageSpy.registerPlugin(p);
});
window.$pageSpy = new window.PageSpy({
api: 'pagespy-aii.datarangers-onpremise.volces.com',
clientOrigin: 'https://xxxx',
project: Insight-${FRONTEND_RUNTIME_ENV},
title: treeId,
logo: getCDNPath('/favicon.svg'),
primaryColor: '#1677ff',
modal: {
logo: getCDNPath('/favicon.svg'),
title: 'AI-Insight',
}
});
console.info("PageSpy 实例化成功，ID：", window.$pageSpy.address);
}
}
export const uploadPageSpyData = async () => {
if (window.$harbor) {
console.log(window.$harbor.harbor.container.length);
const url = await window.$harbor.onOfflineLog('upload');
return url;
}
return '';
}
export const destroyPageSpy = () => {
if (window.$pageSpy) {
window.$pageSpy.abort();
console.info("PageSpy 销毁成功");
}
}

[wqcstrong]

代码没啥问题。

还有一种可能：项目在别的地方也实例化了插件，导致你上传时候的 window.$harbor 和注册到 PageSpy 上的并非同一个。

[huoyuhao]

通过全局引入的js
"use client";
import Script from "next/script";

// 引入 会话回放 SDK 文件 pagespy 包括：data-harbor、rrweb 插件
export default function LoadPageSpy() {
return (
<>
<Script src="https://xxx/page-spy/index.min.js" />
<Script src="https://xxx/plugin/data-harbor/index.min.js" />
<Script src="https://xxx/plugin/rrweb/index.min.js" />
</>
);
}

[huoyuhao]

nextjs项目 只在一个项目页面中进行了初始化

[wqcstrong]

在 codesandbox 上 fork https://codesandbox.io/p/devbox/page-spy-with-nextjs-5htxv5 ，然后贴个可以复现问题的链接

[huoyuhao]

再问一个问题 nextjs不能通过import引入初始化吗

[wqcstrong]

参考这篇社区的分享：https://juejin.cn/post/7504124809552085003

[huoyuhao]

知道为什么调用接口上传失败了，因为环境是react，本地开发会有一次组件初始化销毁，导致确实如你所说，不过发布到环境就可以了

还有一种可能：项目在别的地方也实例化了插件，导致你上传时候的 window.$harbor 和注册到 PageSpy 上的并非同一个。

[wqcstrong]

知道为什么调用接口上传失败了，因为环境是react，本地开发会有一次组件初始化销毁，导致确实如你所说，不过发布到环境就可以了

还有一种可能：项目在别的地方也实例化了插件，导致你上传时候的 window.$harbor 和注册到 PageSpy 上的并非同一个。

销毁的过程可调用 window.$pageSpy.abort() 一并销毁 PageSpy 的实例

[huoyuhao]

销毁的过程可调用 window.$pageSpy.abort() 一并销毁 PageSpy 的实例

调用了的，但是不行即使销毁之后重新新建仍然是一样的