feat: add catchError option

also propagate error thrown in renderError() to global handler

Author: yyx990803

src/core/instance/render.js

@@ -101,14 +101,21 @@ export function renderMixin (Vue: Class<Component>) {
     try {
       vnode = render.call(vm._renderProxy, vm.$createElement)
     } catch (e) {
-      handleError(e, vm, `render function`)
+      handleError(e, vm, `render`)
       // return error render result,
       // or previous vnode to prevent render error causing blank component
       /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
-        vnode = vm.$options.renderError
-          ? vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
-          : vm._vnode
+        if (vm.$options.renderError) {
+          try {
+            vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
+          } catch (e) {
+            handleError(e, vm, `renderError`)
+            vnode = vm._vnode
+          }
+        } else {
+          vnode = vm._vnode
+        }
       } else {
         vnode = vm._vnode
       }

src/core/util/error.js

@@ -5,12 +5,28 @@ import { warn } from './debug'
 import { inBrowser } from './env'
 
 export function handleError (err: Error, vm: any, info: string) {
+  if (vm) {
+    let cur = vm
+    while ((cur = cur.$parent)) {
+      if (cur.$options.catchError) {
+        try {
+          const propagate = cur.$options.catchError.call(cur, err, vm, info)
+          if (!propagate) return
+        } catch (e) {
+          globalHandleError(e, cur, 'catchError')
+        }
+      }
+    }
+  }
+  globalHandleError(err, vm, info)
+}
+
+function globalHandleError (err, vm, info) {
   if (config.errorHandler) {
     try {
-      config.errorHandler.call(null, err, vm, info)
-      return
+      return config.errorHandler.call(null, err, vm, info)
     } catch (e) {
-      logError(e, null, 'errorHandler')
+      logError(e, null, 'config.errorHandler')
     }
   }
   logError(err, vm, info)

test/unit/features/error-handling.spec.js

@@ -7,7 +7,7 @@ describe('Error handling', () => {
   // break parent component
   ;[
     ['data', 'data()'],
-    ['render', 'render function'],
+    ['render', 'render'],
     ['beforeCreate', 'beforeCreate hook'],
     ['created', 'created hook'],
     ['beforeMount', 'beforeMount hook'],
@@ -99,7 +99,7 @@ describe('Error handling', () => {
     const args = spy.calls.argsFor(0)
     expect(args[0].toString()).toContain('Error: render') // error
     expect(args[1]).toBe(vm.$refs.child) // vm
-    expect(args[2]).toContain('render function') // description
+    expect(args[2]).toContain('render') // description
 
     assertRootInstanceActive(vm).then(() => {
       Vue.config.errorHandler = null

test/unit/features/options/catchError.spec.js

@@ -0,0 +1,121 @@
+import Vue from 'vue'
+
+describe('Options catchError', () => {
+  let globalSpy
+
+  beforeEach(() => {
+    globalSpy = Vue.config.errorHandler = jasmine.createSpy()
+  })
+
+  afterEach(() => {
+    Vue.config.errorHandler = null
+  })
+
+  it('should capture error from child component', () => {
+    const spy = jasmine.createSpy()
+
+    let child
+    let err
+    const Child = {
+      created () {
+        child = this
+        err = new Error('child')
+        throw err
+      },
+      render () {}
+    }
+
+    new Vue({
+      catchError: spy,
+      render: h => h(Child)
+    }).$mount()
+
+    expect(spy).toHaveBeenCalledWith(err, child, 'created hook')
+    // should not propagate by default
+    expect(globalSpy).not.toHaveBeenCalled()
+  })
+
+  it('should be able to render the error in itself', done => {
+    let child
+    const Child = {
+      created () {
+        child = this
+        throw new Error('error from child')
+      },
+      render () {}
+    }
+
+    const vm = new Vue({
+      data: {
+        error: null
+      },
+      catchError (e, vm, info) {
+        expect(vm).toBe(child)
+        this.error = e.toString() + ' in ' + info
+      },
+      render (h) {
+        if (this.error) {
+          return h('pre', this.error)
+        }
+        return h(Child)
+      }
+    }).$mount()
+
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toContain('error from child')
+      expect(vm.$el.textContent).toContain('in created hook')
+    }).then(done)
+  })
+
+  it('should propagate to global handler when returning true', () => {
+    const spy = jasmine.createSpy()
+
+    let child
+    let err
+    const Child = {
+      created () {
+        child = this
+        err = new Error('child')
+        throw err
+      },
+      render () {}
+    }
+
+    new Vue({
+      catchError (err, vm, info) {
+        spy(err, vm, info)
+        return true
+      },
+      render: h => h(Child, {})
+    }).$mount()
+
+    expect(spy).toHaveBeenCalledWith(err, child, 'created hook')
+    // should propagate
+    expect(globalSpy).toHaveBeenCalledWith(err, child, 'created hook')
+  })
+
+  it('should propagate to global handler if itself throws error', () => {
+    let child
+    let err
+    const Child = {
+      created () {
+        child = this
+        err = new Error('child')
+        throw err
+      },
+      render () {}
+    }
+
+    let err2
+    const vm = new Vue({
+      catchError () {
+        err2 = new Error('foo')
+        throw err2
+      },
+      render: h => h(Child, {})
+    }).$mount()
+
+    expect(globalSpy).toHaveBeenCalledWith(err, child, 'created hook')
+    expect(globalSpy).toHaveBeenCalledWith(err2, vm, 'catchError')
+  })
+})

test/unit/features/options/renderError.spec.js

@@ -25,4 +25,18 @@ describe('Options renderError', () => {
       Vue.config.errorHandler = null
     }).then(done)
   })
+
+  it('should pass on errors in renderError to global handler', () => {
+    const spy = Vue.config.errorHandler = jasmine.createSpy()
+    const err = new Error('renderError')
+    const vm = new Vue({
+      render () {
+        throw new Error('render')
+      },
+      renderError () {
+        throw err
+      }
+    }).$mount()
+    expect(spy).toHaveBeenCalledWith(err, vm, 'renderError')
+  })
 })