@germainapm/germain-webux-sdk v2023.1.0

Germain APM UX Monitoring

Germain APM UX SDK allows to integrate Germain APM Real User Experience monitoring on your website.

Germain APM: 1) Monitors Real User Experience (click, mouse move, scrolling, typing, etc) 2) Records videos of Real User Sessions (videos that look like what you would see if you were sitting behind all monitored users) 3) Lets you Replay these user sessions/videos 4) Provides UX Insights (behavior, frictions, process analysis) 5) Provides Technology Insights (Transaction tracing, code profiling at browser and server level, http request analysis, sql analysis, web service calls, etc)

Installation

with npm

npm i @germainapm/germain-webux-sdk --save

with yarn

yarn add @germainapm/germain-webux-sdk

Initialization

To start using Germain APM UX Monitoring, call the init() with all required options. Initialization and load occur asynchronously and you can check if it is available by calling isInitialized().

Configuration

• servicesUrl - Germain APM services root URL, e.g. "http://localhost:8080"
• initialProfileName - UX monitoring profile configured in Germain APM, e.g. "Salesforce PROD"
• applicationName - Web-application name, e.g. "Salesforce"
• [serverHostname] Optional hard-coded server hostname, e.g. "instance123.sfdc.com"

Examples

React

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as germainApm from '@germainapm/germain-webux-sdk';

germainApm.init('https://localhost:8080', 'UX Profile Name', 'Application Name');

ReactDOM.render(<App />, document.getElementById('root'));

Angular

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import * as germainApm from '@germainapm/germain-webux-sdk';

germainApm.init('https://localhost:8080', 'UX Profile Name', 'Application Name');

platformBrowserDynamic().bootstrapModule(AppModule);

Vue.js

import { createApp } from 'vue'
import App from './App.vue'
import * as germainApm from '@germainapm/germain-webux-sdk';

germainApm.init('https://localhost:8080', 'UX Profile Name', 'Application Name');

const app = createApp(App);
app.config.globalProperties.germainApm = germainApm;
app.mount('#app');

Plain Javascript

import App from './App';
import * as germainApm from '@germainapm/germain-webux-sdk';

germainApm.init('https://localhost:8080', 'UX Profile Name', 'Application Name');

App.start();

SDK Usage

Once Germain APM UX initialized, you can call its API to create custom events, metrics and transactions. For more details check https://docs.germainux.com/main/user-experience-monitoring#UserExperienceMonitoring-Customize how to use germainAPM UX API.

API available:

• api.startTransaction: (name: string, details?: Record<string, any>) => void;
• api.endTransaction: (name: string, details?: Record<string, any>) => void;
• api.createEvent: (name: string, details?: Record<string, any>) => void;
• api.createMetric: (name: string, value: number, details?: Record<string, any>) => void;
• api.createTransaction: (name: string, duration: number, details?: Record<string, any>) => void;

Event example

...
germainApm.api.createEvent('My Custom Event', {details: 'Details content'});
...