Ionic Pro Monitoring

Okay the Angular prod build issue has been fixed I’ve been told. Please upgrade to @ionic/app-scripts 3.1.5 or greater (3.1.5 is the latest at the time of this writing) to see that.

You’ll want to tick the version number in your app, sync sourcemaps again, then cause your error to see the new stack, otherwise we might not process the sourcemaps again.

Does that make sense?

As for dev builds, I was able to successfully test a lazy loaded dev build, so I’m not sure what is going on here. My suggestion: tick the version number, do a build, run ionic syncmaps but don’t do another build, then trigger the exception.

1 Like

Hi

so I ticked the version (from 0.2.0 to 0.2.1 in package.json, config.xml), ran ionic serve, ran git push etc, ran ionic monitoring syncmaps, saw the build being completed but no source map shown in the dashboard.

ionic monitoring syncmaps result:

C:\xxxxx\Developer\xxx>ionic monitoring syncmaps
> git rev-parse HEAD
V Running command - done!

? Do build before syncing? No
Syncing SourceMaps for app version 0.2.1 of io.ionic.xxxxxx (snapshot:
undefined)- App ID 5......b (not disclosed - Tom)
Syncing C:\xxxxxs\Developer\xxxxx\.sourcemaps\main.js.map
Doing this thing
https://api.ionicjs.com
[OK] Uploaded sourcemap
See the Error Monitoring docs for usage information and next steps:
http://ionicframework.com/docs/pro/monitoring/

and ionic info:

cli packages: (C:\Users\xxxxx\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.16.0
    ionic (Ionic CLI) : 3.16.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Node : v6.11.2
    npm  : 3.10.10
    OS   : Windows 7

Environment Variables:

    ANDROID_HOME : C:\xxxx\Developer\Android\Android\sdk

Misc:

    backend : pro

(I know, I am not fully up to speed with everything - but app scripts is > 3.1.5

Probably I am doing something wrong here?

Tom

@Tommertom, monitoring is working as expected ( I think ) when responding with Yes to Do build before syncing?

@max this is still not working for me. I have started again with a brand new App ID and done the source map syncing.

In my app.component.ts I have the following four lines immediately at the beginning of the constructor:

Pro.getApp().monitoring.exception(new Error('error exception'));
Pro.getApp().monitoring.log('This is an error log', { level: 'error' });
Pro.getApp().monitoring.log('This is an info log', { level: 'info' });
Pro.getApp().monitoring.log('This is an info log with object', { level: 'info' }, { myObject: 'hello' });

After the I run the app (I am using Ionic Serve and when prompted for the Production Build by Ionic Pro I typed No) I get the following four entries on the view level of the Dashboard:

This is an info log with object
This is an info log
This is an error log
error Exception

Nowhere on that view does it distinguish between an info log entry and an error log entry (shouldn’t this be a view column?)

When I drill down in the four entries only the error Exception is correctly source mapped. I see this:

Exception Detail
Error: error exception
at new MyApp (app/app.component.ts:130:39)
  private settingsService: SettingsService,
  private actionSheetController: ActionSheetController
) {
  Pro.getApp().monitoring.exception(new Error('error exception'));
  Pro.getApp().monitoring.log('This is an error log', { level: 'error' });
  Pro.getApp().monitoring.log('This is an info log', { level: 'info' });
  Pro.getApp().monitoring.log('This is an info log with object', { level: 'info' }, { myObject: 'hello' });

None of the other three log entries show any source mapping and also the log message that I included data with does not show that data anywhere i.e I see this for that entry:

Message Detail
Original Stacktrace
This is an info log with object
at Monitoring.log (http://localhost:8100/build/vendor.js:68473:23188)
at new MyApp (http://localhost:8100/build/main.js:5791:77)
at createClass (http://localhost:8100/build/vendor.js:12526:20)
at createDirectiveInstance (http://localhost:8100/build/vendor.js:12363:37)
at createViewNodes (http://localhost:8100/build/vendor.js:13801:53)
at createRootView (http://localhost:8100/build/vendor.js:13691:5)
at callWithDebugContext (http://localhost:8100/build/vendor.js:15092:42)
at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/vendor.js:14393:12)
at ComponentFactory_.create (http://localhost:8100/build/vendor.js:11312:46)
at ComponentFactoryBoundToModule.create (http://localhost:8100/build/vendor.js:4272:29)

Should I not be able to see myObject:‘hello’ somewhere here?

Is there anything obvious I am doing wrong?

If you add these four lines to your Monitoring test app does it work for you?

Is there an example app you have published anywhere yet that shows Monitoring best practice etc? (could someone create a branch of the Conference app perhaps showing how you might use Monitoring?)

Here is my Ionic Info:

cli packages: (/Users/richardshergold/IonicProjects/app/myApp/node_modules)

    @ionic/cli-utils  : 1.17.0
    ionic (Ionic CLI) : 3.17.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.5
    Cordova Platforms  : android 6.2.3 ios 4.5.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    Node       : v6.11.4
    npm        : 2.15.12
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

thanks

Richard

Logging stacktraces (those sent with log()) is not fool proof since we’re generating a fake exception. At this point we can’t guarantee those will be mapped up, unfortunately we’re a bit limited by the browser in that case.

I’m glad to hear the exception is being mapped properly.

Exposing extra metadata is a work in progress for the dashboard but we are collecting it. No ETA on rendering that back but should be out this month.

Hi @jaydz

Thx for the suggestion.

So I changed the version in Pro.Init, config.xml, package.json, did the ionic monitoring syncmaps, agreed to rebuild in prod, it shows “uploaded sourcemaps ok”, did a git push of all the code and there is no new sourcemap in the dashboard.

Also tried your other suggestion with the snapshot ID as argument (using the commit ID - just a guess) - no joy

And a manual upload gives a nice red toast message on the bottom, saying that I need to contact support…

Pretty awful.

Going to log a ticket with support probably.

And wonder why the sourcemap can’t be added online as the gitpush gives my source code to Ionic to process.

Regards

Tom

@Tommertom, sorry man. Wish I could’ve been a bit more help. Odd that I’m not running into a lot of the problems others are. I’m not really doing anything overtly different. I guess my luck has taken a turn for the better at a completely useless moment.

1 Like

Not sure if this observation helps anyone, anywhere, but the info that’s not getting posted on your dashboard can be found via Chrome’s Dev Tools under the Network tab while debugging in the browser.

{app_id: "********", framework: "angular2",…}
app_id
:
"*******"
device
:
{version: "0.0.1", proClientVersion: "1.0.16", browserMobileOS: "ios", browserProduct: "Gecko",…}
errors
:
[{type: "log", message: "error3", level: "test",…}]
0
:
{type: "log", message: "error3", level: "test",…}
extra
:
{level: "test3"}
level
:
"test"
message
:
"error3"
stack
:
[{url: "http://localhost:8100/build/vendor.js", func: "Monitoring.log", args: [], line: 156875,…},…]
0
:
{url: "http://localhost:8100/build/vendor.js", func: "Monitoring.log", args: [], line: 156875,…}
1
:
{url: "http://localhost:8100/build/main.js",…}
2
:
{url: "http://localhost:8100/build/main.js",…}
3
:
{url: "http://localhost:8100/build/vendor.js", func: "ViewController._lifecycle", args: [],…}
4
:
{url: "http://localhost:8100/build/vendor.js", func: "ViewController._didLoad", args: [], line: 20027,…}
5
:
{url: "http://localhost:8100/build/vendor.js", func: "NavControllerBase._didLoad", args: [],…}
6
:
{url: "http://localhost:8100/build/polyfills.js", func: "t.invoke", args: [], line: 3, column: 14976,…}
7
:
{url: "http://localhost:8100/build/vendor.js", func: "Object.onInvoke", args: [], line: 4982,…}
8
:
{url: "http://localhost:8100/build/polyfills.js", func: "t.invoke", args: [], line: 3, column: 14916,…}
9
:
{url: "http://localhost:8100/build/polyfills.js", func: "r.run", args: [], line: 3, column: 10143,…}
type
:
"log"
framework
:
"angular2"
pro
:
{ts: *************}
1 Like

Hi

I still did not get it to work properly. And now I am getting the issue

ionic monitoring syncmaps 9420b6

[ERROR] Unable to sync map
        C:\Gebruikers\Developer\projectname\.sourcemaps\main.js.map: Forbidden

(after a succesful gitpush)

Any suggestions before I move to support?

Tom

Haven’t even revisited monitioring since the last time this topic was active. Sorry man.

Eventually I went to support

It seemed that the project id in my config was different from the pro dashboard

Dont how that came about but it is solved now and all working nice and dandy again

Thx

1 Like