chore: added telemetry configuration for cloud & selfhosted

This commit is contained in:
LAKHAN BAHETI 2024-05-23 13:19:47 +05:30
parent c26c8cfe19
commit 12aaef2419
2 changed files with 48 additions and 25 deletions

View File

@ -32,12 +32,12 @@ export interface IAppProvider {
export const AppProvider: FC<IAppProvider> = observer((props) => {
const { children } = props;
// store hooks
const { config } = useInstance();
const { config, instance } = useInstance();
const {
data: currentUser,
membership: { currentProjectRole, currentWorkspaceRole },
userProfile: { data: userProfile },
} = useUser();
const { currentWorkspace } = useWorkspace();
const { currentWorkspace, workspaces } = useWorkspace();
// themes
const { resolvedTheme } = useTheme();
@ -50,9 +50,11 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
<CrispWrapper user={currentUser}>
<PostHogProvider
user={currentUser}
userProfile={userProfile}
currentWorkspaceId={currentWorkspace?.id}
workspaceRole={currentWorkspaceRole}
projectRole={currentProjectRole}
joinedWorkspaceIds={Object.keys(workspaces)}
isCloud={!instance?.is_telemetry_anonymous || false}
telemetryEnabled={instance?.is_telemetry_enabled || false}
posthogAPIKey={config?.posthog_api_key || undefined}
posthogHost={config?.posthog_host || undefined}
>

View File

@ -2,25 +2,34 @@ import { FC, ReactNode, useEffect, useState } from "react";
import { useRouter } from "next/router";
import posthog from "posthog-js";
import { PostHogProvider as PHProvider } from "posthog-js/react";
import { IUser } from "@plane/types";
import { IUser, TUserProfile } from "@plane/types";
// constants
import { GROUP_WORKSPACE } from "@/constants/event-tracker";
// helpers
import { getUserRole } from "@/helpers/user.helper";
// types
export interface IPosthogWrapper {
children: ReactNode;
user: IUser | undefined;
userProfile: TUserProfile | undefined;
joinedWorkspaceIds: string[];
currentWorkspaceId: string | undefined;
workspaceRole: number | undefined;
projectRole: number | undefined;
posthogAPIKey: string | undefined;
posthogHost: string | undefined;
isCloud: boolean;
telemetryEnabled: boolean;
}
const PostHogProvider: FC<IPosthogWrapper> = (props) => {
const { children, user, workspaceRole, currentWorkspaceId, projectRole, posthogAPIKey, posthogHost } = props;
const {
children,
user,
userProfile,
joinedWorkspaceIds,
currentWorkspaceId,
posthogAPIKey,
posthogHost,
isCloud,
telemetryEnabled,
} = props;
// states
const [lastWorkspaceId, setLastWorkspaceId] = useState(currentWorkspaceId);
// router
@ -29,37 +38,42 @@ const PostHogProvider: FC<IPosthogWrapper> = (props) => {
useEffect(() => {
if (user) {
// Identify sends an event, so you want may want to limit how often you call it
posthog?.identify(user.email, {
posthog?.identify(isCloud ? user.email : user.id, {
id: user.id,
first_name: user.first_name,
last_name: user.last_name,
email: user.email,
// use_case: user.use_case, FIXME:
workspace_role: workspaceRole ? getUserRole(workspaceRole) : undefined,
project_role: projectRole ? getUserRole(projectRole) : undefined,
first_name: isCloud ? user.first_name : undefined,
last_name: isCloud ? user.last_name : undefined,
email: isCloud ? user.email : undefined,
use_case: userProfile?.use_case,
role: userProfile?.role,
workspaces: joinedWorkspaceIds,
});
}
}, [user, workspaceRole, projectRole]);
}, [user, joinedWorkspaceIds, isCloud, userProfile]);
useEffect(() => {
if (posthogAPIKey && (process.env.NEXT_PUBLIC_POSTHOG_HOST || posthogHost)) {
if (
posthogAPIKey &&
(process.env.NEXT_PUBLIC_POSTHOG_HOST || posthogHost) &&
(isCloud || (!isCloud && telemetryEnabled))
) {
posthog.init(posthogAPIKey, {
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || posthogHost || "https://app.posthog.com",
debug: process.env.NEXT_PUBLIC_POSTHOG_DEBUG === "1", // Debug mode based on the environment variable
autocapture: false,
capture_pageview: false, // Disable automatic pageview capture, as we capture manually
});
posthog?.opt_in_capturing();
}
}, [posthogAPIKey, posthogHost]);
}, [posthogAPIKey, posthogHost, isCloud, telemetryEnabled]);
useEffect(() => {
// Join workspace group on workspace change
if (lastWorkspaceId !== currentWorkspaceId && currentWorkspaceId && user) {
setLastWorkspaceId(currentWorkspaceId);
posthog?.identify(user.email);
posthog?.identify(isCloud ? user.email : user.id);
posthog?.group(GROUP_WORKSPACE, currentWorkspaceId);
}
}, [currentWorkspaceId, lastWorkspaceId, user]);
}, [currentWorkspaceId, lastWorkspaceId, user, isCloud]);
useEffect(() => {
// Track page views
@ -74,7 +88,14 @@ const PostHogProvider: FC<IPosthogWrapper> = (props) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (posthogAPIKey) return <PHProvider client={posthog}>{children}</PHProvider>;
if (!isCloud && !telemetryEnabled) {
posthog?.opt_out_capturing();
return <>{children}</>;
}
if (posthogAPIKey) {
return <PHProvider client={posthog}>{children}</PHProvider>;
}
return <>{children}</>;
};