The architecture of Ionic 2 is totally different from Ionic. So, you need to follow different methods to capture errors from Ionic 2 apps.

Agent Installation

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

With NPM

Installation

  1. Install atatus-js from the npm registry:

    copy
    icon/buttons/copy
    npm install --save atatus-js
    

    Import and initialize atatus to monitor your application:

    copy
    icon/buttons/copy
    import * as atatus from 'atatus-js';
    atatus.config('YOUR_API_KEY').install();
    

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

  2. Create a custom error handler

    copy
    icon/buttons/copy
    // /src/app/atatus.handler.ts
    import { IonicErrorHandler } from 'ionic-angular';
    import * as atatus from 'atatus-js';
    atatus.config('0df5e8d5b5914dbd974b18ac036f9bb0').install();
    
    // Clean path in the stack trace
    if (atatus) {
      atatus.onBeforeErrorSend(function (payload: any) {
          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);
              }
          }
          return true;
      });
    }
    
    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. Replace IonicErrorHandler with AtatusErrorHandler in the providers section of @NgModule

    copy
    icon/buttons/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 { }
    

Test Integration

To verify that your integration is working, call notify() in your application:

copy
icon/buttons/copy
atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

With YARN

Installation

  1. Install atatus-js from the npm registry:

    copy
    icon/buttons/copy
    yarn add atatus-js
    

    Import and initialize atatus to monitor your application

    copy
    icon/buttons/copy
    import * as atatus from 'atatus-js';
    atatus.config('YOUR_API_KEY').install();
    

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

  2. Create a custom error handler

    copy
    icon/buttons/copy
    // /src/app/atatus.handler.ts
    import { IonicErrorHandler } from 'ionic-angular';
    import * as atatus from 'atatus-js';
    atatus.config('0df5e8d5b5914dbd974b18ac036f9bb0').install();
    
    // Clean path in the stack trace
    if (atatus) {
      atatus.onBeforeErrorSend(function (payload: any) {
          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);
              }
          }
          return true;
      });
    }
    
    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. Replace IonicErrorHandler with AtatusErrorHandler in the providers section of @NgModule

    copy
    icon/buttons/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 { }
    

Test Integration

To verify that your integration is working, call notify() in your application:

atatus.notify(new Error('Test Atatus Setup'));

An error will appear in your project dashboard.

Custom error handler

You need to create separate error handler to notify errors to Atatus.

copy
icon/buttons/copy
// /src/app/atatus.handler.ts
import { IonicErrorHandler } from 'ionic-angular';
declare var atatus: any;

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;

Use AtatusErrorHandler

Replace IonicErrorHandler with AtatusErrorHandler in the providers section of @NgModule

copy
icon/buttons/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 { }