obsly-sdk-js v1.0.17

[](https://www.npmjs.com/package/obsly-sdk-js)

🚀 Obsly SDK

Overview

Obsly offers an advanced observability platform for iOS, Android and Web Applications. Gain real-time insights, identify issues, and optimize your code for seamless performance.

Table of Contents

• Installation
• Code instrumentation
• Data enrichment
• Metrics
• Help

Installation

To use the SDK in the browser, simply add the following script tag to your HTML index page. \ This integration facilitates the SDK's core functionality of analyzing user behavior and identifying potential errors within your application.

index.html:

 <script>
  window.onload = () => {
      obsly_sdk.init(
      {
        "ObslyKey": "apiKey", 
        "instanceURL":"https://api-url"
      });
    };
  </script>

index.js:

  import * as ObslySDK from 'obsly-sdk-js'

Upon adding this script, the SDK becomes operational and begins its analysis, providing valuable insights into user interactions and system performance.

Additional parameters:

The SDK initialization method accepts various parameters to customize its behavior according to your application's needs. Below is a detailed description of each parameter:

{
  ObslyKey : "apiKey"               // Authorization Api Key
  instanceURL = "https://api-url",  // Api server url
  remoteConfigURL = null,           // Remote config server url
  proEnv = true,                    // Production environment? true / false
  appVersion = "1.0.0",             // Version of the app
  appName = "AppName1",             // Name of the App
  logLevel = 'error',               // SDK console log level: null, error, warn, log.
  enableCrashes = true,             // Send crashes? Default: true
  enableLifeCycleLog = true,        // Life Cycle log ? Default: true
  enableRequestLog = true,          // Request log? Default: true
  enableUI = true,                  // Events UI enabled? Default: true
  enablePerformance = true,         // Events performance enabled? Default: true
  enableTagger = true,              // Events tag enabled? Default: true
  hostBlacklist = [                 // Array of url to blacklist
    "http://localhost:3000/*"       // - Wildcards and partial paths allowed
    "http://blacklistedUrl2/",
    "/media/url3/"
  ],
  hostBodyBlacklist = null,         // Array of urls which body will not be captured
  requestHeadersWhitelist = null,   // Array of urls which request headers will be captured
}

Install react Obsly SDK wrapper:

To effectively integrate the Obsly SDK with your React project, you must first import the obsly-sdk-react.js library. \ Once imported, you gain access to a variety of modules, each tailored to enhance your application's capabilities in tracking and analyzing user behavior, identifying errors, and more.

import { the_desired_module } from '../folder_path/obsly-sdk-react';

Code instrumentation

To instrument react code obsly-sdk-react.js must be imported on the project, checkout how to install it on install react wrapper.

These are the following modules available to use from react:

Manage Sessions:

This set of modules is dedicated to managing user sessions within your application. \ Sessions play a pivotal role in understanding user behavior. A new session can be initiated under various scenarios, such as when the user first loads your web application or upon successful login. Similarly, sessions can be concluded in response to specific user actions like logging out or exiting the application.

• startSession() Starts a new session
• closeCurrentSession() Closes the current session
• createNewSession() Initiates a new Obsly session with a custom name

import { startSession,  closeCurrentSession } from '../obslySDK/obsly-sdk-react';
//Start a Session
startSession()

//Finishes the current Session
closeCurrentSession()

Data enrichment

Client identification:

Client Identification involves associating unique identifiers with user sessions, enabling more precise tracking and personalized analysis.

• setUserID()
• setPersonID()
• setPassportID()
• setContractID()

Ej:

import {
  setUserID,
} from "../obslySDK/obsly-sdk-react";

const [userID, _setUserID] = useState("");

return (
  <Button onClick={() => { setUserID(userID); }}>
)

Application identification:

Obsly SDK provides modules for identifying application-specific information.

• setAppName()
• setAppVersion()

Ej:

import { setAppName } from "../obslySDK/obsly-sdk-react";

const [appName, _setAppName] = useState("");

return (
  <>
    <Button onClick={() => { setAppName(appName); }}>
    </Button>
    <TextField
      value={appName}
      onChange={(e) => _setAppName(e.target.value)}
    />
  </>
)

TAG :

The TAG functionality in the Obsly SDK is designed to enable the creation of custom key-value pairs, known as tags, that can be attached to user sessions or events. \ These tags can be strategically attached to user sessions or specific events within your application. This functionality is particularly advantageous for generating 'breadcrumbs', which serve as navigational aids in comprehensively understanding a user's interaction flow within the application.

• addObslyTag() Creates a key & value tag

Ej:

import { addObslyTag } from "../obslySDK/obsly-sdk-react";

const [key, setKey] = useState("obsly-key"); // State for the key
const [value, setValue] = useState("obsly-value"); // State for the value

const addTag = () => {
    var category = "obsly_test_category";
    addObslyTag([{key: key, value: value}], category);
};

Screenshot :

This feature is especially useful for visual analysis and debugging purposes, offering a snapshot view of the user's current application state.

• addObslyScreenshot() Create a browser screenshot event
• getScreenshot() Returns a Base64 image string of a screenshot of the image

Ej:

import { addObslyScreenshot } from '../obslySDK/obsly-sdk-react';

const takeScreenshot = () => {
  addObslyScreenshot()
};

Metrics

Metrics are a fundamental feature that allows for the precise measurement of performance within your application. \ They are primarily instrumented through performance events, which are designed to record the time elapsed between various stages or steps in a process.

• startTransaction() Start a Performance Event.

  • Params:
    • name : Performance event name
    • description : (Optional) Step description
    • startNanoTime : (Optional) Number higher than 0, set the start moment.
    • autofinishWithStepsCount : (Optional) Number higher than 0, set it if you want to close automatically your performance event after N steps

• resumeTracker() Ends a Performance Event.

  • Params:
    • name : Performance event name
    • updatedDescription : (Optional) Updated description for perfomance event

• startStep() Starts a step for an existent performance event.

  • Params:
    • name : Performance event name
    • transactionName : Step Name
    • description : (Optional) Step description
    • startNanoTime : (Optional) Number higher than 0, set the start moment

• finishStep() Ends an step from an existent Performance event.

  • Params:
    • name : Performance event name
    • transactionName : Step Name
    • updatedDescription : (Optional) An updated description for the step

Ej:

import {
    startTransaction,
    startStep,
    finishStep,
    endTransaction,
} from "../../hooks/useObslySDK";

async function createMetric() {
  await startTransaction(
    "DASHBOARD",
    "Dashboard performance"
  );

  await startStep("DASHBOARD", "Load Dashboard");

  //Load dashboard here
  await finishStep("DASHBOARD", "Load Dashboard");

  //Finally after all the steps
  endTransaction("DASHBOARD");
}

Miscelaneous :

• pauseTracker() Pauses the sending of data to the server.
• resumeTracker() Resumes sending data to the server.
• setLogLevel() Set console log Level for SDK Obsly. Allowed: null, error, warn, log.
• setRequestsBlacklist() Add a Blacklist for requests URL.
  • Params:
    • blacklist=[] Array of string URLs
• getSessionInfo() Get session information.
• addFeedback() Add a new feedback event with a rating, a message and an image.
  • Params:
    • rating : Number
    • message : String
    • image : Image in Base64

Getting Help

At Obsly, we are committed to providing exceptional support and ensuring that your experience with our SDK is as smooth and productive as possible. \ The most effective way to reach out to us with any questions, feedback, or support requests is via email. \ Send us your inquiries at info@obsly.tech

We value your input and are always eager to hear from our users. Your feedback helps us continually improve our SDK and services, ensuring they meet your needs and expectations.