Merge pull request #8 from EzStars/docs/Zero

docs: 📝 增加错误监控相关文档

Author: Eomnational

docs/使用文档/错误监控/JS错误捕获.md

@@ -0,0 +1,26 @@
+## js错误捕获
+
+```
+window.addEventListener(
+    'error',
+    (e: ErrorEvent | Event) => {
+      const errorType = getErrorType(e)
+      switch (errorType) {
+        case TraceSubTypeEnum.resource:
+          initResourceError(e)
+          break
+        case TraceSubTypeEnum.js:
+          initJsError(e as ErrorEvent)
+          break
+        case TraceSubTypeEnum.cors:
+          initCorsError(e as ErrorEvent)
+          break
+        default:
+          break
+      }
+    },
+    true
+  )
+
+```
+

docs/使用文档/错误监控/promise错误捕获.md

@@ -0,0 +1,29 @@
+## promise错误捕获
+promise的错误是通过监听unhandledrejection事件捕获的，但捕获到的错误是无法获取到错误文件还是错误行列数的
+
+```
+window.addEventListener(
+    'unhandledrejection',
+    (e: PromiseRejectionEvent) => {
+      const stack = parseStackFrames(e.reason)
+      const behavior = getBehaviour()
+      const state = behavior?.breadcrumbs?.state || []
+      const eventData = getRecordScreenData()
+      const reportData: PromiseErrorType = {
+        type: TraceTypeEnum.error,
+        subType: TraceSubTypeEnum.promise,
+        message: e.reason.message || e.reason,
+        stack,
+        pageUrl: window.location.href,
+        errId: getErrorUid(`'promise'-${e.reason.message}`),
+        state,
+        timestamp: new Date().getTime(),
+        eventData
+      }
+      // todo 发送错误信息
+      lazyReportBatch(reportData)
+    },
+    true
+  )
+
+```

docs/使用文档/错误监控/react错误捕获.md

@@ -0,0 +1,79 @@
+## react错误捕获
+React16开始，官方提供ErrorBoundary错误边界，被该组件包裹的子组件render函数报错时会触发离当前组件最近的父组件ErrorBoundary
+
+这种情况下，可以通过componentDidCatch将捕获的错误上报
+
+```
+import React, { ReactNode } from 'react'
+import { lazyReportBatch } from '../common/report'
+import {
+  getErrorUid,
+  getReactComponentInfo,
+  parseStackFrames
+} from '../common/utils'
+import { ReactErrorType } from '../types'
+import { TraceSubTypeEnum, TraceTypeEnum } from '../common/enum'
+import { getBehaviour, getRecordScreenData } from '../behavior'
+
+interface ErrorBoundaryProps {
+  Fallback: ReactNode // ReactNode 表示任意有效的 React 内容
+  children: ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+}
+
+let err = {}
+
+class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({ hasError: true })
+    const { componentName, url: src } = getReactComponentInfo(errorInfo)
+    const type = TraceTypeEnum.error
+    const subType = TraceSubTypeEnum.react
+    const message = error.message
+    const stack = parseStackFrames(error)
+    const pageUrl = window.location.href
+    const errId = getErrorUid(`${subType}-${message}-${src}`)
+    const info = error.message
+    const behavior = getBehaviour()
+    const state = behavior?.breadcrumbs?.state || []
+    const eventData = getRecordScreenData()
+    const reportData: ReactErrorType = {
+      type,
+      subType,
+      stack,
+      pageUrl,
+      message,
+      errId,
+      componentName,
+      info,
+      src,
+      state,
+      timestamp: new Date().getTime(),
+      eventData
+    }
+    err = reportData
+    lazyReportBatch(reportData)
+  }
+
+  render() {
+    const { Fallback } = this.props    
+    if (this.state.hasError) {
+      // @ts-ignore
+      return <Fallback error={err}/>
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary
+
+```

docs/使用文档/错误监控/vue错误捕获.md

@@ -0,0 +1,55 @@
+## vue错误捕获
+`errorHandler` 是 `Vue` 提供的全局错误处理方法，用于捕获组件渲染、事件处理、生命周期钩子和子组件中的未捕获错误。开发者可以通过 `errorHandler` 实现错误的统一处理和上报。
+
+```
+import { getBehaviour, getRecordScreenData } from '../behavior'
+import { TraceSubTypeEnum, TraceTypeEnum } from '../common/enum'
+import { lazyReportBatch } from '../common/report'
+import {
+  getErrorUid,
+  getVueComponentInfo,
+  parseStackFrames
+} from '../common/utils'
+import { VueErrorType } from '../types'
+
+// 初始化 Vue异常 的数据获取和上报
+export interface Vue {
+  config: {
+    errorHandler?: any
+    warnHandler?: any
+  }
+}
+
+const initVueError = (app: Vue) => {
+  app.config.errorHandler = (err: Error, vm: any, info: string) => {
+    console.error(err)
+    const { componentName, url: src } = getVueComponentInfo(vm)
+    const type = TraceTypeEnum.error
+    const subType = TraceSubTypeEnum.vue
+    const message = err.message
+    const stack = parseStackFrames(err)
+    const pageUrl = window.location.href
+    const behavior = getBehaviour()
+    const state = behavior?.breadcrumbs?.state || []
+    const eventData = getRecordScreenData()
+    const reportData: VueErrorType = {
+      type,
+      subType,
+      message,
+      stack,
+      pageUrl,
+      info,
+      componentName,
+      src,
+      errId: getErrorUid(`${subType}-${message}-${src}`),
+      state,
+      timestamp: new Date().getTime(),
+      eventData
+    }
+    lazyReportBatch(reportData)
+  }
+}
+
+export default initVueError
+
+```

docs/使用文档/错误监控/资源加载错误捕获.md

@@ -0,0 +1,36 @@
+## 资源加载错误捕获
+
+收集 JavaScript、CSS 和图片等加载错误
+
+```
+const initResourceError = (e: Event) => {
+  // 通过 e.target 确定错误是发生在哪个资源上
+  const target = e.target as ResourceErrorTarget
+  // img是src，link就是href
+  const src = target.src || target.href
+  const type = e.type
+  const subType = TraceSubTypeEnum.resource
+  const tagName = target.tagName
+  const message = ''
+  const html = target.outerHTML
+  // 获取dom加载位置
+  const path = getPathToElement(target)
+  const behavior = getBehaviour()
+  const state = behavior?.breadcrumbs?.state || []
+  const reportData: ResourceErrorType = {
+    type,
+    subType,
+    tagName,
+    message,
+    html,
+    src,
+    pageUrl: window.location.href,
+    path,
+    errId: getErrorUid(`${subType}-${message}-${src}`),
+    state,
+    timestamp: new Date().getTime()
+  }
+  lazyReportBatch(reportData)
+}
+
+```