ToolStation - Internal Docs
Noibu

Noibu SDK Integration

Noibu Error Tracker SDK Integration Overview

Noibu SDK Integration in Nuxt 3

This guide shows how the Noibu error-tracking SDK is loaded and configured in our application for issue and session monitoring. The vue sdk is initialized in a client-side plugin (/plugins/noibu.client.ts). The SDK captures user sessions automatically and flags whenever an issue is encountered.

1. Script Injection using Nuxt Scripts

We inject the Noibu script using Nuxt’s useScript composable, which safely loads external scripts after hydration.

// plugins/noibu.client.ts
useScript(
  {
    id: "noibu-script",
    src: "https://cdn.noibu.com/collect.js",
    defer: true,
    referrerpolicy: "strict-origin-when-cross-origin",
    fetchpriority: "low",
    tagPriority: "low",
  }
);

Note: The script is loaded with low priority keeping performance in mind.

2. Verify Script Injection

We can verify noibu script is loaded properly and tracking is working through chrome devtools:

3. Cookie Consent Implications

The Noibu tracking is enabled only after the user consents to analytics and tracking in the cookie popup. This ensures compliance with privacy and GDPR regulations.

// plugins/noibu.client.ts
import { noibuTrackingConsent } from "~/utils/errorLoggerUtils";

const noibuScript = useScript(
  {
    id: "noibu-script",
    src: "https://cdn.noibu.com/collect.js",
    defer: true,
    referrerpolicy: "strict-origin-when-cross-origin",
    fetchpriority: "low",
    tagPriority: "low",
  },
  // Extra Attributes
  {
    trigger: noibuTrackingConsent,
    warmupStrategy: false, // disables preloading
  }
);

4. Noibu SDK Initialization

Once the Noibu script has loaded, we initialize the Noibu Vue SDK to attach its error listener to the Vue app.

Refer: https://help.noibu.com/hc/en-us/articles/9565275187341-Noibu-Vue-SDK

Note: Noibu SDK throws an error when trying to initialize the SDK without either the vue param or the apps param.

// plugins/noibu.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Check for existing error handler before attaching Noibu's native handler
  nuxtApp.vueApp.config.errorHandler = (_err) => {};

  const noibuScript = useScript(
    {
      id: "noibu-script",
      src: "https://cdn.noibu.com/collect.js",
      defer: true,
      referrerpolicy: "strict-origin-when-cross-origin",
      fetchpriority: "low",
      tagPriority: "low",
    },
    {
      trigger: noibuTrackingConsent,
      warmupStrategy: false,
    }
  );

  noibuScript.onLoaded(() => {
    console.log("Noibu Tracking Script Successfully Loaded On The Client ☑️");

    try {
      Noibu.initNoibuSDK({ apps: [nuxtApp.vueApp] });
    } catch (error) {
      console.error("Noibu SDK initialization failed:", error);
    }
  });
});

5. Adding Custom Attributes

After initializing Noibua and once the SDK instance is available on the client, we can add custom session attributes via the global window.NOIBUJS object exposed by the Noibu script. For example, to tag sessions by customer ID or campaign, we can call:

// Example of adding custom attributes after Noibu SDK is ready
async function checkSDKExistenceAndAddCustomAttribute(name: string, value: string) {
  if (!window.NOIBUJS) {
    console.log("Waiting for window.NOIBUJS instance...");
    await new Promise((resolve) => {
      window.addEventListener("noibuSDKReady", resolve);
    });
  }
  console.log(
    "Noibu SDK Instance Is Now Available On The Client 🎉",
    window.NOIBUJS
  );
  window.NOIBUJS.addCustomAttribute(name, value);
}

// Usage examples:
checkSDKExistenceAndAddCustomAttribute("customerID", "934739856");
checkSDKExistenceAndAddCustomAttribute("campaignName", "BlackFridayCampaign");

This will allow us to later filter sessions based on these custom attributes. Demo:

Further Reading:

The Noibu team have really good resources on every topic for issue monitoring. Visit https://help.noibu.com or follow relevant articles here:

Order History

Atom Structure

Copyright © 2026