Ionic 2+ Integration - Real User Monitoring

Supported Frameworks

Ionic 2
Ionic 3
Ionic 4 and above

1. Agent Installation

If you want to include Atatus script with your source, you can add it through package managers such as YARN and NPM.

Install atatus-spa from the npm or yarn registry:

copy

npm install --save atatus-spa
Or
yarn add atatus-spa

Import and initialize atatus to monitor your application:

copy

import * as atatus from 'atatus-spa';
atatus.config('YOUR_API_KEY').install();

For more advanced options on installing your monitoring code, view customizing agent.

2. Atatus Custom Error Handler

Option 1: Atatus Error Handler for Ionic 4 and above.

copy

// /src/app/atatus.handler.ts
import { ErrorHandler } from '@angular/core';

import * as atatus from 'atatus-spa';
atatus.config('0df5e8d5b5914dbd974b18ac036f9bb0').install();

class AtatusErrorHandler extends ErrorHandler {
  handleError(error:any) : void {
    super.handleError(error);
    if (atatus) {
      // Send the error to Atatus
      atatus.notify(error.originalError || error);
    }
  }
}

export default AtatusErrorHandler;

Option 2: Atatus Error Hanlder for Ionic 2 and 3.

copy

// /src/app/atatus.handler.ts
import { IonicErrorHandler } from 'ionic-angular';

import * as atatus from 'atatus-spa';
atatus.config('0df5e8d5b5914dbd974b18ac036f9bb0').install();

class AtatusErrorHandler extends IonicErrorHandler {
  handleError(error:any) : void {
    super.handleError(error);
    if (atatus) {
      // Send the error to Atatus
      atatus.notify(error.originalError || error);
    }
  }
}

export default AtatusErrorHandler;

3. Include Atatus Error Handler

Replace IonicErrorHandler with AtatusErrorHandler in the providers section of @NgModule

copy

// /src/app/app.module.ts
import { ErrorHandler } from '@angular/core';
import AtatusErrorHandler from './atatus.handler';

@NgModule({
    // ...
    providers: [{provide: ErrorHandler, useClass: AtatusErrorHandler}]
})

export class AppModule { }

4. Optional: Clean path in the custom stack trace

If you want to clean stack frame urls, you can modify as follow us.

copy

// /src/app/atatus.handler.ts
// Clean path in the stack trace
if (atatus) {
  atatus.onBeforeErrorSend(function (payload: any) {
      try {
          var backTraces = payload.backTraces;
          for(var i = 0 ; i < backTraces.length; i++) {
              var backTrace = backTraces[i];
              var filename = backTrace.f;
              var indexOfJsRoot = filename.indexOf("/www/");
              if (indexOfJsRoot !== -1) {
                backTrace.f = filename.substring(indexOfJsRoot);
              }
          }
      } catch (e) {
          console.log(e)
      }
      return true;
  });
}