sunda-tracker 1.0.8

package/src/core/ElasticsearchSender.js

@@ -0,0 +1,215 @@
+import { moment } from '@/utils/helpers'
+
+import { DEFAULT_ES_OPTIONS } from '@/utils/constants'
+
+export default class ElasticsearchSender {
+  /**
+   * @param {Object} config 配置项
+   * @param {string} config.node ES服务器地址
+   * @param {string} config.index 索引名称
+   * @param {string} [config.username] 用户名
+   * @param {string} [config.password] 密码
+   * @param {number} [config.batchSize=100] 批量发送大小
+   * @param {number} [config.flushInterval=5000] 自动刷新间隔(ms)
+   */
+  constructor(config) {
+    this.config = {
+      batchSize: 100,
+      flushInterval: 5000,
+      ...DEFAULT_ES_OPTIONS,
+      ...config
+    }
+
+    this.queue = []
+    this.headers = this.buildHeaders()
+    this.timer = null
+    this.startAutoFlush()
+  }
+
+  buildHeaders() {
+    const headers = {
+      'Content-Type': 'application/x-ndjson',
+      Accept: 'application/json'
+    }
+
+    const auth = this.config.encoded
+    headers['Authorization'] = `ApiKey ${auth}`
+
+    return headers
+  }
+
+  /**
+   * 发送单条数据
+   * @param {Object} data
+   */
+  async send(data) {
+    try {
+      const docWithTimestamp = {
+        ...data,
+        '@timestamp': new Date().toISOString()
+      }
+
+      this.queue.push(docWithTimestamp)
+
+      if (this.queue.length >= this.config.batchSize) {
+        await this.flush()
+      }
+
+      return true
+    } catch (error) {
+      console.error('Error sending data to Elasticsearch:', error)
+      return false
+    }
+  }
+
+  /**
+   * 批量发送数据
+   * @param {Array} dataArray 数据数组
+   */
+  async sendBulk(dataArray) {
+    try {
+      const timestamp = new Date().toISOString()
+      const docsWithTimestamp = dataArray.map((data) => ({
+        ...data,
+        '@timestamp': timestamp
+      }))
+
+      this.queue.push(...docsWithTimestamp)
+
+      if (this.queue.length >= this.config.batchSize) {
+        await this.flush()
+      }
+
+      return true
+    } catch (error) {
+      console.error('Error sending bulk data to Elasticsearch:', error)
+      return false
+    }
+  }
+
+  /**
+   * 构建批量请求体
+   * @param {Array} documents 文档数组
+   * @returns {string} NDJSON格式的请求体
+   */
+  buildBulkRequestBody(documents) {
+    return (
+      documents
+        .flatMap((doc) => [
+          JSON.stringify({
+            index: {
+              _index: `${this.config.index}-${moment().format('YYYY.MM.DD')}`
+            }
+          }),
+          JSON.stringify(doc)
+        ])
+        .join('\n') + '\n'
+    )
+  }
+
+  async flush() {
+    if (this.queue.length === 0) return
+
+    const documents = [...this.queue]
+    this.queue = []
+
+    try {
+      const body = this.buildBulkRequestBody(documents)
+      const response = await fetch(
+        `${this.config.node}/${this.config.index}-${moment().format(
+          'YYYY.MM.DD'
+        )}/_bulk`,
+        {
+          method: 'POST',
+          headers: this.headers,
+          body: body
+        }
+      )
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const result = await response.json()
+
+      if (result.errors) {
+        const failedItems = result.items.filter(
+          (item) => item.index.status >= 400
+        )
+        if (failedItems.length > 0) {
+          console.error('Some documents failed to index:', failedItems)
+          this.handleFailedDocuments(failedItems, documents)
+        }
+      }
+
+      return true
+    } catch (error) {
+      this.stopAutoFlush()
+      console.error('Error flushing data to Elasticsearch:', error)
+      this.queue.unshift(...documents)
+      return false
+    }
+  }
+
+  handleFailedDocuments(failedItems, originalDocuments) {
+    failedItems.forEach((item) => {
+      const failedDoc = originalDocuments[item.index._id]
+      this.storeFailedDocument(failedDoc)
+    })
+  }
+
+  storeFailedDocument(document) {
+    try {
+      const failedDocs = JSON.parse(
+        localStorage.getItem('es_failed_docs') || '[]'
+      )
+      failedDocs.push({
+        document,
+        timestamp: new Date().toISOString(),
+        retryCount: 0
+      })
+      localStorage.setItem('es_failed_docs', JSON.stringify(failedDocs))
+    } catch (error) {
+      console.error('Error storing failed document:', error)
+    }
+  }
+
+  async retryFailedDocuments() {
+    try {
+      const failedDocs = JSON.parse(
+        localStorage.getItem('es_failed_docs') || '[]'
+      )
+      if (failedDocs.length === 0) return
+
+      const docsToRetry = failedDocs.filter((doc) => doc.retryCount < 3)
+      const remainingDocs = failedDocs.filter((doc) => doc.retryCount >= 3)
+      docsToRetry.forEach((doc) => doc.retryCount++)
+
+      await this.sendBulk(docsToRetry.map((doc) => doc.document))
+      localStorage.setItem('es_failed_docs', JSON.stringify(remainingDocs))
+    } catch (error) {
+      console.error('Error retrying failed documents:', error)
+    }
+  }
+
+  startAutoFlush() {
+    this.timer = setInterval(() => {
+      if (this.queue.length > 0) {
+        this.flush()
+      }
+      this.retryFailedDocuments()
+    }, this.config.flushInterval)
+  }
+
+  stopAutoFlush() {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+  }
+
+  destroy() {
+    this.stopAutoFlush()
+    return this.flush()
+  }
+}

package/src/core/Queue.js

@@ -0,0 +1,21 @@
+export default class Queue {
+  constructor(options) {
+    this.options = options
+    this.cache = []
+    this.retryQueue = new Map()
+  }
+
+  async send(data) {
+    // TODO:
+    console.log('send track data to server ====>', data)
+  }
+
+  addToRetryQueue(data) {
+    // TODO: 重试队列逻辑
+    console.log('retry ====>', data)
+  }
+
+  async processRetryQueue() {
+    // TODO: 处理重试队列
+  }
+}

package/src/core/Storage.js

@@ -0,0 +1,34 @@
+export default class Storage {
+  constructor({ prefix = 'track_' }) {
+    this.prefix = prefix
+  }
+
+  setItem(key, value) {
+    localStorage.setItem(this.prefix + key, JSON.stringify(value))
+  }
+
+  getItem(key) {
+    const value = localStorage.getItem(this.prefix + key)
+    return value ? JSON.parse(value) : null
+  }
+
+  removeItem(key) {
+    localStorage.removeItem(this.prefix + key)
+  }
+
+  getSessionId() {
+    return this.getItem('session_id')
+  }
+
+  setSessionId(sessionId) {
+    this.setItem('session_id', sessionId)
+  }
+
+  setUser(userInfo) {
+    this.setItem('user', userInfo)
+  }
+
+  getUser() {
+    return this.getItem('user')
+  }
+}

package/src/core/Track.js

@@ -0,0 +1,53 @@
+import AutoTrack from '@/plugins/AutoTrack'
+import Performance from '@/plugins/Performance'
+import Device from './Device'
+import ElasticsearchSender from './ElasticsearchSender'
+import ApiSender from './ApiSender'
+// import Queue from './Queue'
+import Storage from './Storage'
+
+export default class Track {
+  constructor(options) {
+    this.options = options
+    // this.queue = new Queue(options)
+    this.storage = new Storage(options)
+    this.device = new Device(options)
+    this.sender =
+      options.type === 'es'
+        ? new ElasticsearchSender(options)
+        : new ApiSender(options)
+
+    this.init()
+  }
+
+  init() {
+    this.sessionId = this.storage.getSessionId() || this.device.generateUUID()
+    this.storage.setSessionId(this.sessionId)
+
+    this.deviceInfo = this.device.getInfo()
+    this.initPlugins()
+    // this.initListeners()
+  }
+
+  setUser(userInfo) {
+    this.storage.setUser(userInfo)
+  }
+
+  initPlugins() {
+    if (this.options.autoTrack) {
+      this.autoTrack = new AutoTrack(this)
+    }
+
+    if (this.options.enablePerformance) {
+      this.performance = new Performance(this)
+    }
+  }
+
+  track(type, data) {
+    this.sender.send({
+      // type,
+      ...data,
+      sessionId: this.sessionId
+    })
+  }
+}

package/src/index.js

@@ -0,0 +1,45 @@
+import Track from '@/core/Track'
+import { DEFAULT_OPTIONS } from '@/utils/constants'
+
+const getInstance = (options = {}) => {
+  if (!window._trackInstance) {
+    window._trackInstance = new Track({
+      ...DEFAULT_OPTIONS,
+      ...options
+    })
+  }
+
+  return window._trackInstance
+}
+
+export default getInstance
+
+export const VueTracker = {
+  install: (app, options = {}) => {
+    const trackInstance = getInstance(options)
+
+    app.config.globalProperties.$track = {
+      track(eventName, eventData) {
+        return trackInstance.track(eventName, eventData)
+      },
+
+      setUser(userInfo) {
+        return trackInstance.setUser(userInfo)
+      },
+
+      clearUser() {
+        return trackInstance.clearUser()
+      },
+
+      trackDeviceInfo() {
+        return trackInstance.track('device', trackInstance.deviceInfo)
+      }
+    }
+  }
+}
+
+export const TrackMixin = {
+  created() {
+    this.$trackInstance = this.$track
+  }
+}

package/src/plugins/AutoTrack.js

@@ -0,0 +1,47 @@
+import { kebabToCamelCase } from '@/utils/helpers'
+
+export default class AutoTrack {
+  constructor(track) {
+    this.track = track
+    this.init()
+    this.options = track.options
+  }
+
+  init() {
+    this.bindClickEvents()
+    this.observeRouteChanges()
+  }
+
+  bindClickEvents() {
+    document.addEventListener('click', (event) => {
+      const target = event.target
+      const trackElement = target.closest('[data-track-type]')
+
+      if (trackElement) {
+        const trackType = trackElement.getAttribute('data-track-type')
+
+        const trackArgs = {}
+        for (const attr of trackElement.attributes) {
+          if (attr.name.startsWith('data-track-args-')) {
+            const key = kebabToCamelCase(
+              attr.name.replace('data-track-args-', '')
+            )
+
+            trackArgs[key] = attr.value
+          }
+        }
+
+        if (trackType) {
+          this.track.track(trackType, {
+            ...trackArgs,
+            sessionId: this.track.sessionId
+          })
+        }
+      }
+    })
+  }
+
+  observeRouteChanges() {
+    // 路由变化追踪逻辑
+  }
+}

package/src/plugins/Performance.js

@@ -0,0 +1,189 @@
+import { throttle } from '@/utils/helpers'
+
+export default class Performance {
+  constructor(track) {
+    this.track = track
+    this.metrics = {}
+    this.isSupported = this.checkSupport()
+
+    if (this.isSupported) {
+      this.init()
+    }
+  }
+
+  checkSupport() {
+    return (
+      typeof window !== 'undefined' &&
+      window.performance &&
+      window.performance.timing &&
+      window.performance.getEntriesByType
+    )
+  }
+
+  init() {
+    this.observePageLoad()
+    this.observeResources()
+    this.observeLongTasks()
+    this.observePaint()
+    this.observeErrors()
+  }
+
+  observePageLoad() {
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        const timing = performance.getEntriesByType('navigation')[0]
+        const metrics = {
+          dnsTime: timing.domainLookupEnd - timing.domainLookupStart,
+          tcpTime: timing.connectEnd - timing.connectStart,
+          sslTime:
+            timing.secureConnectionStart > 0 ?
+              timing.connectEnd - timing.secureConnectionStart :
+              0,
+          ttfb: timing.responseStart - timing.requestStart,
+          responseTime: timing.responseEnd - timing.responseStart,
+          domParseTime: timing.domInteractive - timing.responseEnd,
+          domReadyTime: timing.domContentLoadedEventEnd - timing.startTime,
+          loadTime: timing.loadEventEnd - timing.startTime
+        }
+
+        this.track.track('page_performance', metrics)
+      }, 0)
+    })
+  }
+
+  observeResources() {
+    const observer = new PerformanceObserver(
+      throttle((list) => {
+        const entries = list.getEntries()
+        entries.forEach((entry) => {
+          if (
+            entry.initiatorType !== 'fetch' &&
+            entry.initiatorType !== 'xmlhttprequest'
+          ) {
+            this.track.track('resource_performance', {
+              name: entry.name,
+              type: entry.initiatorType,
+              duration: entry.duration,
+              size: entry.transferSize,
+              protocol: entry.nextHopProtocol
+            })
+          }
+        })
+      }, 3000)
+    )
+
+    observer.observe({ entryTypes: ['resource'] })
+  }
+
+  observeLongTasks() {
+    if (typeof PerformanceLongTaskTiming !== 'undefined') {
+      const observer = new PerformanceObserver((list) => {
+        list.getEntries().forEach((entry) => {
+          this.track.track('long_task', {
+            duration: entry.duration,
+            startTime: entry.startTime,
+            name: entry.name
+          })
+        })
+      })
+
+      observer.observe({ entryTypes: ['longtask'] })
+    }
+  }
+
+  observePaint() {
+    const observer = new PerformanceObserver((list) => {
+      const entries = list.getEntries()
+      entries.forEach((entry) => {
+        this.track.track('paint_timing', {
+          name: entry.name,
+          startTime: entry.startTime
+        })
+      })
+    })
+
+    observer.observe({ entryTypes: ['paint'] })
+  }
+
+  observeErrors() {
+    window.addEventListener(
+      'error',
+      (event) => {
+        this.track.track('js_error', {
+          message: event.message,
+          filename: event.filename,
+          lineno: event.lineno,
+          colno: event.colno,
+          error: event.error ? event.error.stack : null
+        })
+      },
+      true
+    )
+
+    window.addEventListener('unhandledrejection', (event) => {
+      this.track.track('promise_error', {
+        message: event.reason.message || event.reason,
+        stack: event.reason.stack
+      })
+    })
+  }
+
+  getFirstScreenTime() {
+    return new Promise((resolve) => {
+      if (document.readyState === 'complete') {
+        this.calculateFirstScreen(resolve)
+      } else {
+        window.addEventListener('load', () => {
+          this.calculateFirstScreen(resolve)
+        })
+      }
+    })
+  }
+
+  calculateFirstScreen(callback) {
+    const images = document.querySelectorAll('img')
+    let maxTime = performance.timing.domContentLoadedEventEnd
+
+    if (images.length === 0) {
+      callback(maxTime)
+      return
+    }
+
+    let completed = 0
+    const imageLoaded = () => {
+      completed++
+      if (completed === images.length) {
+        callback(maxTime)
+      }
+    }
+
+    images.forEach((img) => {
+      if (img.complete) {
+        imageLoaded()
+      } else {
+        img.addEventListener('load', () => {
+          const loadTime = performance.now()
+          maxTime = Math.max(maxTime, loadTime)
+          imageLoaded()
+        })
+        img.addEventListener('error', imageLoaded)
+      }
+    })
+  }
+
+  getCurrentMetrics() {
+    if (!this.isSupported) return null
+
+    return {
+      ...this.metrics,
+      memory: performance.memory ?
+        {
+          usedJSHeapSize: performance.memory.usedJSHeapSize,
+          totalJSHeapSize: performance.memory.totalJSHeapSize
+        } :
+        null,
+      navigation: performance.getEntriesByType('navigation')[0],
+      timing: performance.timing
+    }
+  }
+}

package/src/utils/constants.js

@@ -0,0 +1,21 @@
+export const DEFAULT_OPTIONS = {
+  serverUrl: '',
+  appId: '',
+  cacheLimit: 10,
+  autoTrack: false,
+  enablePerformance: false,
+  debug: false,
+  maxRetryTimes: 3,
+  timeout: 5000,
+  type: 'es', // es, api
+  collectUrl: '',
+  collectMethod: 'post'
+}
+
+export const DEFAULT_ES_OPTIONS = {
+  // node: import.meta.env.VITE_APP_ES_NODE,
+  // id: 'SEGwE48BDXHCyTKWTBXE',
+  // index: import.meta.env.VITE_APP_ES_INDEX_NAME,
+  // api_key: '3HLDi5PYTfymTnAj7MmG-w',
+  // encoded: import.meta.env.VITE_APP_ES_ENCODED
+}