Vue SDK

Noibu's Vue SDK used to allow Noibu to capture Vue errors.

Prerequisites

Noibu Script

The Noibu script needs to have been loaded before the Vue SDK can successfully send errors to Noibu.

Install the Noibu script by adding the below script in the head section of your all html pages:

<script src="https://cdn.noibu.com/collect.js"></script>

Vue Versions Supported

The Noibu Vue SDK supports Vue application that are at least version 2.

Installation

Once the Noibu script has been added to the necessary html pages. You can start using the Vue SDK knowing that Noibu will capture all errors.

NPM

npm install noibu-vue

Yarn

yarn install noibu-vue

Usage

Notes

1. The Noibu SDK throws an error when trying to initialize the SDK without either the Vue param or the apps param.
2. 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 below code imports the Noibu Vue SDK and sets up the Noibu Error listener. We can see that we can declare an initial handler and the Noibu SDK can call that handler as well.

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 {
  //...
}