feat(error): 改善错误里

Author: ES1993

README.md

@@ -42,16 +42,16 @@ export default function () {
 # detail
 
 ```typescript
-import { createStore, useStore, Config } from "react-vue-state";
+import { createStore, useStore, useFunc, Config } from "react-vue-state";
 
 /**
  * Override global error handling
  * error: specific error message
  * funcName: The name of the function where the error occurred
  * kind: Errors that occur in computed, methods, watch, setData
  */
-Config.onError = (error: any, funcName: string, kind: string) => {
-  console.log(kind, funcName, error);
+Config.onError = (error: any) => {
+  console.log(kind);
   // do something
 };
 
@@ -140,6 +140,14 @@ export default function () {
     setData,
   } = useStore(store);
 
+  /**
+   * Any function may generate an error at runtime
+   * "useFunc" can not only catch errors but also ensure that the address of the component will not change after ReRender
+   */
+  const task = useFunc(async () => {
+    await asyncFunc();
+  });
+
   return (
     <div>
       <div>asyncFuncRunning:{`${asyncFuncRunning}`}</div>
@@ -163,7 +171,7 @@ export default function () {
 
       <button
         onClick={() => {
-          asyncFunc();
+          task();
         }}
       >
         test

README.zh-cn.md

@@ -42,16 +42,16 @@ export default function () {
 # 详情
 
 ```typescript
-import { createStore, useStore, Config } from "react-vue-state";
+import { createStore, useStore, useFunc, Config } from "react-vue-state";
 
 /**
  * 覆盖全局的错误处理
  * error 具体错误信息
  * funcName 发生错误的函数名称
  * kind 在computed,methods,watch,setData那个中发生的错误
  */
-Config.onError = (error: any, funcName: string, kind: string) => {
-  console.log(kind, funcName, error);
+Config.onError = (error: any) => {
+  console.log(error);
   // do something
 };
 
@@ -140,6 +140,14 @@ export default function () {
     setData,
   } = useStore(store);
 
+  /**
+   * 任何函数在运行时都可能会产生错误
+   * useFunc不仅可以捕获错误还能保证组件在ReRender后地址不会发生改变
+   */
+  const task = useFunc(async () => {
+    await asyncFunc();
+  });
+
   return (
     <div>
       <div>asyncFuncRunning:{`${asyncFuncRunning}`}</div>
@@ -163,7 +171,7 @@ export default function () {
 
       <button
         onClick={() => {
-          asyncFunc();
+          task();
         }}
       >
         test

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-vue-state",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "react state",
   "keywords": [
     "react",

src/computed.ts

@@ -2,6 +2,7 @@ import { Config } from "./config";
 import { Context } from "./context";
 import { Data } from "./data";
 import { State } from "./state";
+import { isAsyncFunction } from "./util";
 
 class ComputedState<V = any> extends State<V> {
   private dirty = true;
@@ -23,9 +24,13 @@ class ComputedState<V = any> extends State<V> {
 
   private catchFunc = () => {
     try {
-      return this.func.call(this.funcThis);
+      const res = this.func.call(this.funcThis);
+      if (isAsyncFunction(res)) {
+        throw new Error('"computed" cannot contain async functions');
+      }
+      return res;
     } catch (error) {
-      Config.onError(error, this.func.name, "computed");
+      Config.onError(error);
       return this.value;
     }
   };

src/config.ts

@@ -1,12 +1,5 @@
 export class Config {
-  static onError = (
-    error: any,
-    funcName: string,
-    kind: "computed" | "methods" | "watch" | "context"
-  ) => {
-    console.error(
-      "[react vue state error]:\n",
-      `${kind} => ${funcName} => ${error}`
-    );
+  static onError = (error: any) => {
+    console.error("[react vue state error]:\n", error);
   };
 }

src/context.ts

@@ -58,7 +58,7 @@ export class Context<
       try {
         return typeof state === "function" ? state(this.funcThis) : state;
       } catch (error) {
-        Config.onError(error, "setData", "context");
+        Config.onError(error);
         return {} as Partial<D["data"]>;
       }
     })();

src/index.ts

@@ -1,3 +1,3 @@
 export { createStore } from "./store";
-export { useStore } from "./use";
+export { useStore, useFunc } from "./use";
 export { Config } from "./config";

src/methods.ts

@@ -1,4 +1,3 @@
-import { Config } from "./config";
 import { Context } from "./context";
 import { State } from "./state";
 import { isAsyncFunction } from "./util";
@@ -48,24 +47,17 @@ export class Methods<M extends { [K: string]: (...args: any[]) => any } = any> {
     func: (...args: any) => any,
     ...args: any[]
   ) => {
-    try {
-      const methodsState = this.state[`${key}Running`] as MethodsState;
-      methodsState.setValue(true);
-      const res = func.call(this.context.funcThis, ...args);
-      if (isAsyncFunction(res)) {
-        return (res as Promise<any>)
-          .catch((error) => {
-            Config.onError(error, func.name, "methods");
-          })
-          .finally(() => {
-            methodsState.setValue(false);
-          });
-      } else {
+    const methodsState = this.state[`${key}Running`] as MethodsState;
+    methodsState.setValue(true);
+    const res = func.call(this.context.funcThis, ...args);
+
+    if (isAsyncFunction(res)) {
+      return (res as Promise<any>).finally(() => {
         methodsState.setValue(false);
-        return res;
-      }
-    } catch (error) {
-      Config.onError(error, func.name, "methods");
+      });
+    } else {
+      methodsState.setValue(false);
+      return res;
     }
   };
 }

src/use.ts

@@ -1,9 +1,11 @@
 import { useMemo, useState, useEffect, useCallback, useRef } from "react";
 import { Computed } from "./computed";
+import { Config } from "./config";
 import { Context } from "./context";
 import { Data } from "./data";
 import { Methods } from "./methods";
 import { Store } from "./store";
+import { isAsyncFunction } from "./util";
 import { Watch } from "./watch";
 
 type ObjFuncToObj<T extends Record<string, () => any>> = {
@@ -107,3 +109,26 @@ export const useStore = <
 
   return proxy;
 };
+
+export const useFunc = <F extends (...args: any) => any>(func: F) => {
+  const funcRef = useRef<F>(func);
+  funcRef.current = useMemo(() => func, [func]);
+
+  const funcWrap = useRef<any>();
+  if (!funcWrap.current) {
+    funcWrap.current = (...args: any[]) => {
+      try {
+        const res = funcRef.current(...args);
+        if (isAsyncFunction(res)) {
+          return (res as Promise<any>).catch(Config.onError);
+        } else {
+          return res;
+        }
+      } catch (error) {
+        Config.onError(error);
+      }
+    };
+  }
+
+  return funcWrap.current as F;
+};

src/watch.ts

@@ -34,11 +34,11 @@ export class Watch<W extends { [k: string]: (...args: any[]) => any } = any> {
       const res = func.call(this.context.funcThis, newValue, ...args);
       if (isAsyncFunction(res)) {
         return (res as Promise<any>).catch((error) => {
-          Config.onError(error, func.name, "watch");
+          Config.onError(error);
         });
       }
     } catch (error) {
-      Config.onError(error, func.name, "watch");
+      Config.onError(error);
     }
   };
 }