在 Remix 中使用 OpenReplay

将 OpenReplay tracker 安装到基于 Remix 的项目中相对简单。

准备好你的 Remix 项目后，在 app 文件夹中找到 root.jsx 文件，并加入你在平台上创建项目时由 OpenReplay 提供的 SSR 代码。

步骤 1. 获取代码

你完全可以使用平台展示的代码，它代表了开始所需的最低限度配置。如果你这样做，请确保选择如下所示的 “Server-Side-Rendered (SSR)” 选项。

你可以将 tracker 作为单例实例使用，这是推荐的使用方式。这样，你就可以在应用的任何位置访问 tracker：

import { tracker } from '@openreplay/tracker'

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

在本示例中，我们将创建一个示例模块，并将其保存为 app 文件夹中的 tracker.ts。该模块将导出一个名为 startTracker 的函数，用于实例化 tracker 并使其运行起来。

import {v4 as uuidV4} from 'uuid'
import Tracker from '@openreplay/tracker'

function defaultGetUserId() {
    return uuidV4() 
}

type TrackerConfig = {
    projectKey: string,
    userIdEnabled?: boolean,
    getUserId?: () => string
}

export function startTracker(config: TrackerConfig) {
    let tracker = null;
    let userId = "";
   
    console.log("Starting tracker...")
    console.log("Custom configuration received: ", config)
        
    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
        
    const trackerConfig: TrackerConfig = {
        projectKey: config?.projectKey
    }
        
    console.log("Tracker configuration")
    console.log(trackerConfig)
    tracker = new Tracker(trackerConfig);
        
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
     
    tracker.start();
      
    return {
        tracker,
        userId
    }
}

如果你以这种方式导入 OpenReplay 的 Tracker 模块时遇到问题，可以考虑使用动态导入，如下所示：

import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
    return uuidV4() 
}

type TrackerConfig = {
    projectKey: string,
    userIdEnabled?: boolean,
    getUserId?: () => string
}

export function startTracker(config: TrackerConfig) {
    let tracker = null;
    let Tracker = null
    let userId = "";
    
    (async () => {
				//dynamic import 
        Tracker  = (await import('@openreplay/tracker')).default 
        console.log("Starting tracker...")
        console.log("Custom configuration received: ", config)
        
        const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
        
        const trackerConfig: TrackerConfig = {
            projectKey: config?.projectKey
        }
        
        console.log("Tracker configuration")
        console.log(trackerConfig)
        tracker = new Tracker(trackerConfig);
        
        if(config?.userIdEnabled) {
            userId = getUserId()
            tracker.setUserID(userId)
        }
        
        
        tracker.start();
        
    })()
    
    return {
        tracker,
        userId
    }
}

步骤 2. 将代码和 tracker 添加到你的项目中

完成上述步骤后，你需要使用以下命令为你的项目安装 tracker 包：

$ npm install @openreplay/tracker

你还需要安装 uuid 包，以确保上面的代码能够原样正常运行。

完成之后，我们几乎就可以开始追踪了，但我们仍需将 项目密钥（project key） 配置为一个 ENV 环境变量，并以某种方式通过 startTracker 函数接收的 config 对象将其传递给 tracker。

在 Remix 中加载 ENV 变量

ENV 变量在后端可访问，因此我们将利用 loader 函数，它可用于加载任何外部数据，包括 ENV 变量。

然后我们将使用 useLoaderData hook，以便在水合（hydration）之后，我们的组件能够访问已加载的数据。

在我们的 root.tsx 文件中（如果你不使用 TypeScript，则为 jsx 文件），添加以下函数：

type LoaderData = {
  ENV: {
    projectKey: string | undefined
  }
};

export const loader: LoaderFunction = async ({ }) => {
  return json<LoaderData>({
    ENV: {
      projectKey: process.env.OPENREPLAY_PROJECT_KEY
    }
  });
};

请注意我们是如何将项目密钥配置到 OPENREPLAY_PROJECT_KEY ENV 变量中的。

通过将它作为 loader 函数执行的一部分返回，我们便可以在主组件内部使用 useLoaderData hook，如下所示：

export default function App() {

  let loaderData = useLoaderData()

  useEffect(() => {
    startTracker({
      projectKey:  loaderData.ENV.projectKey
    })
  }, []) 

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

你的组件内容可能会有所不同，具体取决于你想要实现的目标，但这里的示例负责在页面完成水合之后，使用正确的项目密钥启动 tracker。

步骤 3. 尽情享受你的调试体验吧！

完成上述步骤后，你现在就可以开始部署你的应用了。

一旦你开始测试它，你会在标签页关闭几分钟后看到列出的回放（这是为了确保该标签页不是被意外关闭的）。

有疑问吗？

如需查看一个可运行的基于 Remix 的应用的完整代码，你可以查看此仓库。

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