Nativescript: Android: Crash with "markingMode: none" and "ngFor" with binding

[NickIliev]

_From @jpierront on March 4, 2019 13:47_

Environment

• CLI: 5.2.0
• Cross-platform modules: 5.2.2
• Android Runtime: 5.2.1

Describe the bug

• With "markingMode: none", errors "Attempt to use cleared object reference" occur when I change the background color of an element in my app with a css class name. ([class.element-active]="...")
• It doesn't seems to happen when I change the color or the opacity, only the background-color.
• It doesn't seems to happen when I use "[style.background-color]=..."
• My app freeze too often without the "markingMode: none"

I don't know if it's related to NativeScript or NativeScript-Angular

To Reproduce

• I did not succeed in reproducing it on a blank app, but the garbage collector is probably less often triggered with an empty app.

Do you have any tips to help test this kind of case?

Expected behavior
No crash ;-)

Sample project

export class MyComponent {
    public activeElement: Element | null = null;
    public elements: Element[] = [...];
}

.element {
    background-color: white;
}
.element-active {
    background-color: red;
}



md5-7b7139750009965a033bd7910b46a264



<Label
    [text]="element.title"
    (tap)="activeElement = element"
    class="element"
    [class.element-active]="element === activeElement"
    *ngFor="let element of elements"
></Label>



md5-2dfcacbfe5abc2c7d1ae9ea32b180d57



ERROR Error: com.tns.NativeScriptException: Attempt to use cleared object reference id=4370
    com.tns.Runtime.getJavaObjectByID(Runtime.java:1006)
    com.tns.Runtime.callJSMethodNative(Native Method)
    com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)
    com.tns.Runtime.callJSMethodImpl(Runtime.java:1083)
    com.tns.Runtime.callJSMethod(Runtime.java:1070)
    com.tns.Runtime.callJSMethod(Runtime.java:1050)
    com.tns.Runtime.callJSMethod(Runtime.java:1042)
    com.tns.gen.java.lang.Object_vendor_177265_32_TouchListenerImpl.onTouch(Object_vendor_177265_32_TouchListenerImpl.java:18)
    android.view.View.dispatchTouchEvent(View.java:11772)
    android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2968)
    android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2657)
    android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2968)
    android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2657)
    android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.j...

ERROR CONTEXT {
  "view": {
    "def": {
      "nodeFlags": 9125889,
      "rootNodeFlags": 1,
      "nodeMatchedQueries": 0,
      "flags": 0,
      "nodes": [
        {
          "nodeIndex": 0,
          "parent": null,
          "renderParent": null,
          "bindingIndex": 0,
          "outputIndex": 0,
          "checkIndex": 0,
          "flags": 1,
          "childFlags": 9125888,
          "directChildFlags": 9125888,
          "childMatchedQueries": 0,
          "matchedQueries": {},
          "matchedQueryIds": 0,
          "references": {},
          "ngContentIndex": null,
          "childCount": 3,
          "bindings": [
            {
              "flags": 8,
              "ns": "",
              "name": "text",
              "nonMinifiedName": "text",
              "securityContext": 0
            },
            {
              "flags": 2,
              "ns": "",
              "name": "element-active",
              "nonMinifiedName": "element-active"
            }
          ],
          "b...

"element-active" is the added css class name containing a change of background-color.

_Copied from original issue: NativeScript/NativeScript#6983_

[NickIliev]

@jpierront I've used your snippets in this test app (with markingMode set to none) but I was also not being able to reproduce the issue with the blank app.

Please try to isolate the issue in a sample app and if you are still hitting this one, share the source code for further investigation.

[NickIliev]

_From @jpierront on March 4, 2019 16:5_

I succeeded to reproduce it.
MarkingModeNoneBackground.zip

The second part (getContentParts) is only to generate heavy content.
(<any>java).lang.System.gc(); is to try to force GC (I don't know if it's useful or not, the crash occurs even without it)
You can have to tap on links (0-9) a lot of time before crash. (sometimes 3, sometimes 50 ...)

[NickIliev]

@jpierront using your demo I am still not able to reproduce the issue - I am testing on Nexus 5, Nexus 5x, Pixel and Pixel XL. Are you experiencing this one on a specific device, API level?

[NickIliev]

_From @jpierront on March 5, 2019 15:10_

Android Virtual Device
3.2'' QVGA (ADP2) 320x480
Oreo Android 8.1 x86 (API 27)
Emulated Performance: Automatic
512 RAM
32 VM heap
800 Internal Storage

[NickIliev]

_From @jpierront on March 5, 2019 15:30_

I "succeed" on Android 9 too with a similar config (API 28)

It crash too

[NickIliev]

_From @jpierront on March 5, 2019 16:5_

I use tns run android

[NickIliev]

_From @jpierront on March 5, 2019 16:42_

• I succeeded to trigger the error on Android 8.1 and 9. (Demo App + My own App)
• I succeeded to trigger the error on Android 7.1 and 6.0. (But only on my own App for now and it took a while before triggering the error)
• I haven't succeeded yet to trigger the error on Android 4.4 and 5.1.
• I succeeded to trigger the error on Nexus 5 (Emulator, Android 8.1, 1536 Ram, 128 VM heap). (Demo App + My own App) (But I have to click 15 or 20 times on links with changing background)

[NickIliev]

_From @jpierront on March 5, 2019 22:12_

I have a new sample app that triggers the bug faster. (By changing a lot of background color every 100ms)

On Android 8.1, it take only 10 seconds on my computer. (Virtual Device: Nexus 5 or custom device)
On Android 9, it take less than 60 seconds on my computer.
On Android 4.4/5.1/6.0/7.1, no bug after 10 minutes of running (I can reproduce the bug only on my own app)

The delay will probably depend on the speed of your computer.

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'ns-app',
    moduleId: module.id,
    templateUrl: './app.component.html',
    styles: [`
        .mat-list-item {
            background-color: #ffffff;
        }

        .mat-list-item-active {
            background-color: #ffeeee;
        }
    `],
})
export class AppComponent implements OnInit {
    public static readonly MAX = 21;
    public elementsGrid: boolean[][] = [];
    public rows: string = '*,'.repeat(AppComponent.MAX);

    protected indexes = Array.from(Array(AppComponent.MAX).keys());

    public constructor() {
        let elementValue = true;
        for (let i in this.indexes) {
            const elementRow: boolean[] = [];
            for (let j in this.indexes) {
                elementRow.push(elementValue);
                elementValue = !elementValue;
            }
            this.elementsGrid.push(elementRow);
        }
    }

    public ngOnInit(): void {
        setInterval((): void => {
            this.update();
        }, 100);
    }

    protected update(): void {
        for (let i in this.indexes) {
            for (let j in this.indexes) {
                this.elementsGrid[i][j] = !this.elementsGrid[i][j];
            }
        }
    }
}

<StackLayout>
    <GridLayout [rows]="rows" [columns]="rows">
        <ng-container *ngFor="let elementsRow of elementsGrid; index as i">
            <ng-container *ngFor="let element of elementsRow; index as j">
                <Label [row]="i" [col]="j" text=" " class="mat-list-item" [class.mat-list-item-active]="element"></Label>
            </ng-container>
        </ng-container>
    </GridLayout>
</StackLayout>

[NickIliev]

@jpierront thank you for the dedicated time to isolate the case! Ive embedded the above snippet in this test app and can confirm that indeed there is a markingMode error manifestation on most Android devices (used Pixel and Nexus real devices for tests). Our Android developers will investigate the case further and we will post any related information as soon as we have more details to share.

[NickIliev]

@jpierront after some additional investigation I've managed to simplify the app and it seems that the issue is not related to CSS and setting background-color but to the Angular structural directive ngFor.

Here is my [updated application](url) which is hitting the very same issue without using any CSS but simply the ngFor directives. The same scenario is not reproducible if we substitute the ngFor directives with Repeater

Moving the issue (and updating the title) to the NativeScript Angular repository as it seems related to specific case where we are using binding with ngFor and markingMode

[jpierront]

@NickIliev For me, it crash both with *ngFor and with Repeater.

You will find below a simplified version of the app.

import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
    selector: 'ns-app',
    moduleId: module.id,
    templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
    @ViewChild('elementRepeater') public elementRepeater!: any; // Needed for Repeater version

    public elements: number[] = [];
    protected indexes = Array.from(Array(1000).keys());

    public constructor() {
        let elementValue = 0;
        for (let i in this.indexes) {
            this.elements.push(elementValue);
            elementValue = elementValue ? 0 : 1;
        }
    }

    public ngOnInit(): void {
        setInterval((): void => {
            this.update();

            if (this.elementRepeater) { // Needed for Repeater version
                this.elementRepeater.nativeElement.refresh();
            }
        }, 100);
    }

    protected update(): void {
        for (let i in this.indexes) {
            this.elements[i] = this.elements[i] ? 0 : 1;
        }
    }
}

<StackLayout>

    <!--
    <Label text="*ngFor"></Label>
    <ng-container *ngFor="let element of elements">
        <Label [text]="element"></Label>
    </ng-container>
    -->

    <!--
    <Label text="Repeater"></Label>
    <Repeater #elementRepeater [items]="elements"></Repeater>
    -->

</StackLayout>

[jpierront]

Do you have any ideas on this problem? How can I help ?

[valera1401]

I also have the similar issue. I'm trying to apply class for the GridLayout based on property value.

Unhandled Promise rejection: com.tns.NativeScriptException: Attempt to use cleared object reference id=8849
zone-nativescript.js:676
com.tns.Runtime.getJavaObjectByID(Runtime.java:1006)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)
com.tns.Runtime.callJSMethodImpl(Runtime.java:1083)
com.tns.Runtime.callJSMethod(Runtime.java:1070)
com.tns.Runtime.callJSMethod(Runtime.java:1050)
com.tns.Runtime.callJSMethod(Runtime.java:1042)
com.tns.gen.java.lang.Runnable.run(Runnable.java:15)
android.os.Handler.handleCallback(Handler.java:790)
android.os.Handler.dispatchMessage(Handler.java:99)
android.os.Looper.loop(Looper.java:164)
android.app.ActivityThread.main(ActivityThread.java:6494)
java.lang.reflect.Method.invoke(Native Method)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807) ; Zone: ; Task: Promise.then ; Value: Error: com.tns.NativeScriptException: Attempt to use cleared object reference id=8849
com.tns.Runtime.getJavaObjectByID(Runtime.java:1006)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)
com.tns.Runtime.callJSMethodImpl(Runtime.java:1083)
com.tns.Runtime.callJSMethod(Runtime.java:1070)
com.tns.Runtime.callJSMethod(Runtime.java:1050)
com.tns.Runtime.callJSMethod(Runtime.java:1042)
com.tns.gen.java.lang.Runnable.run(Runnable.java:15)
android.os.Handler.handleCallback(Handler.java:790)
android.os.Handler.dispatchMessage(Handler.java:99)
android.os.Looper.loop(Looper.java:164)
android.app.ActivityThread.main(ActivityThread.java:6494)
java.lang.reflect.Method.invoke(Native Method)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807) Error: com.tns.NativeScriptException: Attempt to use cleared object reference id=8849
com.tns.Runtime.getJavaObjectByID(Runtime.java:1006)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)
com.tns.Runtime.callJSMethodImpl(Runtime.java:1083)
com.tns.Runtime.callJSMethod(Runtime.java:1070)
com.tns.Runtime.callJSMethod(Runtime.java:1050)
com.tns.Runtime.callJSMethod(Runtime.java:1042)
com.tns.gen.java.lang.Runnable.run(Runnable.java:15)
android.os.Handler.handleCallback(Handler.java:790)
android.os.Handler.dispatchMessage(Handler.java:99)
android.os.Looper.loop(Looper.java:164)
android.app.ActivityThread.main(ActivityThread.java:6494)
java.lang.reflect.Method.invoke(Native Method)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
at Object.onBackgroundOrBorderPropertyChanged (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuistylingbackground.android.js:67:51)
at GridLayout.View._redrawNativeBackground (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicoreviewview.android.js:671:30)
at GridLayout.View.(anonymous function) (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicoreviewview.android.js:651:15)
at applyPendingNativeSetters (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicorepropertiesproperties.js:939:29)
at Object.initNativeView (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicorepropertiesproperties.js:901:10)
at GridLayout.ViewBase.onResumeNativeUpdates (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicoreview-baseview-base.js:626:23)
at GridLayout.ViewBase._resumeNativeUpdates (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicoreview-baseview-base.js:272:19)
at GridLayout.ViewBase._batchUpdate (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicoreview-baseview-base.js:281:19)
at CssState.updateDynamicState (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuistylingstyle-scope.js:344:20)
at CssState.onChange (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuistylingstyle-scope.js:312:19)
at GridLayout.ViewBase._onCssStateChange (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicoreview-baseview-base.js:643:25)
at valueChanged (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicoreview-baseview-base.js:762:15)
at GridLayout.Property.set [as className] (E:WorkProjectsCouriersMobileAppnode_modulestns-core-modulesuicorepropertiesproperties.js:107:26)
at ViewUtil.syncClasses (E:WorkProjectsCouriersMobileAppnode_modulesnativescript-angularview-util.js:323:25)
at ViewUtil.removeClass (E:WorkProjectsCouriersMobileAppnode_modulesnativescript-angularview-util.js:312:15)

[manoldonev]

@jpierront we are working on this but still haven't pinpointed the root of the problem

[jpierront]

Thx :)

[valera1401]

Thank you.

[valera1401]

Do you have any news about this issue ?

[valera1401]

My issue has gone after updating to NS 5.3.

[jpierront]

Not for me :/

[manoldonev]

@jpierront sorry for the late reply -- we were finally able to locate the root of the problem and https://github.com/NativeScript/android-runtime/pull/1345 should address it.

You can test the fix by first removing the platforms/android folder from your app and installing the "next" version of the android runtime like this:

cd [your app folder]
rm -rf platforms/android
tns platform add android@next
tns run android

[jpierront]

Apparently it works! Awesome!!!
My app was not viable without this fix. (Either I had a lot of freezes with markingMode or a lot of crash without markingMode)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.