How can I add Monitoring to an existing Ionic-3 application?

[fiedl]

Hi, I’m following https://ionicframework.com/docs/appflow/monitoring/ in order to add monitoring to an existing ionic-3 app. The guide reads:

In order to use Ionic Monitoring you must set up the Pro Client inside of your app. Follow along with our Pro Client Setup Guide. You should be on at least 1.0.19 of @ionic/pro .

Unfortunately, the Pro Client Setup Guide only explains how to get the ionic CLI, not the Pro Client.

I found @ionic/pro at https://www.npmjs.com/package/@ionic/pro, which has no README. The site links to the github repo https://github.com/ionic-team/ionic-pro-agent, which does not exist.

Thus, I’m stuck not knowing how to include the Pro Client @ionic/pro in my existing ionic-3 app.

As I didn’t include @ionic/pro, I’m getting “Typescript Error Cannot find name ‘Pro’.” if I try to use the monitoring features like Pro.monitoring.log(...) .

Does anyone know whether the Pro Client is compatible to ionic 3 and how to resolve this issue? Thanks!

[fiedl]

I’ve tried to install the Pro Client using:

▶ npm install --save @ionic/pro@1.0.19

Does not work: Pro.monitoring

// start.ts
import { Pro } from '@ionic/pro'

export class StartPage {
  constructor() {
    alert(Pro)
    alert(Pro.monitoring) // => undefined
  }
}

Does not work: Use Pro in constructor

// app.module.ts
import { Pro } from '@ionic/pro'

// ...
@NgModule({
  providers: [
    Pro,
    // ...
  ]
})

// start.ts
import { Pro } from '@ionic/pro'

export class StartPage {
  constructor(public pro: Pro) {
    alert(pro)
    alert(pro.monitoring)
  }
}

Unfortunately, I’m getting “Can’t resolve all parameters for Pro: (?, ?).”.

[fiedl]

I found some documentation on installing the Pro Client in the section Deploy API:

Using the Ionic Pro Client

The Ionic Pro Client gives you access to the Deploy API inside of your app.

You simply need to install the latest version of the Pro Client:

npm install @ionic/pro@latest

Then you can import it in order to use the Deploy API in your code:

import { Pro } from '@ionic/pro';

Also, this documentation site links to an upgrade tutorial:

Tutorials and Videos - Ionic Appflow Documentation

Deploy Upgrade Guide

You’ll need specific versions of each of the following libraries:

• cordova-plugin-ionic-webview >= 2.0.0
• cordoava-plugin-ionic >= 5.0.0
• @ionic/pro >= 2.0.0

The following commands inside the root of you Ionic app should remove the old versions and install the new ones for you:

// remove the old version of the webview plugin
cordova plugin rm cordova-plugin-ionic-webview
// add the the new webview plugin
cordova plugin add cordova-plugin-ionic-webview@latest
// remove the old deploy plugin
cordova plugin rm cordova-plugin-ionic
// install the new deploy plugin
cordova plugin add cordova-plugin-ionic@latest --variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME
// install the new Pro SDK
npm install @ionic/pro@latest

Unfortunately, this does not make Pro.monitoring work.

Furthermore, the monitoring documentation https://ionicframework.com/docs/appflow/monitoring/ does mention the “Monitoring” tab on the ionic dashboard:

navigate to your app on the https://dashboard.ionicframework.com, click the “Monitoring” tab

This tab is missing in my dashboard completely.

I get the feeling, I’m missing something obvious entirely.

Has the monitoring service been discontinued?