Test and inspect on specific device

Ionic Framework Ionic Angular
1

Hi,

I encounter a problem that I don’t know how to solve. Some users on specific android devices experience a bug where data is not initialized properly but it doesn’t throw any error (sentry). The main menu is correctly displayed but the content remain blank.

So far I have identify 3 devices (thanks to AWS device farm, kobiton and browserstack) :

  • OnePlus 8T Android 11
  • LG V50 ThinQ Android 11
  • Redmi Note 9S Android 11

Other android 11 devices (Pixel, Samsung, etc) works fine.

How can I debug this without having the real device connected to adb and inspect with chrome ?

Any ideas are welcome.

2

Intermittent problems like this are typically one of two things:

A. Inadvertent reliance on a particular version of the underlying browser. Try to collect the browser version information from users of these devices and look for similarities.

B. A race condition in your code. A careful code review should be able to identify these, and even you get some false positives, they’re absolutely worth fixing.

3

Yes it could be a race condition since I use RxJS and multiple Observable to initialize data. But I’m unable to find the problem since I’m not an rxjs expert and it works on every devices I use (browsers, multiple android/ios phones…)

Here’s a code sample, could you have a look ?

score.page.ts :

import {Component, OnInit} from '@angular/core';
import {Router, ActivatedRoute, ParamMap} from '@angular/router';
import {switchMap} from 'rxjs/operators';
import {combineLatest, Observable} from 'rxjs';
import {Book} from 'src/app/classes/book';
import {Reading} from 'src/app/classes/reading';
import {Assessment} from 'src/app/classes/contents/assessment';
import {BookService} from 'src/app/services/book.service';
import {ReadingService} from 'src/app/services/reading.service';

@Component({
    selector: 'app-book-score',
    templateUrl: 'score.page.html',
    styleUrls: ['score.page.scss']
})
export class BookScorePage implements OnInit {

    book$: Observable<Book>;
    book: Book;
    reading$: Observable<Reading>;
    reading: Reading;
    assessments: Assessment[];

    assessmentData: {
        successScore: number,
        attemptedScore: number,
        todoScore: number,
        totalUserScore: number,
        totalScore: number
    };

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        public bookService: BookService, // this load data from a local json using Angular HttpClient
        private readingService: ReadingService // this load data from @ionic/storage
    ) {}

    ngOnInit() {
        this.book$ = this.route.paramMap.pipe(
            switchMap((params: ParamMap) =>
                this.bookService.getBook(params.get('id')))
        );

        this.reading$ = this.route.paramMap.pipe(
            switchMap((params: ParamMap) =>
                this.readingService.getReading(params.get('id')))
        );
    }

    ionViewDidEnter() {
        combineLatest([this.book$, this.reading$]).subscribe(([book, reading]) => {
            // init data once both are ready
            if (book && reading) {
                this.book = book;
                this.assessments = book.assessments;
                this.reading = reading;
                this.setAssessmentsData();
            }
        });
    }

    setAssessmentsData() {
        this.assessmentData = {
            successScore: 0,
            attemptedScore: 0,
            todoScore: 0,
            totalUserScore: 0,
            totalScore: 0
        };

        this.assessments.forEach((assessment) => {
            // init scores
        });
    }
}

score.page.html :

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="" defaultHref="/home"></ion-back-button>
    </ion-buttons>
    <ion-title>Score total</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="wrapper" *ngIf="assessmentData"> <!-- this seems to be the condition that's not triggering -->
    <div class="title-container">
      <div class="title-icon">
        <ion-icon name="star-outline"></ion-icon>
      </div>
      <h5 class="title">
        Score total
      </h5>
    </div>
    <div class="score">
      <div class="score-points">
          {{assessmentData.totalUserScore}} points
      </div>
      <div class="score-chart">
        <score-progress [progress]="assessmentData.totalUserScore / assessmentData.totalScore * 100"
                        [delta]="assessmentData.userScore / assessmentData.totalScore * 100"
                        [threshold]="book.certificateScore / assessmentData.totalScore * 100"
                        [minLabel]="'0'"
                        [maxLabel]="assessmentData.totalScore"></score-progress>
      </div>
    </div>
</ion-content>

Edit : Do you think it could be a angular zone issue ? Definitely no
Edit 2 :

After more tests I was able to print some logs that help

image
image1508×675 112 KB

So it’s unable to open the sqlite db storage, it could be related to this issue : Android 11 support? · Issue #196 · ionic-team/ionic-storage · GitHub