feat: add error hook

baidu · Aug 6, 2021 · d2a6fdc · d2a6fdc
1 parent 0a70847
commit d2a6fdc
Show file tree

Hide file tree

Showing 9 changed files with 436 additions and 43 deletions.
diff --git a/src/runtime/eval-expr.js b/src/runtime/eval-expr.js
@@ -9,6 +9,7 @@
 
 var ExprType = require('../parser/expr-type');
 var extend = require('../util/extend');
+var errorHandler = require('../util/handle-error');
 var DEFAULT_FILTERS = require('./default-filters');
 var evalArgs = require('./eval-args');
 
@@ -181,10 +182,15 @@ function evalExpr(expr, data, owner) {
                             break;
 
                         default:
-                            value = owner.filters[filterName] && owner.filters[filterName].apply(
-                                owner,
-                                [value].concat(evalArgs(filter.args, data, owner))
-                            );
+                            try {
+                                value = owner.filters[filterName] && owner.filters[filterName].apply(
+                                    owner,
+                                    [value].concat(evalArgs(filter.args, data, owner))
+                                );
+                            }
+                            catch (e) {
+                                errorHandler(e, owner, filterName + ' filter');
+                            }
                     }
                 }
             }

diff --git a/src/util/handle-error.js b/src/util/handle-error.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Baidu Inc. All rights reserved.
+ *
+ * This source code is licensed under the MIT license.
+ * See LICENSE file in the project root for license information.
+ *
+ * @file 处理组件异常
+ */
+
+var warn = require('../util/warn');
+
+function errorHandler(e, instance, info) {
+    if (!instance) {
+        return;
+    }
+
+    var current = instance;
+    while (current) {
+        var handler = current.error;
+        if (typeof handler === 'function') {
+            handler.call(current, e, instance, info);
+            return;
+        }
+        current = current.parentComponent
+    }
+
+    // #[begin] error
+    warn('Error in ' + instance.tagName + ' ' + info + ': ' + e.toString())
+    // #[end]
+
+    throw e;
+}
+
+exports = module.exports = errorHandler;
diff --git a/src/view/component.js b/src/view/component.js
@@ -46,6 +46,7 @@ var warnEventListenMethod = require('./warn-event-listen-method');
 var elementDisposeChildren = require('./element-dispose-children');
 var createDataTypesChecker = require('../util/create-data-types-checker');
 var warn = require('../util/warn');
+var errorHandler = require('../util/handle-error');
 
 
 
@@ -235,10 +236,15 @@ function Component(options) { // eslint-disable-line
     // #[end]
 
     // init data
-    var initData = extend(
-        typeof this.initData === 'function' && this.initData() || {},
-        options.data || this._srcSbindData
-    );
+    var initDataResult;
+    try {
+        initDataResult = typeof this.initData === 'function' && this.initData() || {};
+    }
+    catch (e) {
+        initDataResult = {};
+        errorHandler(e, this, 'initData');
+    }
+    var initData = extend(initDataResult, options.data || this._srcSbindData);
 
     if (this.binds && this.scope) {
         for (var i = 0, l = this.binds.length; i < l; i++) {
@@ -393,7 +399,12 @@ Component.prototype._toPhase = function (name) {
     if (!this.lifeCycle[name]) {
         this.lifeCycle = LifeCycle[name] || this.lifeCycle;
         if (typeof this[name] === 'function') {
-            this[name]();
+            try {
+                this[name]();
+            }
+            catch (e) {
+                errorHandler(e, this, name + ' hook');
+            }
         }
 
         this._afterLife = this.lifeCycle;
@@ -458,7 +469,12 @@ Component.prototype.fire = function (name, event) {
     // #[end]
 
     each(this.listeners[name], function (listener) {
-        listener.fn.call(me, event);
+        try {
+            listener.fn.call(me, event);
+        }
+        catch (e) {
+            errorHandler(e, me, name + ' event listener')
+        }
     });
 };
 
@@ -475,31 +491,37 @@ Component.prototype._calcComputed = function (computedExpr) {
     }
 
     var me = this;
-    this.data.set(computedExpr, this.computed[computedExpr].call({
-        data: {
-            get: function (expr) {
-                // #[begin] error
-                if (!expr) {
-                    throw new Error('[SAN ERROR] call get method in computed need argument');
-                }
-                // #[end]
+    try {
+        var result = this.computed[computedExpr].call({
+            data: {
+                get: function (expr) {
+                    // #[begin] error
+                    if (!expr) {
+                        throw new Error('[SAN ERROR] call get method in computed need argument');
+                    }
+                    // #[end]
 
-                if (!computedDeps[expr]) {
-                    computedDeps[expr] = 1;
+                    if (!computedDeps[expr]) {
+                        computedDeps[expr] = 1;
 
-                    if (me.computed[expr] && !me.computedDeps[expr]) {
-                        me._calcComputed(expr);
+                        if (me.computed[expr] && !me.computedDeps[expr]) {
+                            me._calcComputed(expr);
+                        }
+
+                        me.watch(expr, function () {
+                            me._calcComputed(computedExpr);
+                        });
                     }
 
-                    me.watch(expr, function () {
-                        me._calcComputed(computedExpr);
-                    });
+                    return me.data.get(expr);
                 }
-
-                return me.data.get(expr);
             }
-        }
-    }));
+        });
+        this.data.set(computedExpr, result);
+    }
+    catch (e) {
+        errorHandler(e, this, computedExpr + ' computed');
+    }
 };
 
 /**
@@ -524,10 +546,15 @@ Component.prototype.dispatch = function (name, value) {
             });
             // #[end]
 
-            handler.call(
-                parentComponent,
-                {target: this, value: value, name: name}
-            );
+            try {
+                handler.call(
+                    parentComponent,
+                    {target: this, value: value, name: name}
+                );
+            }
+            catch (e) {
+                errorHandler(e, parentComponent, (name || '*') + ' message handler');
+            }
             return;
         }
 
@@ -915,7 +942,12 @@ Component.prototype.watch = function (dataName, listener) {
 
     this.data.listen(bind(function (change) {
         if (changeExprCompare(change.expr, dataExpr, this.data)) {
-            listener.call(this, evalExpr(dataExpr, this.data, this), change);
+            try {
+                listener.call(this, evalExpr(dataExpr, this.data, this), change);
+            }
+            catch (e) {
+                errorHandler(e, this, dataName + ' watch handler');
+            }
         }
     }, this));
 };

diff --git a/src/view/element-get-transition.js b/src/view/element-get-transition.js
@@ -9,6 +9,7 @@
 
 var evalArgs = require('../runtime/eval-args');
 var findMethod = require('../runtime/find-method');
+var errorHandler = require('../util/handle-error');
 var NodeType = require('./node-type');
 
 /**
@@ -36,10 +37,15 @@ function elementGetTransition(element) {
         transition = findMethod(owner, directive.value.name);
 
         if (typeof transition === 'function') {
-            transition = transition.apply(
-                owner,
-                evalArgs(directive.value.args, element.scope, owner)
-            );
+            try {
+                transition = transition.apply(
+                    owner,
+                    evalArgs(directive.value.args, element.scope, owner)
+                );
+            }
+            catch (e) {
+                errorHandler(e, owner, 'transition creator')
+            }
         }
     }
 

diff --git a/src/view/element-own-attached.js b/src/view/element-own-attached.js
@@ -15,6 +15,7 @@ var NodeType = require('./node-type');
 var elementGetTransition = require('./element-get-transition');
 var getEventListener = require('./get-event-listener');
 var warnEventListenMethod = require('./warn-event-listen-method');
+const errorHandler = require('../util/handle-error');
 
 /**
  * 双绑输入框CompositionEnd事件监听函数
@@ -216,7 +217,12 @@ function elementOwnAttached() {
 
     var transition = elementGetTransition(this);
     if (transition && transition.enter) {
-        transition.enter(this.el, empty);
+        try {
+            transition.enter(this.el, empty);
+        }
+        catch (e) {
+            errorHandler(e, owner, 'transition enter');
+        }
     }
 }
 

diff --git a/src/view/element-own-detach.js b/src/view/element-own-detach.js
@@ -7,6 +7,7 @@
  * @file 将元素从页面上移除
  */
 
+var errorHandler = require('../util/handle-error');
 var elementGetTransition = require('./element-get-transition');
 
 /**
@@ -30,9 +31,14 @@ function elementOwnDetach() {
             }
 
             var me = this;
-            transition.leave(this.el, function () {
-                me._leave();
-            });
+            try {
+                transition.leave(this.el, function () {
+                    me._leave();
+                });
+            }
+            catch (e) {
+                errorHandler(e, this, 'transition leave');
+            }
 
             return;
         }