feat: telemetry

desk/src/pages/onboarding/OnboardingIntro.vue

@@ -10,10 +10,15 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
+import { capture } from "@/telemetry";
+
 const text =
 	"We're excited to have you join us and explore the world of efficient customer support. \
 	We are here to revolutionize the way you handle customer inquiries, streamline ticket \
 	management, and deliver outstanding service.";
 const subText =
 	"Once again, welcome to Frappe Helpdesk! Let's hope for a long and smooth journey!";
+
+onMounted(() => capture("onboarding_started"));
 </script>

desk/src/pages/onboarding/SetupFavicon.vue

@@ -21,8 +21,9 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from "vue";
+import { Ref, onMounted, ref } from "vue";
 import { createResource, FileUploader } from "frappe-ui";
+import { capture } from "@/telemetry";
 
 const help =
 	"A favicon enhances your website by providing a small, recognizable icon that \
@@ -35,6 +36,7 @@ const r = createResource({
 	debounce: 1000,
 	onSuccess(data) {
 		imageUrl.value = data.brand_favicon;
+		capture("onboarding_favicon_changed");
 	},
 });
 
@@ -46,4 +48,6 @@ function update(file) {
 		value: file.file_url,
 	});
 }
+
+onMounted(() => capture("onboarding_favicon_reached"));
 </script>

desk/src/pages/onboarding/SetupLogo.vue

@@ -21,8 +21,9 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from "vue";
+import { Ref, onMounted, ref } from "vue";
 import { createResource, FileUploader } from "frappe-ui";
+import { capture } from "@/telemetry";
 
 const help =
 	"this will be used in many places, including login and loading screens. \
@@ -34,6 +35,7 @@ const r = createResource({
 	debounce: 1000,
 	onSuccess(data) {
 		imageUrl.value = data.brand_logo;
+		capture("onboarding_logo_changed");
 	},
 });
 
@@ -45,4 +47,6 @@ function update(file) {
 		value: file.file_url,
 	});
 }
+
+onMounted(() => capture("onboarding_logo_reached"));
 </script>

desk/src/pages/onboarding/SetupName.vue

@@ -20,8 +20,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { createResource } from "frappe-ui";
+import { capture } from "@/telemetry";
 import IconCheck from "~icons/ph/check-bold";
 
 const text =
@@ -38,6 +39,7 @@ const r = createResource({
 	debounce: 1000,
 	onSuccess() {
 		isCheckVisible.value = true;
+		capture("onboarding_name_changed");
 	},
 });
 
@@ -50,4 +52,6 @@ function update(value: string) {
 		value,
 	});
 }
+
+onMounted(() => capture("onboarding_name_reached"));
 </script>

desk/src/pages/onboarding/SetupSkipEmail.vue

@@ -10,8 +10,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { createResource } from "frappe-ui";
+import { capture } from "@/telemetry";
 
 const query =
 	"Did you know that our Helpdesk is designed to function independently, \
@@ -25,6 +26,9 @@ const r = createResource({
 	debounce: 1000,
 	onSuccess(data) {
 		isYes.value = data.skip_email_workflow;
+		const cond = isYes.value ? "yes" : "no";
+		const event = "onboarding_skip_email_" + cond;
+		capture(event);
 	},
 });
 
@@ -36,4 +40,6 @@ function update(value: boolean) {
 		value,
 	});
 }
+
+onMounted(() => capture("onboarding_skip_email_reached"));
 </script>

desk/src/pages/onboarding/SuccessMessage.vue

@@ -32,8 +32,13 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
+import { capture } from "@/telemetry";
+
 const github = "https://github.com/frappe/helpdesk";
 const issues = "https://github.com/frappe/helpdesk/issues";
 const support = "https://frappedesk.com/helpdesk";
 const email = "hello@frappe.io";
+
+onMounted(() => capture("onboarding_finished"));
 </script>

desk/src/pages/onboarding/email/EmailCredentials.vue

@@ -34,9 +34,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { createResource, Button, Input, debounce } from "frappe-ui";
+import { capture } from "@/telemetry";
 import { createToast } from "@/utils/toasts";
 import { useOnboardingEmailStore } from "./data";
 
@@ -82,6 +83,7 @@ const emailDefaults = {
 const insertRes = createResource({
 	url: "frappe.client.insert",
 	onSuccess: () => {
+		capture("onboarding_email_credentials_success");
 		next();
 	},
 	onError: (error) => {
@@ -93,6 +95,8 @@ const insertRes = createResource({
 			icon: "x",
 			iconClasses: "text-red-500",
 		});
+
+		capture("onboarding_email_credentials_fail");
 	},
 });
 
@@ -125,4 +129,6 @@ const submit = debounce(() => {
 		},
 	});
 }, 500);
+
+onMounted(() => capture("onboarding_email_credentials_reached"));
 </script>

desk/src/pages/onboarding/email/SelectService.vue

@@ -38,10 +38,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import { Button, Tooltip } from "frappe-ui";
 import { isEmpty } from "lodash";
+import { capture } from "@/telemetry";
 import { useOnboardingEmailStore } from "./data";
 import IconAlert from "~icons/espresso/alert-circle";
 import LogoGmail from "@/assets/images/gmail.png";
@@ -86,4 +87,6 @@ const services = [
 const info = computed(
 	() => services.find((s) => s.name === service.value)?.info
 );
+
+onMounted(() => capture("onboarding_email_select_service_reached"));
 </script>

desk/src/pages/onboarding/email/SetupEmail.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
 import { storeToRefs } from "pinia";
+import { capture } from "@/telemetry";
 import { useOnboardingEmailStore } from "./data";
 import EmailIntro from "./EmailIntro.vue";
 import SelectService from "./SelectService.vue";
@@ -15,4 +17,6 @@ import SuccessMessage from "./SuccessMessage.vue";
 const onboardingEmailStore = useOnboardingEmailStore();
 const { step } = storeToRefs(onboardingEmailStore);
 const steps = [EmailIntro, SelectService, EmailCredentials, SuccessMessage];
+
+onMounted(() => capture("onboarding_email_reached"));
 </script>

desk/src/pages/onboarding/email/SuccessMessage.vue

@@ -10,8 +10,13 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
+import { capture } from "@/telemetry";
+
 const emoji = "✔️";
 const message =
 	"Fantastic! Your email is now active. You are ready unleash true \
 	potential of Frappe Helpdesk!";
+
+onMounted(() => capture("onboarding_email_finished"));
 </script>

desk/src/router.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { call } from "frappe-ui";
 import { useAuthStore } from "@/stores/auth";
+import { init as initTelemetry } from "./telemetry";
 
 export const WEBSITE_ROOT = "Website Root";
 
@@ -393,6 +394,8 @@ router.beforeEach(async (to) => {
 });
 
 router.beforeEach(async (to) => {
+	await initTelemetry();
+
 	const isAuthRoute = AUTH_ROUTES.includes(to.name);
 	const authStore = useAuthStore();
 

desk/src/telemetry.ts

@@ -0,0 +1,57 @@
+import { useStorage } from "@vueuse/core";
+import { call } from "frappe-ui";
+import "../../../frappe/frappe/public/js/lib/posthog.js";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const posthog: any;
+
+const APP = "helpdesk";
+const SITENAME = window.location.hostname;
+
+const telemetry = useStorage("telemetry", {
+	enabled: false,
+	project_id: "",
+	host: "",
+});
+
+export async function init() {
+	await set_enabled();
+	if (!telemetry.value.enabled) return;
+	try {
+		await set_credentials();
+		posthog.init(telemetry.value.project_id, {
+			api_host: telemetry.value.host,
+			autocapture: false,
+			capture_pageview: false,
+			capture_pageleave: false,
+			advanced_disable_decide: true,
+		});
+		posthog.identify(SITENAME);
+	} catch (e) {
+		console.trace("Failed to initialize telemetry", e);
+		telemetry.value.enabled = false;
+	}
+}
+
+async function set_enabled() {
+	if (telemetry.value.enabled) return;
+
+	await call("helpdesk.api.telemetry.is_enabled").then((res) => {
+		telemetry.value.enabled = res;
+	});
+}
+
+async function set_credentials() {
+	if (!telemetry.value.enabled) return;
+	if (telemetry.value.project_id && telemetry.value.host) return;
+
+	await call("helpdesk.api.telemetry.get_credentials").then((res) => {
+		telemetry.value.project_id = res.project_id;
+		telemetry.value.host = res.telemetry_host;
+	});
+}
+
+export function capture(event: string) {
+	if (!telemetry.value.enabled) return;
+	posthog.capture(`${APP}_${event}`);
+}

helpdesk/api/telemetry.py

@@ -0,0 +1,18 @@
+import frappe
+
+
+@frappe.whitelist()
+def is_enabled():
+    return bool(
+        frappe.get_system_settings("enable_telemetry")
+        and frappe.conf.get("posthog_host")
+        and frappe.conf.get("posthog_project_id")
+    )
+
+
+@frappe.whitelist()
+def get_credentials():
+    return {
+        "project_id": frappe.conf.get("posthog_project_id"),
+        "telemetry_host": frappe.conf.get("posthog_host"),
+    }

helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py

@@ -16,7 +16,6 @@
 from frappe.model.mapper import get_mapped_doc
 from frappe.query_builder import Case, DocType, Order
 from frappe.query_builder.functions import Count
-from frappe.realtime import get_website_room
 from frappe.utils import date_diff, get_datetime, now_datetime, time_diff_in_seconds
 from frappe.utils.user import is_website_user
 
@@ -27,8 +26,7 @@
 	default_outgoing_email_account,
 	default_ticket_outgoing_email_account,
 )
-
-from helpdesk.utils import publish_event
+from helpdesk.utils import publish_event, capture_event
 
 
 class HDTicket(Document):
@@ -439,6 +437,8 @@ def reply_via_agent(
 		self.status = "Replied"
 		self.save()
 
+		capture_event("agent_replied")
+
 		if skip_email_workflow:
 			return
 

helpdesk/utils.py

@@ -3,13 +3,18 @@
 import frappe
 from bs4 import BeautifulSoup
 from frappe.realtime import get_website_room
+from frappe.utils.telemetry import capture as _capture
 
 
 def publish_event(event: str, data: dict):
 	room = get_website_room()
 	frappe.publish_realtime(event, message=data, room=room, after_commit=True)
 
 
+def capture_event(event: str):
+    return _capture(event, "helpdesk")
+
+
 def extract_mentions(html):
 	if not html:
 		return []