不花一分钱！前端监控安排上，还带回放功能！

今天，我想给我的小 SAAS 项目加上一些前端监控，这样我就可以更好的了解我的用户在使用我的产品时遇到了什么问题，从而更好的改进我的产品。我首先想到的就是 Sentry，因为这货在掘金上还是比较有名气的。

这货在 GitHub 上也是斩获了，37.6K 的 star，而且支持的特性也的确非常的优秀。比如性能监控、错误日志、录屏回放等等。我没打算自己部署一个，我期望使用他的 SAAS 服务，最好是有一定额度的穷鬼套餐。但是，当我注册了一个账号之后，准备使用的时候，就果断放弃了，因为他明明白白的写着只有 14 天的试用期，之后就需要付费 30 刀每个月，穷鬼退散。

时至今日，我所用的 vercel、supabase，无一例外都是提供一定的免费额度的。所以，我也一定要找到一个有一定免费额度的，找着找着，我找到了 OpenReplay。

OpenReplay

正如图上所述，OpenReplay 是一个开源的前端监控工具，它支持的特性也是非常的丰富，比如性能监控、错误日志、录屏回放等等。而且，它还提供了一个免费额度，每个月可以录制 1000 个会话，这对于一个小项目来说，已经足够了。下面是他的接入文档，支持 React、Vue、Angular、Next.js 等等。

https://docs.openreplay.com/en/getting-started/

先说说效果

接入成功之后，如果数据上报上来，是可以看到一个 session 列表的，因此它是已一个 session 来管理记录的。

然后，对于每一个 session，可以点击查看回放，这样就可以看到用户在使用产品的时候的操作，这对于我们来说是非常有用的，可以帮助我们更好的了解用户的使用情况，从而更好的改进我们的产品。然后下面也可以看到 console 的输出，这样我们就可以看到用户在使用产品的时候遇到了什么问题，从而更好的解决问题，尤其是前端 js 错误，这对于我们来说是非常有用的。

隐私保护

这里的回放，默认对于敏感信息是打码的，这一点非常的好，这样就不用担心用户的隐私泄露了。

此外，他还支持配置一些数据看板，甚至，我们可以配置热力图，这样就可以分析用户体验。

这里的特性就不一一细讲了，总结起来就是：

• 会话重放：让您重现用户体验，查看他们在哪里挣扎以及这对他们行为的影响。
• DevTools：就像在您自己的浏览器中调试一样，OpenReplay 提供完整的上下文信息。
• Assist：通过实时查看用户屏幕并立即通过WebRTC与他们通话来帮助您支持用户。
• 特性标志：启用或禁用功能，进行渐进式发布和A/B测试，无需重新部署应用。
• 全局搜索：几乎可以通过任何用户行为/标准、会话属性或技术事件进行搜索和过滤。
• 细粒度隐私控制：选择捕获、模糊或忽略的内容，以便用户数据甚至不会到达您的服务器。
• 集成：将您的后端日志与会话重放同步，查看前端和后端发生的事情。

使用方法

可以通过下面这篇文档来了解如何在 next.js 中使用 OpenReplay

https://docs.openreplay.com/en/using-or/next/

接入起来可谓是无脑傻瓜式操作，只需要在项目根目录下创建一个.env.local文件，然后在里面添加NEXT_PUBLIC_OPENREPLAY_ID这个环境变量，值为你的OpenReplay项目ID即可。

NEXT_PUBLIC_OPENREPLAY_ID=your-project-id

使用 TrackContext 的方式来引入 OpenReplay 的脚本，返回一个 Provider 组件，然后在根组件中使用这个 Provider 组件即可。

"use client";//注意这里，因为我们要在客户端代码中使用
import { createContext } from "react"
import Tracker from '@openreplay/tracker';
import {v4 as uuidV4} from 'uuid'
import { useReducer } from "react"

export const TrackerContext = createContext()

function defaultGetUserId() {
   return uuidV4()
}

function newTracker(config) {
    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
    let userId = null;

    const trackerConfig = {
        projectKey: config?.projectKey || process.env.NEXT_PUBLIC_OPENREPLAY_PROJECT_KEY
    }

    const tracker = new Tracker(trackerConfig);

    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
    return tracker

}

function reducer(state, action) {
        switch(action.type) {
            case 'init': {
                if(!state.tracker) {
                    console.log("Instantiaing the tracker for the first time...")
                    return {...state, tracker: newTracker(state.config)}
                }
                return state
            }
            case 'start': {
                console.log("Starting tracker...")
                state.tracker.start()
                return state
            }
        }
    }

export default function TrackerProvider({children, config = {}}) {
    let [state, dispatch] = useReducer(reducer, {tracker: null, config})
    let value = {
        startTracking: () => dispatch({type: 'start'}),
        initTracker: () => dispatch({type: 'init'})
    }

    return <TrackerContext.Provider value={value}>{children}</TrackerContext.Provider>
}

这里有一点需要注意，官网并没有给出TrackerProvider的用法。这里一定需要注意，需要使用 dynamic import 的方式引入 OpenReplay 的脚本，否则你将会看到 window is not defined 的错误。

import dynamic from 'next/dynamic'
const TrackerProvider = dynamic(() => import('@/trackContext'), { ssr: false });

引入 Eruda

Eruda 是一个专为移动端网页设计的调试工具，它是一个开源项目，可以在 GitHub 上找到它的源码。Eruda 的功能非常强大，它可以让你在移动端网页上调试 JavaScript 代码、查看 DOM 结构、查看网络请求等等。很多时候，我们用它来查看一些 js 错误，或者查看一些网络请求的情况。在 Next.js中引用他的方式，官网上没有明确给出，但是参考 next.js 的官方只能，引入 js 的方式，我们不难得出结论，使用 next/script 来引入 Eruda 的脚本。在 OnLoad 事件中初始化 Eruda 即可。

"use client";
import Script from 'next/script'

function Eruda() {
  return (
    <div classname="container">
      <Script src="//cdn.jsdelivr.net/npm/eruda"
      onLoad={() => {
        eruda.init()
      }}
      ></Script>
    </div>
  )
}

export default Eruda

技巧！如何区分环境开启和关闭监控

我们不希望在本地开发环境中开启监控，因为这样会影响我们的开发效率。所以我们应该怎么做呢？一个就是在 .env.local 文件中添加一个环境变量，然后在代码中判断这个环境变量的值，来决定是否开启监控。

NEXT_PUBLIC_IS_LOCAL=true

这里注意一下，这些带有 NEXTPUBLIC 前缀的环境变量，是可以在客户端代码中访问的，但是不要在这里放置一些敏感信息，因为这些信息会被打包到客户端代码中。

至此，我们就可以在代码中判断这个环境变量的值，来决定是否开启监控。

if(!process.env.NEXT_PUBLIC_IS_LOCAL) {
    // 非本地环境，开启监控
}

总结

通过上面的配置，我们就可以在 Next.js 中引入 OpenReplay 和 Eruda，这样我们就可以在开发环墋中更好的了解用户的使用情况，从而更好的改进我们的产品体验。而且，这两个工具都是免费的，对于一个小项目来说，简直就是福音。

关注老码沉思录，获取我最新的知识分享