Integrating Ionic with Fabric Crashlytics Beta

This article only refers to using Beta (which is part of Crashlytics) with Ionic, not any other elements of the Fabric suite.

Let me start by saying that in my opinion if you can avoid using Fabric Beta with Ionic then you should; for me it is massively unreliable and wastes more time than it saves. Having said that, when it works, it’s great so if you want to give it a go this is what I’ve picked up so far. Please bear in mind, I am not an expert, just bumbling around with what limited information I can find. I have no doubt there’s a better, more streamlined way to achieve what I was trying to do so please comment if you know what it is!

Before you start make sure you have downloaded and installed the Fabric software for iOS and Android.

Integration is a multi stage process, particularly for Android. First, in your Ionic app you need to install the Ionic Fabric plugin which you do using this:

cordova plugin add cordova-fabric-plugin --variable FABRIC_API_KEY=XXX --variable FABRIC_API_SECRET=xxx

Next you build your app for both platforms in the usual way:

ionic cordova build ios
ionic cordova build android

For iOS, you might need to to open the Fabric app before you use it the first time so you can login. Once that’s done, open you newly created Xcode project and make sure your provisioning profiles are set. Then run your app from Xcode on a physical device. This isn’t a necessity but I’ve had more reliable results when doing this. Once the app has started you can stop it again. Now archive your project. What should happen is you see a small popup that tells you Fabric has detected a new build and asks if you want to ignore or distribute it. If you don’t see the popup, or the fabric window hasn’t opened. Close Xcode, start Fabric manually and then do the process again. Hopefully you’ll see the popup and window but I’ve been through dozens of attempts when it simply doesn’t show or the window shows the wrong information.

Assuming you see the popup click distribute and it should be self explanatory from there. If you need to add new testers who do not have their iOS device UDID included in your provisioning profile you will need to wait till they respond to their invite email whcih will provide you with their UDID. You need to add that UDID to your provisioning profile using the Apple developer portal and then create and distribute a new build by updating the version number in your Ionic config.xml and using Ionic to build the app again. Reopen the project in xcode, run it again then archive it again and you should see the popup again .

If you find Fabric is consistently failing to see the newly added UDIDs in your provisioning profile (it will tell you if that’s the case) then you can delete the profiles from disk from here:

/Users/xxx/Library/MobileDevice/Provisioning Profiles

Close xcode and Fabric, delete all the files, restart xcode and fabric and try sending out the tester invites again. I have safely used this technique but obviously backup your profiles first.

I have found on several occasions the Fabric interface not picking up on my archive or even my project. Restarting xcode, Fabric and the machine eventually gets it working but it can take several frustrating attempts till you see the correct, expected screen.

For Android, something I’ll mention before getting started is the SDK tools folder. I went through so many processes to get Fabric working that I can’t remember why exactly but I needed to downgrade my SDK tools folder so it included the templates folder. If you find you are missing the templates folder from:

/Users/xxx/Library/Android/sdk/tools/

Then you may end up getting a (I think) Gradle error. If that’s the case you should backup your existing tools folder and replace it with “tools_r25.2.3-macosx.zip” which you can download from here:

https://dl.google.com/android/repository/tools_r25.2.3-macosx.zip?hl=id

With that out of the way,  ‘open’ your project in Android Studio. To do this, choose the import option on the Android Studio startup screen and select the Android folder that Ionic created using the build command.

You might be asked to update some components/settings e.g. Gradle which you should NOT do as it can cause ionic build errors if you need to build the project again.

Assuming Fabric has installed correctly you should see a Fabric icon in the toolbar and  the right hand shortcut area. Click the icon and use your details to login.

Hopefully, what you’ll see is a list of Fabric options, the top one of which is Crashlytics. Yes, you already installed the Crashlytics plugin using Ionic but it doesn’t work so click the Crashlytics link and it should show you a segment of code it wants to install. Go ahead and accept the code and you should see a screen telling you to build and run your app so Crashlytics can be tested. Run your app and generate a signed APK and Fabric should update to show you a screen which allows you to drag and drop your newly created APK onto it. Doing so will then take you to the distribution screen where you can add testers. However, this was, without a doubt, the most problematic sequence of events for me. Far, far more often than not, Fabric wouldn’t display the screen that allows me to install Crashlytics or would never accept I had installed Crashlytics and show the drag/drop screen. Only repeated restarts of Studio (and other things which I’ll document as I remember them) would eventually get things moving.

In conclusion, if Fabric was reliable, and I’m guessing it is for most people (presumably those developing native code), it would be great. But it was so unreliable and frustrating  for me that it didn’t feel worth the effort. I’ll probably use it again just because I’m not aware of another cross platform beta distribution mechanism that (sort of) integrates with Ionic.

 

 


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.