refactor(browser): complete browser refactoring

Author: xinyao27

packages/browser/README-zh_CN.md

@@ -15,121 +15,9 @@ yarn add @ohbug/browser
 ## 使用
 
 ```javascript
-import { init } from '@ohbug/browser'
+import Ohbug from '@ohbug/browser'
 
-init({ apiKey: 'YOUR_API_KEY' })
-```
-
-## API
-
-### init
-
-这是对 `init` 配置的描述。 
-
-```typescript
-interface OhbugConfig {
-  apiKey: string
-  appVersion?: string
-  appType?: string
-  beforeReport?: (event: OhbugEvent<any>) => OhbugEvent<any>
-  reported?: (event: OhbugEvent<any>) => void
-}
-```
-
-#### apiKey
-
-这里作为客户端的唯一标识。
-
-#### appVersion
-
-您应该提供 app 的版本号/标识符，以便于定位问题出现的时机。
-
-#### appType
-
-如果您的 app 的代码库包含不同的入口，但向同一个服务上报，则可能需要添加 `appType` 表示问题来源的入口类型。
-
-#### beforeReport
-
-用于上报前对收集到的信息做一定处理。
-
-#### reported
-
-用于上报后的特定操作。
-
-### captureMessage
-
-用于报告自定义信息。
-
-```javascript
-import { captureMessage } from '@ohbug/browser'
-
-captureMessage('error info')
-```
-
-### feedback
-
-用于收集用户反馈。
-
-```javascript
-import { feedback } from '@ohbug/browser'
-
-btn.addEventListener('click', () => {
-  feedback()
-})
-```
-
-## 插件
-
-### 例子
-
-基于 [perfume.js](https://github.com/Zizzamia/perfume.js) 封装的插件使用。
-
-```
-yarn add @ohbug/plugin-perfume
-```
-
-```javascript
-import { applyPlugin } from '@ohbug/core'
-import ohbugPluginPerfume from '@ohbug/plugin-perfume'
-import { init } from '@ohbug/browser'
-
-const enhancer = applyPlugin(ohbugPluginPerfume)
-init({ apiKey: 'YOUR_API_KEY' }, enhancer)
-```
-
-### 自定义插件
-
-示例
-
-```javascript
-class myPlugin {
-  // capture 用于自定义信息的捕获
-  // 使用 createEvent 封装捕获到的信息
-  // 使用 collect 传递信息给 Ohbug 用于上报
-  capture({ createEvent, collect }) {
-    a.addEventListener('error', (e) => {
-      // do something
-      const event = createEvent('TYPE', e)
-      collect(event)
-    })
-  }
-
-  // state 用于承载额外自定义信息
-  // 返回任意格式 object，最终这些信息将出现在 `event.state` 中
-  state(event) {
-    return {
-      user: 'user_1'
-    }
-  }
-
-  // event 用于对已有信息进行二次处理
-  event(event) {
-    return {
-      ...event,
-      foo: 'bar'
-    }
-  }
-}
+Ohbug.init({ apiKey: 'YOUR_API_KEY' })
 ```
 
 ### 插件列表

packages/browser/README.md

@@ -15,129 +15,9 @@ yarn add @ohbug/browser
 ## Usage
 
 ```javascript
-import { init } from '@ohbug/browser'
+import Ohbug from '@ohbug/browser'
 
-init({ apiKey: 'YOUR_API_KEY' })
-```
-
-## API
-
-### init
-
-Here is a description of the config of `init`.
-
-```typescript
-interface OhbugConfig {
-  apiKey: string
-  appVersion?: string
-  appType?: string
-  beforeReport?: (event: OhbugEvent<any>) => OhbugEvent<any>
-  reported?: (event: OhbugEvent<any>) => void
-}
-```
-
-#### apiKey
-
-Your project API key.
-
-#### appVersion
-
-The version number of your app. Conveniently locate the problem version.
-
-#### appType
-
-The type of your app. If your app's codebase contains different entries, but reports to the same service, you may need to add `appType` to indicate the type of entry for the source of the problem.
-
-#### beforeReport
-
-Used to do some processing on the collected information before reporting.
-
-#### reported
-
-Used to perform specific operations after reporting.
-
-### captureMessage
-
-Used to report custom information
-
-```javascript
-import { captureMessage } from '@ohbug/browser'
-
-captureMessage('error info')
-```
-
-### feedback
-
-Used to collect user feedback
-
-```javascript
-import { feedback } from '@ohbug/browser'
-
-btn.addEventListener('click', () => {
-  feedback()
-})
-```
-
-## Plugin
-
-### Example
-
-Use of plugin based on [perfume.js](https://github.com/Zizzamia/perfume.js) package.
-
-```
-yarn add @ohbug/plugin-perfume
-```
-
-```javascript
-import { applyPlugin } from '@ohbug/core'
-import ohbugPluginPerfume from '@ohbug/plugin-perfume'
-import { init } from '@ohbug/browser'
-
-const enhancer = applyPlugin(ohbugPluginPerfume)
-init({ apiKey: 'YOUR_API_KEY' }, enhancer)
-```
-
-### Custom plugin
-
-Example
-
-```javascript
-
-const capture = ({ createEvent, collect }) => {
-  a.addEventListener('error', (e) => {
-    // do something
-    const event = createEvent('TYPE', e)
-    collect(event)
-  })
-}
-
-class myPlugin {
-  // capture Capture of custom information
-  // Use createEvent to encapsulate captured information
-  // Use collect to pass information to Ohbug for reporting  capture({ createEvent, collect }) {
-    a.addEventListener('error', (e) => {
-      // do something
-      const event = createEvent('TYPE', e)
-      collect(event)
-    })
-  }
-
-  // state is used to carry additional custom information
-  // Returns an object in any format, and eventually this information will appear in event.state
-  state(event) {
-    return {
-      user: 'user_1'
-    }
-  }
-
-  // event is used for secondary processing of existing information
-  event(event) {
-    return {
-      ...event,
-      foo: 'bar'
-    }
-  }
-}
+Ohbug.init({ apiKey: 'YOUR_API_KEY' })
 ```
 
 ### List of plugins

packages/browser/__tests__/async.test.ts

@@ -0,0 +1,18 @@
+import { Client } from '@ohbug/core'
+import { BrowserClient } from '../src/client'
+jest.mock('@ohbug/core')
+
+const mockClient = jest.fn()
+;(Client as jest.Mock).mockImplementation((...args) => {
+  mockClient(...args)
+})
+
+const apiKey = 'API_KEY_TEST'
+
+describe('@ohbug/browser/client', () => {
+  it('should execute init inside core package', () => {
+    BrowserClient.init({ apiKey })
+
+    expect(mockClient).toBeCalledTimes(1)
+  })
+})

packages/browser/__tests__/client.test.ts

@@ -0,0 +1,15 @@
+import type { OhbugEvent } from '@ohbug/types'
+import { notifier } from '../src/notifier'
+
+const mockSendBeacon = jest.fn()
+const event = { type: 'test' } as OhbugEvent<any>
+
+describe('@ohbug/browser/client', () => {
+  it('notify via `navigator.sendBeacon`', () => {
+    navigator.sendBeacon = mockSendBeacon
+
+    notifier(event)
+
+    expect(mockSendBeacon).toBeCalledTimes(1)
+  })
+})