Add warnHandler to allow users to set a custom warn callback, similar to errorHandler (#5883)

Author: lbennett-stacki

src/core/config.js

@@ -16,6 +16,7 @@ export type Config = {
   performance: boolean;
   devtools: boolean;
   errorHandler: ?(err: Error, vm: Component, info: string) => void;
+  warnHandler: ?(msg: string, vm: Component, trace: string) => void;
   ignoredElements: Array<string>;
   keyCodes: { [key: string]: number | Array<number> };
 
@@ -62,6 +63,11 @@ export default ({
    */
   errorHandler: null,
 
+  /**
+   * Warn handler for watcher warns
+   */
+  warnHandler: null,
+
   /**
    * Ignore certain custom elements
    */

src/core/util/debug.js

@@ -15,10 +15,12 @@ if (process.env.NODE_ENV !== 'production') {
     .replace(/[-_]/g, '')
 
   warn = (msg, vm) => {
-    if (hasConsole && (!config.silent)) {
-      console.error(`[Vue warn]: ${msg}` + (
-        vm ? generateComponentTrace(vm) : ''
-      ))
+    const trace = vm ? generateComponentTrace(vm) : ''
+
+    if (config.warnHandler) {
+      config.warnHandler.call(null, msg, vm, trace)
+    } else if (hasConsole && (!config.silent)) {
+      console.error(`[Vue warn]: ${msg}${trace}`)
     }
   }
 

test/unit/features/debug.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { formatComponentName } from 'core/util/debug'
+import { formatComponentName, warn } from 'core/util/debug'
 
 describe('Debug utilities', () => {
   it('properly format component names', () => {
@@ -80,4 +80,38 @@ found in
            <Root>`
     ).toHaveBeenWarned()
   })
+
+  describe('warn', () => {
+    const msg = 'message'
+    const vm = new Vue()
+
+    it('calls warnHandler if warnHandler is set', () => {
+      Vue.config.warnHandler = jasmine.createSpy()
+
+      warn(msg, vm)
+
+      expect(Vue.config.warnHandler).toHaveBeenCalledWith(msg, vm, jasmine.any(String))
+
+      Vue.config.warnHandler = null
+    })
+
+    it('calls console.error if silent is false', () => {
+      Vue.config.silent = false
+
+      warn(msg, vm)
+
+      expect(msg).toHaveBeenWarned()
+      expect(console.error).toHaveBeenCalled()
+    })
+
+    it('does not call console.error if silent is true', () => {
+      Vue.config.silent = true
+
+      warn(msg, vm)
+
+      expect(console.error).not.toHaveBeenCalled()
+
+      Vue.config.silent = false
+    })
+  })
 })

types/test/vue-test.ts

@@ -63,6 +63,12 @@ class Test extends Vue {
         vm.testMethods();
       }
     };
+    config.warnHandler = (msg, vm) => {
+      if (vm instanceof Test) {
+        vm.testProperties();
+        vm.testMethods();
+      }
+    };
     config.keyCodes = { esc: 27 };
   }
 

types/vue.d.ts

@@ -75,6 +75,7 @@ export declare class Vue {
     productionTip: boolean;
     performance: boolean;
     errorHandler(err: Error, vm: Vue, info: string): void;
+    warnHandler(msg: string, vm: Vue, trace: string): void;
     ignoredElements: string[];
     keyCodes: { [key: string]: number };
   }