Noibu Vue SDK

Sometimes, errors are hidden from the NoibuJS script by JavaScript frameworks like Vue.js and React. This new Software Development Kit (SDK) works with Vue.js to uncover errors that were previously invisible to Noibu.

If your website uses Vue.js and you do not implement this SDK, a majority of errors on your site will not be captured. React dev tools, or tools like Wappalyzer, can be used to confirm if your site uses Vue.js.

Prerequisites

The NoibuJS script must be deployed to your site's HTML <head> tag.
Your application must be running Vue V.2 or later.

Installation

NPM

npm install noibu-vue

Yarn

yarn install noibu-vue

Usage

Notes

The Noibu SDK throws an error when trying to initialize the SDK without either the vue param or the apps param.
If you have already created an errorhandler in your Vue application make sure to initialize the Noibu SDK after the declaration of the errorHandler function.

Import

import * as Noibu from 'noibu-vue';

Basic Usage

The code below imports the Noibu Vue SDK and sets up the Noibu Error listener. This declares an initial handler that the Noibu SDK can call.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import * as Noibu from 'noibu-vue';
import './assets/main.css';

const app = createApp(App);
app.use(router);
app.mount('#app');

// existing handler
app.config.errorHandler = (_err) => {
console.log('existing error handler');
};

// The Noibu handler gets initialized and will
// call the original handler as well.
Noibu.initNoibuSDK({ apps: [app] });

Exported Functions

initNoibuSDK

/** Option passed when initializing the vue sdk * */
export interface SDKOptions {
 /** Vue constructor to be used inside the integration
  * (as imported by `import Vue from 'vue'` in Vue2)
 */
Vue?: Vue;
 /** Vue app instances to be used inside the integration 
(as generated by `createApp` in Vue3 ) 
*/
apps?: Vue[];
}
/**
* Inits the Noibu Vue SDK
* @param {SDKOptions} sdkOptions
* @returns void
*/
function initNoibuSDK(sdkOptions: SDKOptions): void {
//...
}

attachErrorHandler

/**
* Attaches an error listener to the vue app, calling all previous handlers as well
* @param {Vue} app
*/
function attachErrorHandler(app: Vue): void {
//...
}