Next.js自动捕获模式下如何设置PostHog用户与事件属性

重复上报事件、属性不一致的核心原因是重复初始化PostHog实例：

• 你在_app.js中调用usePostHog已经完成了全局PostHog实例的初始化，该实例默认会自动捕获页面访问、点击等事件并上报。
• 后续在业务路由中单独引入posthog-js并再次调用posthog.init，会生成第二个完全独立的PostHog实例，两个实例同时运行就会导致同一事件上报两次，且两个实例的属性存储互不打通，才会出现一条事件带自定义属性、另一条不带的情况。
• 你之前在业务页拿不到posthog对象，本质是没有正确获取usePostHog初始化完成的全局实例，不是实例不存在。

1. 删除所有重复初始化代码
   移除业务路由页中单独import posthog from 'posthog-js'以及posthog.init(...)的逻辑，整个应用生命周期内只保留_app.js中的一次初始化即可。

2. 正确获取全局PostHog实例
   usePostHog Hook本身会返回已经初始化完成的全局PostHog实例，你在_app.js初始化时可以直接接收返回值，也可以在任意业务组件内直接调用usePostHog()拿到实例，不需要额外引入posthog-js包。
   _app.js 参考写法：

   import { usePostHog } from 'next-use-posthog'
   
   function MyApp({ Component, pageProps }) {
     // 初始化并拿到全局实例
     const posthog = usePostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
       api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
       // 如果需要保证初始上报的事件也携带自定义属性，可以暂时关闭自动pageview捕获
       capture_pageview: false
     })
   
     return <Component {...pageProps} posthog={posthog} />
   }
   
   export default MyApp
   

3. 在业务路由设置全局自定义属性
   在需要设置属性的路由组件中，直接通过usePostHog()拿到全局实例后执行属性设置即可，设置完成后所有自动捕获、手动上报的事件都会携带对应公共属性。
   业务路由参考写法：

   import { useEffect, useState } from 'react'
   import { usePostHog } from 'next-use-posthog'
   
   export default function AuthRoute() {
     const posthog = usePostHog()
     const [decryptedData, setDecryptedData] = useState(null)
   
     // 你的解密数据逻辑
     useEffect(() => {
       // 示例：解密完成后赋值
       // const data = decrypt(xxx)
       // setDecryptedData(data)
     }, [])
   
     useEffect(() => {
       if (!posthog || !decryptedData) return
       // 设置用户属性
       posthog.people.set({
         consentId: decryptedData.srcref,
         orgId: decryptedData.fi
       })
       // 注册全局公共属性，后续所有事件自动携带
       posthog.register({
         consentId: decryptedData.srcref,
         orgId: decryptedData.fi
       })
       // 如果之前关闭了自动pageview，设置完属性后手动上报首次页面访问
       posthog.capture('$pageview')
     }, [posthog, decryptedData])
   
     return <div>页面内容</div>
   }
   

• 同一个PostHog项目Key在单页应用中只需要初始化一次，任何位置重复调用init都会生成多实例导致数据异常。
• 如果不需要特殊处理初始事件属性，可以保留默认的capture_pageview: true配置，posthog.register设置的属性会对设置完成后触发的所有事件生效。

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