Merge pull request #109 from codex-team/for-nuxt

chore(vue): option to disable vue error handler

Author: neSpecc

README.md

@@ -72,6 +72,7 @@ Initialization settings:
 | `context` | object | optional | Any data you want to pass with every message. Has limitation of length. |
 | `vue` | Vue constructor | optional | Pass Vue constructor to set up the [Vue integration](#integrate-to-vue-application) |
 | `disableGlobalErrorsHandling` | boolean | optional | Do not initialize global errors handling |
+| `disableVueErrorHandler` | boolean | optional | Do not initialize Vue errors handling |
 | `beforeSend` | function(event) => event | optional | This Method allows you to filter any data you don't want sending to Hawk |
 
 Other available [initial settings](types/hawk-initial-settings.d.ts) are described at the type definition.

example/index.html

@@ -228,11 +228,11 @@ <h2>Test Vue integration: &lt;test-component&gt;</h2>
 <script>
   window.hawk = new HawkCatcher({
     token: 'eyJpbnRlZ3JhdGlvbklkIjoiNWU5OTE1MzItZTdiYy00ZjA0LTliY2UtYmIzZmE5ZTUwMTg3Iiwic2VjcmV0IjoiMTBlMTA4MjQtZTcyNC00YWFkLTkwMDQtMzExYTU1OWMzZTIxIn0=',
-    collectorEndpoint: 'ws://localhost:3000/ws',
+    // collectorEndpoint: 'ws://localhost:3000/ws',
     vue: window.Vue,
     context: {
       rootContextSample: '12345'
-    }
+    },
   })
 </script>
 </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hawk.so/javascript",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "JavaScript errors tracking for Hawk.so",
   "main": "./dist/hawk.js",
   "types": "./dist/index.d.ts",

src/catcher.ts

@@ -81,6 +81,11 @@ export default class Catcher {
    */
   private readonly stackParser: StackParser = new StackParser();
 
+  /**
+   * Disable Vue.js error handler
+   */
+  private readonly disableVueErrorHandler: boolean = false;
+
   /**
    * Catcher constructor
    *
@@ -99,6 +104,7 @@ export default class Catcher {
     this.user = settings.user || Catcher.getGeneratedUser();
     this.context = settings.context || undefined;
     this.beforeSend = settings.beforeSend;
+    this.disableVueErrorHandler = settings.disableVueErrorHandler ?? false;
 
     if (!this.token) {
       log(
@@ -188,6 +194,8 @@ export default class Catcher {
       this.formatAndSend(error, {
         vue: addons,
       });
+    }, {
+      disableVueErrorHandler: this.disableVueErrorHandler,
     });
   }
 

src/integrations/vue.ts

@@ -1,6 +1,16 @@
 import Sanitizer from './../modules/sanitizer';
 import { VueIntegrationAddons } from '@hawk.so/types';
 
+interface VueIntegrationOptions {
+  /**
+   * Disable Vue.js error handler
+   *
+   * Used by @hawk.so/nuxt since Nuxt has own error hook.
+   * Otherwise, Nuxt will show 500 error
+   */
+  disableVueErrorHandler?: boolean;
+}
+
 /**
  * Errors fired inside Vue components are not dispatched by global handlers.
  * This integration allow us to set up own error handler
@@ -28,13 +38,16 @@ export class VueIntegration {
    *
    * @param vue - Vue app to handle
    * @param callback - callback that accepts new error
+   * @param options - additional options
    */
-  constructor(vue, callback) {
+  constructor(vue, callback, options: VueIntegrationOptions) {
     this.vue = vue;
     this.existedHandler = vue.config.errorHandler;
     this.callback = callback;
 
-    this.setupHandler();
+    if (options.disableVueErrorHandler !== true) {
+      this.setupHandler();
+    }
   }
 
   /**

src/types/hawk-initial-settings.ts

@@ -65,4 +65,11 @@ export interface HawkInitialSettings {
    * This Method allows you to filter any data you don't want sending to Hawk
    */
   beforeSend?(event: HawkJavaScriptEvent): HawkJavaScriptEvent;
+
+  /**
+   * Disable Vue.js error handler
+   *
+   * Used by @hawk.so/nuxt since Nuxt has own error hook.
+   */
+  disableVueErrorHandler?: boolean;
 }

stats.txt

@@ -1,3 +1,3 @@
 
-  Size: 7.44 KB with all dependencies, minified and gzipped
+  Size: 7.5 KB with all dependencies, minified and gzipped