mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-23 08:14:06 +00:00
7ad1112535
## Summary This code is entirely excluded from open-source, local, and desktop builds. During minification and dead-code elimination, the Mixpanel library is fully tree-shaken -- meaning no telemetry code is ever included or downloaded in those builds. Even the inline callsites are removed during the build (because `isCloud` becomes false and the entire block becomes dead code and is removed). The code not only has no effect, is not even distributed in the first place. We’ve gone to great lengths to ensure this behavior. Verification proof: https://github.com/user-attachments/assets/b66c35f7-e233-447f-93da-4d70c433908d Telemetry is *enabled only in the ComfyUI Cloud environment*. Its goal is to help us understand and improve onboarding and new-user adoption. ComfyUI aims to be accessible to everyone, but we know the learning curve can be steep. Anonymous usage insights will help us identify where users struggle and guide us toward making the experience more intuitive and welcoming. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6154-add-telemetry-provider-for-cloud-distribution-2926d73d3650813cb9ccfb3a2733848b) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com>
106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
Vue
<template>
|
|
<Button
|
|
:label="label || $t('subscription.required.subscribe')"
|
|
:size="size"
|
|
:class="buttonClass"
|
|
:loading="isLoading"
|
|
:disabled="isPolling"
|
|
severity="primary"
|
|
@click="handleSubscribe"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
import { onBeforeUnmount, ref } from 'vue'
|
|
|
|
import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
|
|
import { isCloud } from '@/platform/distribution/types'
|
|
import { useTelemetry } from '@/platform/telemetry'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
label?: string
|
|
size?: 'small' | 'large'
|
|
buttonClass?: string
|
|
}>(),
|
|
{
|
|
size: 'large',
|
|
buttonClass: 'w-full font-bold'
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
subscribed: []
|
|
}>()
|
|
|
|
const { subscribe, isActiveSubscription, fetchStatus } = useSubscription()
|
|
|
|
const isLoading = ref(false)
|
|
const isPolling = ref(false)
|
|
let pollInterval: number | null = null
|
|
|
|
const POLL_INTERVAL_MS = 3000 // Poll every 3 seconds
|
|
const MAX_POLL_DURATION_MS = 5 * 60 * 1000 // Stop polling after 5 minutes
|
|
|
|
const startPollingSubscriptionStatus = () => {
|
|
isPolling.value = true
|
|
isLoading.value = true
|
|
|
|
const startTime = Date.now()
|
|
|
|
const poll = async () => {
|
|
try {
|
|
if (Date.now() - startTime > MAX_POLL_DURATION_MS) {
|
|
stopPolling()
|
|
return
|
|
}
|
|
|
|
await fetchStatus()
|
|
|
|
if (isActiveSubscription.value) {
|
|
stopPolling()
|
|
emit('subscribed')
|
|
}
|
|
} catch (error) {
|
|
console.error(
|
|
'[SubscribeButton] Error polling subscription status:',
|
|
error
|
|
)
|
|
}
|
|
}
|
|
|
|
void poll()
|
|
pollInterval = window.setInterval(poll, POLL_INTERVAL_MS)
|
|
}
|
|
|
|
const stopPolling = () => {
|
|
if (pollInterval) {
|
|
clearInterval(pollInterval)
|
|
pollInterval = null
|
|
}
|
|
isPolling.value = false
|
|
isLoading.value = false
|
|
}
|
|
|
|
const handleSubscribe = async () => {
|
|
if (isCloud) {
|
|
useTelemetry()?.trackSubscription('subscribe_clicked')
|
|
}
|
|
|
|
isLoading.value = true
|
|
try {
|
|
await subscribe()
|
|
|
|
startPollingSubscriptionStatus()
|
|
} catch (error) {
|
|
console.error('[SubscribeButton] Error initiating subscription:', error)
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
stopPolling()
|
|
})
|
|
</script>
|