Ionic Pro: Error Monitoring

How do you setup and report errors with Ionic Pro Error Monitoring?
I was able to connect ionic pro to my project and create sourcemaps using ionic monitoring syncmaps
So far it seems the only errors being reported are the exceptions, how do I report my own errors (e.g. console.error())?

Hi @besthomeever

Can you please let me know how you were able to cause an error, I have tried everything, I have eventually got it all set up, but dont know how to test it, can you please share any tips thanks, I cannot find much on this topic

Ionic Pro is a hosted and closed source service, so there is not much we, the community, can help you with.
There is a FAQ and common/known issues at https://ionic.zendesk.com/hc/en-us/sections/115003254647-FAQ-Common-Issues
Official documentation is at https://ionic.zendesk.com/hc/en-us and https://ionicframework.com/docs/pro/
You can - and should - contact support at http://ionicframework.com/support#support

Hi @gavinjboyd did you manage to get it working?

Hi Richard,
Yes I managed to get the monitoring working eventually. In the index I had to use the app Id found from web console which was the number letter combo, and put it in as there guide says.
Did you manage to figure out your problem? I could not actually fix the original problem when using my app on ionic view, so I am now using 3rd party software to share my app to testers provided by HockeyApp

@gavinjboyd I can’t get mine to work. I have followed the instructions but when I run my app on a device I see this in the logs

Ionic Error Logging initializing for app undefined

Do you get an APP ID there?

All I have done is add the line required in index.html and added the module stuff in app.module (and linked the app to an APP on the Ionic platform). Is there anything else I need to do ?

So to get mine to work, I added the link in the index, changed the data-app-id to match the number code on my ionic dashboard online(found in a little box next to your app name in the dashboard). The next step is to match the data-app-version version with the version number from your config.xml(will say widget version 0.0.1). Then you need to make sure you included

import { ErrorHandler } from '@angular/core';

declare var window;

 export class MyErrorHandler implements ErrorHandler {
 handleError(err: any): void {
window.Ionic.handleNewError(err);
}
}

in your app.module.ts

Then run this

ionic monitoring syncmaps

and make sure it is able to be completely built successfully. And maybe just do a git push ionic master in case, and hopefully it should work. Occasionaly I get the error you are talking about, but I think that is due to me having different versions running now. I am still able to look at my runtime errors in the dashboard.
Btw, I am able to produce runtime errors and recieve them in my ionic lab on localhost, and one way to test it quickly is by trying to use a cordova plugin from you ionic lab.

Best of luck, let me know how you get on

Thanks, so that first line I get in my console. Do you have an APP ID in there where I see undefined?

I think I have everything set up like you (which is 100% same as in the docs) but I always see undefined on that first line.

Same here. I was just trying it out this afternoon and got stuck at the same place. I’ve got the data-app-id="########", but always in the console ‘Ionic Error Logging initializing for app undefined’.

Hi @Calum - did you get anywhere? I’ve set this up twice from scratch now following all the instructions and I have yet to see the console log the initialisation correctly with my App ID

No, I’ve given up for now. Looking at other options, but having the deploy and logging in one place would be nice.

Hey all, apologies for the challenges here. We’re actively working on making this fully automated so you don’t have to configure that. Probably rolling out week after next.

Note: take a look at the new docs which were just updated: http://ionicframework.com/docs/pro/monitoring/

What to do Today

Until then, a few things to double check:

In your index.html, make sure you have this line:

<script src="https://code.ionicframework.com/services/ionic-pro.min.js" data-app-id="APP_ID" data-app-version="APP_VERSION"></script>

Note the URL, it looks like the docs got merged with an incorrect Script include. I apologize for that and I’m fixing that right now.

The App ID will be the ID from the pro dashboard. The app version is the version used so monitoring can detect changes and regressions. It should follow semver (ex: 2.0.0) and should match what is in config.xml.

Right now errors can’t be triggered manually unless you throw an exception. They are handling runtime errors. We are going to make it easier to send custom errors and log messages soon.

What we’re changing (two weeks or so)

The next release is going to be automated. We will generate and sync sourcemaps after doing a git push. Version tracking will be based on snapshots and channels so we will know when a version is newer than another.

Right now you’re basically doing this manually by setting the version.

Additionally, we are making it easier to manually trigger errors.

Did that work?

Let me know, I’ll be monitoring this issue. Thanks for the understanding about the early release here of monitoring, it’s going to be a major part of Pro and is under active development (and we’re hiring more people for it right now).

Max

1 Like

Hey @max thanks for this - it now works (I had the URL from your incorrect docs!). However, even though my source maps were uploaded I get no information about the error I just generated i.e nothing related to the source.

I just get an error label:

Uncaught (in promise): cordova_not_available

I called the appVersion plugin to generate the error - shouldn’t it be telling me where the error occured?

Actually @max I generated that error by calling the plugin using Ionic serve (which is why the error ocured of course). Is that why I don’t get source line numbers etc - because I’m not running the build on the device?

Unfortunately, sometimes stack information is incomplete and it’s not possible to really give a lot of information on context (limitation of browsers). One thing to watch for: don’t do things like throw 'message', instead you’d want to do throw new Error('message').

The upcoming Pro client (releasing w/ the monitoring updates) will have an API for manually triggering messages and errors as well, watch for that soon.

1 Like

Hey all, an update has been requested about what we’re up to with the next error monitoring release.

As a side note, please keep in mind that Monitoring along with everything in Pro is in very active development and evolving quickly. This is a very different product effort than our past Cloud service, and the team is ramping up quickly (we’re adding several new devs on it in the next month, for example).

With that in mind, Monitoring has a number of important features we will be adding to it int the coming months.

The next release has a few big features in it, including

  • Moving from the pro client JS include to an npm package and a totally new API that will form the basis for our Pro client (not just monitoring).
  • Adding support for custom errors and error messages: monitoring.log(msg, opts) and monitoring.exception(errorObj, opts)
  • Much better stacktrace handling. Fixed a lot of issues with the way stack traces were generated on iOS in particular
  • Support for custom metadata for an error
  • Automated sourcemap uploading and building. No more trying to match up the version with the sourcemap version, we’ll do it for you automatically on the server after you git push

We try to not publish roadmaps, but two things we know we will be adding soon are much better control over notifications and who gets them, and actual symbolicated crash reports (so, not just JS errors). Most mobile error services just track crashes and don’t know or care about web runtime, we’re the opposite right now.

Thanks for this @max - a couple of questions.

Will the Dashboard UI be getting updated - at the moment (unless I am doing something wrong) at the view level I see no detail about whether an issue has been fixed etc?

Also, in our app we have three environments - Development, Staging and Production - how would we use Monitoring in such a way that when an error occurs we could see this flagged up? Is that possible?

And one more (I know I said a couple but there you go!) - when will the next release be available (rough idea?)

thanks

I don’t follow the first question, can you explain more about the UI you’d expect to see? We indicate the status of an error in the sidebar (NEW, FIXED, SNOOZED, etc).

As for environments, we are going to start associating errors with Channels but that won’t be reflected in the UI until the next Sprint most likely (2 weeks out).

This next release is scheduled for Monday assuming all hell doesn’t break loose, but some of the pieces might not be 100% there yet (like the auto sourcemap thing)

1 Like

I don’t see a sidebar - I just see a list of errors. If I click on an error I see the three buttons. But in the list I don’t see anything other than the error.