# sf-apm-rum

> SnappyFlow utility for real user monitoring

Latest version **1.1.12** (published 2023-07-31) · 0 weekly downloads

## Install

```sh
npm install sf-apm-rum
pnpm add sf-apm-rum
yarn add sf-apm-rum
bun add sf-apm-rum
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.12 |
| Published | 2023-07-31 |
| First published | 2021-07-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 433 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Author | SnappyFlow |
| Maintainers | snappyflow |

## Links

- npm: https://www.npmjs.com/package/sf-apm-rum
- npm.io page: https://npm.io/package/sf-apm-rum

## Dependencies (2)

- [patch-package](https://npm.io/package/patch-package.md) ^7.0.0
- [@elastic/apm-rum](https://npm.io/package/@elastic/apm-rum.md) ^5.12.0

## Recent versions

- 1.1.12 (latest) — 2023-07-31
- 1.1.11 — 2023-07-28
- 1.1.10 — 2023-06-09
- 1.1.9 — 2023-06-09
- 1.1.8 — 2023-06-09
- 1.1.7 — 2023-06-09
- 1.1.6 — 2023-06-09
- 1.1.5 — 2023-06-05
- 1.1.4 — 2023-04-18
- 1.1.3 — 2022-09-07
- 1.1.2 — 2022-07-28
- 1.1.1 — 2022-06-10
- 1.1.0 — 2022-06-10
- 1.0.7 — 2022-06-06
- 1.0.6 — 2022-05-31
- … 6 more at https://npm.io/package/sf-apm-rum/versions

## README

# sftrace-rum
SF Trace Real user monitoring

# Installation

At your project directory, do the following.

- From npm:
  ```shell
  $ npm install --save sf-apm-rum // npm
  ```
  
Then you should import the package as follows.

```shell
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

```javascript
    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

```javascript

    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);
```

---
_Source: https://npm.io/package/sf-apm-rum · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._