feat: unite包添加错误收集及设置的方法

AntmJS · Aug 20, 2021 · 0f146f6 · 0f146f6
1 parent b46b4c4
commit 0f146f6
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 9 deletions.
diff --git a/packages/unite/README.md b/packages/unite/README.md
@@ -14,12 +14,25 @@ yarn add @antmjs/unite
 
 ## 使用
 
+app.tsx
+
+```js
+import { registerCatch } from '@antmjs/unite'
+
+registerCatch(function (err, setError) {
+  // 在Unite方法的第一个参数对象内发起的请求或者js异常都会在这里被捕获到，你可以在这里处理好异常根据实际情况toast或者setError
+})
+
+```
 
 ```js
 import Unite from '@antmjs/unite'
 
 const { exposure, log, monitor } =  Unite(
-  { state: {}, onLoad() {} }, function ({state, events, loading}) {
+  { state: {}, onLoad() {
+    cosnole.log(this.error)
+    this.setError({})
+  } }, function ({state, events, loading, error}) {
     return <View>Hello World</View>
   }
 )

diff --git a/packages/unite/src/index.ts b/packages/unite/src/index.ts
@@ -13,9 +13,12 @@ import type TypeUnite from '../types/index.d'
 
 let catchMethod: any
 
-function executeCatch(err: any): void {
+function executeCatch(
+  err: any,
+  setError: React.Dispatch<React.SetStateAction<any>>,
+): void {
   if (catchMethod) {
-    catchMethod(err)
+    catchMethod(err, setError)
   } else {
     console.warn('请先注册registerCatch')
   }
@@ -29,6 +32,7 @@ function useEventEnhancement<
 >(
   config: TypeUnite.Option<TState, TAll, TProps>,
   setState: React.Dispatch<React.SetStateAction<TState>>,
+  setError: React.Dispatch<React.SetStateAction<any>>,
   context: React.MutableRefObject<any>,
 ): TypeUnite.EventEnhancementResponse<TAll> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -49,6 +53,12 @@ function useEventEnhancement<
       }
     }
 
+    const _setError = function (err: any): void {
+      if (context.current.__mounted) {
+        setError(err)
+      }
+    }
+
     const _setLoading = function (
       obj: Partial<{ [K in keyof TypeUnite.PromiseProperties<TAll>]: boolean }>,
     ): void {
@@ -65,6 +75,8 @@ function useEventEnhancement<
     context.current.loading = loading
     context.current.setState = _setState
     eventsRef.current.setState = _setState
+    context.current.setError = _setError
+    eventsRef.current.setError = _setError
 
     for (const item in config) {
       if (typeof config[item] === 'function') {
@@ -85,7 +97,7 @@ function useEventEnhancement<
               return res
             }
           } catch (err) {
-            executeCatch(err)
+            executeCatch(err, _setError)
           }
 
           const loadingTrue = {
@@ -108,12 +120,12 @@ function useEventEnhancement<
                 })
                 .catch(function (err: any) {
                   _setLoading(loadingFalse)
-                  executeCatch(err)
+                  executeCatch(err, _setError)
                 })
             })
           } catch (err) {
             _setLoading(loadingFalse)
-            executeCatch(err)
+            executeCatch(err, _setError)
           }
         }
         context.current[item] = _defined.bind(context.current)
@@ -140,12 +152,19 @@ function useContainer<
     useRef({ __mounted: false, __init: false, props })
   )
   const [state, setState] = useState(config.state)
+  const [error, setError] = useState(undefined)
 
-  const { events, loading } = useEventEnhancement(config, setState, context)
+  const { events, loading } = useEventEnhancement(
+    config,
+    setState,
+    setError,
+    context,
+  )
 
   const routerInfo: Taro.RouterInfo = useRouter()
   context.current.location = routerInfo
   context.current.state = state
+  context.current.error = error
 
   useEffect(function () {
     // 解决development环境热更新（useState不可破坏性），重新setState
@@ -155,6 +174,7 @@ function useContainer<
 
     return function (): void {
       context.current && (context.current.__mounted = false)
+      setError(undefined)
       context.current?.onUnload?.()
     }
   }, [])
@@ -190,10 +210,15 @@ function useContainer<
     }
   }, [props])
 
-  return { state, events, loading }
+  return { state, events, loading, error }
 }
 
-export function registerCatch(method: (err: any) => void): void {
+export function registerCatch(
+  method: (
+    err: any,
+    setError: React.Dispatch<React.SetStateAction<any>>,
+  ) => void,
+): void {
   catchMethod = method
 }
 

diff --git a/packages/unite/types/index.d.ts b/packages/unite/types/index.d.ts
@@ -45,11 +45,13 @@ declare namespace Unite {
 
   interface InstanceMethods<TState extends IAnyObject> {
     setState: (state: Partial<StateOpt<TState>>) => void
+    setError: React.Dispatch<React.SetStateAction<any>>
   }
   interface InstanceProperty<
     TAll extends IFunctionObject,
     TProps extends IAnyObject,
   > {
+    error: any
     props: TProps
     location: Taro.RouterInfo
     loading: Partial<{ [K in keyof PromiseProperties<TAll>]: boolean }>
@@ -110,6 +112,7 @@ declare namespace Unite {
 
   type Response<TState extends IAnyObject, TAll extends IAnyObject> = {
     state: StateOpt<TState>
+    error: any
   } & EventEnhancementResponse<TAll>
 }