feat: add destroy method to OhbugClient

Author: xinyao27

packages/ohbug-browser/src/client.ts

@@ -1,26 +1,27 @@
 import type { OhbugClient, OhbugConfig, OhbugSDK } from '@ohbug/types'
 import { Client } from '@ohbug/core'
-
 import { getGlobal } from '@ohbug/utils'
 
 import { device } from './device'
 import { version } from './version'
 import { extension } from './extension'
 import { notifier } from './notifier'
+import { destroy } from './destroy'
 
 interface OhbugBrowserClient {
   __client: OhbugClient | null
   setup: (config: OhbugConfig) => OhbugClient
 }
 
-function createClient(config: OhbugConfig) {
+function createClient(config: OhbugConfig, handleDestroy: () => void) {
   const global = getGlobal<Window>()
 
   const sdk: OhbugSDK = {
     platform: 'ohbug-browser',
     version,
   }
-  const client = new Client({ sdk, config, device, notifier })
+  const client = new Client({ sdk, config, device, notifier, destroy: handleDestroy })
+
   global.__OHBUG__ = { client }
   client.use(extension)
   client.__logger.info(
@@ -35,12 +36,21 @@ function createClient(config: OhbugConfig) {
 export const BrowserClient: OhbugBrowserClient = {
   __client: null,
   setup(config: OhbugConfig) {
+    function destroyClient() {
+      const global = getGlobal<Window>()
+
+      destroy()
+      BrowserClient.__client = null
+      // @ts-expect-error noop
+      global.__OHBUG__ = undefined
+    }
+
     if (BrowserClient.__client) {
-      BrowserClient.__client.__logger?.warn('init() has been called. Ignored.')
+      BrowserClient.__client.__logger?.warn('setup() has been called. Ignored.')
       return BrowserClient.__client
     }
 
-    BrowserClient.__client = createClient(config)
+    BrowserClient.__client = createClient(config, destroyClient)
     return BrowserClient.__client
   },
 }

packages/ohbug-browser/src/destroy.ts

@@ -9,15 +9,19 @@ import {
 
 const global = getGlobal<Window>()
 
+export function destroy() {
+  removeReplaceAddEventListener()
+  removeCaptureScript()
+  removeCaptureNetwork()
+  removeCaptureAction()
+  removeCaptureConsole()
+}
+
 export function handleDestroy() {
   global?.addEventListener?.(
     'unload',
     () => {
-      removeReplaceAddEventListener()
-      removeCaptureScript()
-      removeCaptureNetwork()
-      removeCaptureAction()
-      removeCaptureConsole()
+      destroy()
     },
     true,
   )

packages/ohbug-core/src/client.ts

@@ -5,6 +5,7 @@ import type {
   OhbugClientConstructorValues,
   OhbugConfig,
   OhbugCreateEvent,
+  OhbugDestroy,
   OhbugEventWithMethods,
   OhbugExtension,
   OhbugGetDevice,
@@ -36,6 +37,8 @@ implements OhbugClient {
 
   readonly __notifier: OhbugNotifier
 
+  readonly __destroy?: OhbugDestroy
+
   readonly __extensions: OhbugExtension[]
 
   readonly __actions: OhbugAction[]
@@ -50,6 +53,7 @@ implements OhbugClient {
     schema = baseSchema,
     device,
     notifier,
+    destroy,
   }: OhbugClientConstructorValues) {
     const { config, errors } = verifyConfig(baseConfig, schema)
 
@@ -59,6 +63,7 @@ implements OhbugClient {
     this.__logger = config.logger
     this.__device = device
     this.__notifier = notifier
+    this.__destroy = destroy
 
     this.__extensions = []
 
@@ -88,6 +93,18 @@ implements OhbugClient {
     return this
   }
 
+  destroy(): void {
+    if (this.__destroy) {
+      this.__logger.info(
+        '%c @ohbug/core %c has been destroyed %c',
+        'background:#333; padding: 2px 1px; color: #FFF',
+        'background:#FF6F61; padding: 2px 1px; color: #FFF',
+        'background:transparent',
+      )
+      return this.__destroy?.()
+    }
+  }
+
   /**
    * Create an event, you will get a data body containing device actions and other information
    * 创建事件，将会得到一个含有 device actions 等信息的数据体

packages/ohbug-types/src/client.d.ts

@@ -7,12 +7,15 @@ import type { OhbugAction } from './action'
 import type { OhbugUser } from './user'
 import type { OhbugMetadata } from './metadata'
 
+export type OhbugDestroy = () => void
+
 export interface OhbugClientConstructorValues {
   sdk: OhbugSDK
   config: OhbugConfig
   schema?: OhbugSchema
   device: OhbugGetDevice
   notifier: OhbugNotifier
+  destroy?: OhbugDestroy
 }
 export interface OhbugClientConstructor {
   new (values: OhbugClientConstructorValues): OhbugClient
@@ -24,6 +27,7 @@ export interface OhbugClient {
   readonly __logger: OhbugLoggerConfig
   readonly __device: OhbugGetDevice
   readonly __notifier: OhbugNotifier
+  readonly __destroy?: OhbugDestroy
 
   readonly __extensions: OhbugExtension[]
 
@@ -32,6 +36,7 @@ export interface OhbugClient {
   readonly __metadata: OhbugMetadata
 
   use: (extension: OhbugExtension) => OhbugClient
+  destroy: () => void
   createEvent: <D = any>(
     value: OhbugCreateEvent<D>
   ) => OhbugEventWithMethods<D> | null

playground/src/App.tsx

@@ -47,6 +47,9 @@ function Trigger() {
   const onClickRenderError = useCallback(() => {
     setRenderError(true)
   }, [])
+  const onDestroy = useCallback(() => {
+    client.destroy()
+  }, [])
 
   if (renderError) {
     throw new Error('is Render error')
@@ -62,6 +65,8 @@ function Trigger() {
         <button onClick={onClickTriggerCodeError}>代码错误</button>
         <button onClick={onClickCustomLog}>自定义log</button>
         <button onClick={onClickRenderError}>render错误</button>
+
+        <button onClick={onDestroy}>destroy</button>
       </div>
     )
   }