Search code examples
nativescriptnativescript-angular

How do i profiling navigation lag and out of memory issue on nativescript angular apps?

I build nativescript angular apps for android with dependencies like below

"nativescript-angular": "^7.2.2",
"nativescript-background-http": "^3.4.0",
"nativescript-bitmap-factory": "^1.7.1",
"nativescript-camera": "^4.2.0",
"nativescript-cardview": "^3.1.1",
"nativescript-directions": "^1.3.0",
"nativescript-drawingpad": "^3.0.4",
"nativescript-fancyalert": "^3.0.6",
"nativescript-filterable-listpicker": "^2.2.3",
"nativescript-fresco": "^5.2.0",
"nativescript-geolocation": "^5.0.0",
"nativescript-imagepicker": "^6.1.2",
"nativescript-modal-datetimepicker": "^1.1.12",
"nativescript-ngx-shadow": "^6.4.0",
"nativescript-photoviewer": "^1.5.0",
"nativescript-plugin-firebase": "^8.0.0",
"nativescript-theme-core": "~1.0.4",
"nativescript-ui-autocomplete": "^4.0.0",
"nativescript-ui-chart": "^4.0.0",
"nativescript-ui-listview": "^6.0.0",
"reflect-metadata": "^0.1.13",
"rxjs": "^6.4.0",
"tns-core-modules": "^5.2.2",
"tns-platform-declarations": "^5.2.2",
"typescript": "~3.1.1",
"zone.js": "^0.8.29"

The apps contain 5 tabs and button to take a picture. There are 2 main issues

  1. When user navigate from one tabs to another tabs the apps will randomly show "peekState" errors.
  2. When user take 2 or more pictures with camera, the apps will crash with java.OutOfmemory Exception

Below are some changes thats i already try

  1. Resize image from camera with BmpImageFactory to smaller size
  2. Load the image using Nativescript Fresco
  3. Empty the variable that used to hold imageSource
  4. remove animation from tabs navigation

Please advice how to find the cause of navigation lag and out of memory issue?

Solution

  • You can profile your app with timeline-view to have an HTML view of what takes a lot of time in your app.

    For the image, do you save it on the disk? You could limit the memory to one picture, resizing it before saving it to reduce disk space size used and then have a separate flow to use it when needed.

    What you can do is also profiling RAM usage with Android Studio to see if there is a huge memory leak/abnormal memory usage at some point in your app.