@nsw-edu-obs/obs-faro-wrapper NPM

@nsw-edu-obs/obs-faro-wrapper

Overview

The @nsw-edu-obs/obs-faro-wrapper is an npm package designed to facilitate the integration of the Grafana Faro Web SDK and Grafana Faro Web Tracing into Vue and React applications. This wrapper enables the applications to read configuration settings from a faroconfig.json file located in the root directory of the project, simplifying the initialization and customization of the Faro SDK.

Installation

To install the package, use npm or yarn:

npm install @nsw-edu-obs/obs-faro-wrapper

yarn add @nsw-edu-obs/obs-faro-wrapper

Configuration

Create a faroconfig.json file in the root directory of your project. Below is an example configuration:

{
  "app": {
    "name": "MyApp",
    "version": "1.0.0",
    "environment": "production"
  },
  "url": "https://your-faro-instance-url",
  "GAEnabled": true,
  "GATrackingId": "G-BCG7ECWRJB"
}

Usage

Here's a quickstart guide on how to use the @nsw-edu-obs/obs-faro-wrapper package in your project.

1. Import the required functions and configuration

import {
  initializeFaroWrapper,
  getFaroInstance,
  FaroConfig,
} from "@nsw-edu-obs/obs-faro-wrapper";
import faroconfig from "../faroconfig.json";

2. Define the configuration object

const config: FaroConfig = faroconfig;

3. Initialize the Faro SDK using the wrapper

initializeFaroWrapper(config);

4. Access and customize the Faro instance

const faroInstance = getFaroInstance();
if (faroInstance) {
  // Perform customizations with the faroInstance
  // Example: faroInstance.log({ message: "Custom log message" });
  faroInstance.api.setUser({
    id: "123456789",
    username: "student123",
    attributes: { role: "student" },
  });
  faroInstance.api.pushEvent("page loaded");
}

Example

Below is a full example of how to use the package in a Vue or React application:

import {
  initializeFaroWrapper,
  getFaroInstance,
  FaroConfig,
} from "@nsw-edu-obs/obs-faro-wrapper";
import faroconfig from "../faroconfig.json";

const config: FaroConfig = faroconfig;

// Initialize the Faro SDK using the wrapper
initializeFaroWrapper(config);

// Access the Faro instance for customization
const faroInstance = getFaroInstance();
if (faroInstance) {
  // Perform customizations with the faroInstance
  faroInstance.api.setUser({
    id: "123456789",
    username: "student123",
    attributes: { role: "student" },
  });
  faroInstance.api.pushEvent("page loaded");
}