feat: add PostHogProvider for analytics integration

- Introduced PostHogProvider to manage data collection based on user settings.
- Wrapped the main application in PostHogProvider to enable analytics when data collection is allowed.
This commit is contained in:
kangfenmao 2025-04-21 11:18:11 +08:00
parent cc18f0f0c3
commit 4789ba3e8f
2 changed files with 53 additions and 26 deletions

View File

@ -8,6 +8,7 @@ import { PersistGate } from 'redux-persist/integration/react'
import Sidebar from './components/app/Sidebar' import Sidebar from './components/app/Sidebar'
import TopViewContainer from './components/TopView' import TopViewContainer from './components/TopView'
import AntdProvider from './context/AntdProvider' import AntdProvider from './context/AntdProvider'
import PostHogProvider from './context/PostHogProvider'
import StyleSheetManager from './context/StyleSheetManager' import StyleSheetManager from './context/StyleSheetManager'
import { SyntaxHighlighterProvider } from './context/SyntaxHighlighterProvider' import { SyntaxHighlighterProvider } from './context/SyntaxHighlighterProvider'
import { ThemeProvider } from './context/ThemeProvider' import { ThemeProvider } from './context/ThemeProvider'
@ -24,32 +25,34 @@ import TranslatePage from './pages/translate/TranslatePage'
function App(): React.ReactElement { function App(): React.ReactElement {
return ( return (
<Provider store={store}> <Provider store={store}>
<StyleSheetManager> <PostHogProvider>
<ThemeProvider> <StyleSheetManager>
<AntdProvider> <ThemeProvider>
<SyntaxHighlighterProvider> <AntdProvider>
<PersistGate loading={null} persistor={persistor}> <SyntaxHighlighterProvider>
<TopViewContainer> <PersistGate loading={null} persistor={persistor}>
<HashRouter> <TopViewContainer>
<NavigationHandler /> <HashRouter>
<Sidebar /> <NavigationHandler />
<Routes> <Sidebar />
<Route path="/" element={<HomePage />} /> <Routes>
<Route path="/agents" element={<AgentsPage />} /> <Route path="/" element={<HomePage />} />
<Route path="/paintings" element={<PaintingsPage />} /> <Route path="/agents" element={<AgentsPage />} />
<Route path="/translate" element={<TranslatePage />} /> <Route path="/paintings" element={<PaintingsPage />} />
<Route path="/files" element={<FilesPage />} /> <Route path="/translate" element={<TranslatePage />} />
<Route path="/knowledge" element={<KnowledgePage />} /> <Route path="/files" element={<FilesPage />} />
<Route path="/apps" element={<AppsPage />} /> <Route path="/knowledge" element={<KnowledgePage />} />
<Route path="/settings/*" element={<SettingsPage />} /> <Route path="/apps" element={<AppsPage />} />
</Routes> <Route path="/settings/*" element={<SettingsPage />} />
</HashRouter> </Routes>
</TopViewContainer> </HashRouter>
</PersistGate> </TopViewContainer>
</SyntaxHighlighterProvider> </PersistGate>
</AntdProvider> </SyntaxHighlighterProvider>
</ThemeProvider> </AntdProvider>
</StyleSheetManager> </ThemeProvider>
</StyleSheetManager>
</PostHogProvider>
</Provider> </Provider>
) )
} }

View File

@ -0,0 +1,24 @@
import { useAppSelector } from '@renderer/store'
import { PostHogProvider as PostHogReactProvider } from 'posthog-js/react'
import { FC } from 'react'
const POSTHOG_OPTIONS = {
api_key: 'phc_G0omsYajA6A9BY5c0rnU04ZaZck25xpR0DqKhwfF39n',
api_host: 'https://us.i.posthog.com'
}
const PostHogProvider: FC<{ children: React.ReactNode }> = ({ children }) => {
const enableDataCollection = useAppSelector((state) => state.settings.enableDataCollection)
if (enableDataCollection) {
return (
<PostHogReactProvider apiKey={POSTHOG_OPTIONS.api_key} options={POSTHOG_OPTIONS}>
{children}
</PostHogReactProvider>
)
}
return children
}
export default PostHogProvider