Ionic 2 error reporting tools

December 1, 2016, 6:11 pm Categories:


Error reporting Tools to the rescue

With Ionic 2 Release Candidate 3 the team at Ionic have improved the error reporting tools for developers which means that any time a build error occurs debugging related information is now displayed instead of a blank screen.

Presented in a user-friendly interface the information typically returned includes:

  • The exact nature of the error
  • The file in which the error occurred
  • The line(s) on which the error occurred
  • Environment information

Which, as you can see from the below screen capture, is incredibly helpful for debugging and makes fixing issues so much easier for developers:

Ionic 2 error report

Sometimes however the error reporting tool doesn't, or simply can't, provide such detailed information due to the way in which the application has been configured (or misconfigured - as the case might be), such as where a component hasn't been registered with the application's root module:

Ionic 2 incorrect ngModule set-up

What's interesting though is that even under such circumstances we still receive enough information to guide our debugging options. Given that errors in TypeScript aren't always easy to figure out in the browser presentation layer this is a pretty incredible and massively useful feature, particularly where we can drill down into the exact TypeScript file(s) that we need to amend.

App Build Scripts

The magic for the improved error reporting functionality is driven through the new App Build Scripts.

Located in the @ionic/app-scripts directory these consist of a number of build related npm scripts which implement and manage the different processes for the ionic serve and ionic run commands.

When errors do occur in the build process, a custom ErrorHandling class plugs into the App Build Scripts, to manage those errors by displaying information about them on the screen which means NO more white screen of death.

Can't be bad right?

The following videos, from the team at Ionic, take us through the build feedback tools and hints at plans for the future development of the error reporting functionality:


With each iteration of Ionic 2, and the closer the software gets to official release status, the more impressive the toolsets and features.

Nowhere is this truer than with release candidate 3 and the hugely improved error reporting/build feedback tools which greatly simplifies the process of catching and fixing bugs.

Given the old maxim that 80% of development time is spent fixing 20% of the bugs Ionic 2 RC 3 now helps push the odds in the developer's favour instead.

It's going to be interesting to see how these error reporting tools evolve over coming iterations of the software, particularly when the team at Ionic 2 have done an awesome job of raising the bar so high already.



Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.