@nsw-edu-obs/obs-faro-wrapper
v1.0.5-alpha.1
Published
**Edit a file, create a new file, and clone from Bitbucket in under 2 minutes**
Downloads
236
Readme
@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
or
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");
}
Contributing
Contributions are welcome! Please open an issue or submit a pull request for any changes or improvements.
License
This project is licensed under the MIT License. See the LICENSE file for details.