sftrace-rum

SF Trace Real user monitoring

Installation

At your project directory, do the following.

• From npm:

  $ npm install --save sf-apm-rum // npm

Then you should import the package as follows.

import * as sfApm from 'sf-apm-rum'; // for npm
or 

const sfApm = require('sf-apm-rum');

For Angular: 

Add 'node_modules/sf-apm-rum/dist/sf-apm-rum.js' in angular.json under scripts

eg: 
 scripts: ['node_modules/sf-apm-rum/dist/sf-apm-rum.js']

Nextjs

  Since the library requires Web APIs to work, which are not available when Next.js pre-renders the page on the server-side.
  we have to use dynamic import here,
  useEffect(() => {
    const initFunction = async () => {
        const sfApm = await import('sf-apm-rum')
    }
    initFunction()
}, [])

Extra steps needed to capture error in Angular

    Create a new file -> `apm-error.handler.ts` add following code:
    import { ErrorHandler, Injectable } from "@angular/core";
    declare const sfApm: any;

   @Injectable()
   export class ApmErrorHandler extends ErrorHandler { 
   constructor() { 
     super() 
   } 
  
   handleError(error:any) { 
     sfApm.apm.captureError(error.originalError || error)
     super.handleError(error) 
   } 
 } 

 Then
  in app.module.ts add, 
  import { ErrorHandler, NgModule } from '@angular/core';
  import { ApmErrorHandler } from './apm-error.handler';
  under imports add 
  providers: [
    {provide: ErrorHandler,  useClass: ApmErrorHandler}
  ],

Usage

    declare const sfApm: any; // add it outside class, only for angular applications 

   let apmRum = new sfApm.ApmRum(); // initialize the library
   const data = {
    baseUrl: '<add snappyflow server url>'
    profileKey: '<add-profile-key-here>',
    serviceName: '<your-apm-service-name>',
    projectName: '<add-project-name-here>',
    appName: '<add-application-name-here>',
   };
   apmRum.init(data);