让 tracker 在 React 应用中运行起来非常简单。

假设你正在构建一个 SPA（单页应用），你只需将以下代码添加到入口文件中即可：

import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: "<your project key>", 
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

或者，你也可以直接使用 Tracker 类来手动管理其实例：

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

换句话说，你可以在脚本开始时实例化 tracker，待页面加载后，再使用 useEffect 钩子启动它。

出于安全考虑，请避免将 projectKey 直接硬编码在应用代码中。相反，应将其存储在配置文件或环境系统中。

根据你的项目设置，有多种可用的方法：

• 环境变量：如果使用 Create React App，可以利用其对环境变量的内置支持
• 配置文件：使用从版本控制中排除的专用配置文件
• 环境管理：诸如 dotenv 之类的工具可以帮助你管理不同环境中的不同密钥

下面是一个示例：

// Access the key from environment variables
const openReplayKey = process.env.REACT_APP_OPENREPLAY_KEY;

如果你正在用 React 构建一个复杂的应用，那么你很可能正在使用 Next、Remix 或类似的框架。请务必查看我们的 Tracker 设置部分，找到你正在使用的框架。

如果你在 React 项目中设置 tracker 时遇到任何问题，请通过我们的 Slack 社区联系我们，直接向我们的开发者提问！