Android: Crash with "markingMode: none" and "ngFor" with binding #7125

NickIliev · 2019-03-06T13:28:16Z

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;
}

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

Additional context

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: #6983

The text was updated successfully, but these errors were encountered:

NickIliev · 2019-03-06T13:28:17Z

@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 · 2019-03-06T13:28:18Z

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 · 2019-03-06T13:28:19Z

@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 · 2019-03-06T13:28:19Z

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 · 2019-03-06T13:28:20Z

From @jpierront on March 5, 2019 15:30

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

It crash too

NickIliev · 2019-03-06T13:28:20Z

From @jpierront on March 5, 2019 16:5

I use tns run android

NickIliev · 2019-03-06T13:28:21Z

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 · 2019-03-06T13:28:22Z

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 · 2019-03-06T13:28:22Z

@jpierront thank you for the dedicated time to isolate the case! I\ve 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 · 2019-03-06T13:28:23Z

@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](https://github.com/NickIliev/NS-Issues-2019-I/tree/master/test/marking-mode-bgcolor) 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 · 2019-03-06T15:04:46Z

@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 · 2019-03-13T08:08:37Z

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

valera1401 · 2019-03-15T16:25:12Z

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

<GridLayout [class.selected]="isSelected"

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:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\styling\background.android.js:67:51)
at GridLayout.View._redrawNativeBackground (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\view\view.android.js:671:30)
at GridLayout.View.(anonymous function) (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\view\view.android.js:651:15)
at applyPendingNativeSetters (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\properties\properties.js:939:29)
at Object.initNativeView (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\properties\properties.js:901:10)
at GridLayout.ViewBase.onResumeNativeUpdates (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\view-base\view-base.js:626:23)
at GridLayout.ViewBase._resumeNativeUpdates (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\view-base\view-base.js:272:19)
at GridLayout.ViewBase._batchUpdate (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\view-base\view-base.js:281:19)
at CssState.updateDynamicState (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\styling\style-scope.js:344:20)
at CssState.onChange (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\styling\style-scope.js:312:19)
at GridLayout.ViewBase._onCssStateChange (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\view-base\view-base.js:643:25)
at valueChanged (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\view-base\view-base.js:762:15)
at GridLayout.Property.set [as className] (E:\Work\Projects\Couriers\MobileApp\node_modules\tns-core-modules\ui\core\properties\properties.js:107:26)
at ViewUtil.syncClasses (E:\Work\Projects\Couriers\MobileApp\node_modules\nativescript-angular\view-util.js:323:25)
at ViewUtil.removeClass (E:\Work\Projects\Couriers\MobileApp\node_modules\nativescript-angular\view-util.js:312:15)

manoldonev · 2019-03-15T17:16:26Z

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

jpierront · 2019-03-15T17:51:51Z

Thx :)

valera1401 · 2019-03-15T18:14:30Z

Thank you.

valera1401 · 2019-04-01T18:42:56Z

Do you have any news about this issue ?

valera1401 · 2019-04-03T10:12:52Z

My issue has gone after updating to NS 5.3.

jpierront · 2019-04-03T14:33:25Z

Not for me :/

manoldonev · 2019-04-08T15:48:38Z

@jpierront sorry for the late reply -- we were finally able to locate the root of the problem and NativeScript/android#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 · 2019-04-08T19:56:29Z

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 · 2020-04-15T08:00:07Z

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.

NickIliev changed the title ~~Android: Crash with "markingMode: none" and "background-color" change (Angular)~~ Android: Crash with "markingMode: none" and "ngFor" with binding Mar 6, 2019

tsonevn assigned manoldonev Mar 13, 2019

manoldonev closed this as completed Apr 9, 2019

manoldonev transferred this issue from NativeScript/nativescript-angular Apr 10, 2019

manoldonev added this to Closed in Issue Tracking 5.4 Apr 10, 2019

n0mer mentioned this issue Sep 23, 2019

[Angular] Repeater widget documentation missing #6308

Closed

jpierront mentioned this issue Sep 25, 2019

Android: Crash with "markingMode: none" + navigation + backgroundColor change (NS 5.4 / 6.0) #7867

Open

lock bot locked and limited conversation to collaborators Apr 15, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Android: Crash with "markingMode: none" and "ngFor" with binding #7125

Android: Crash with "markingMode: none" and "ngFor" with binding #7125

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

jpierront commented Mar 6, 2019 •

edited

jpierront commented Mar 13, 2019

valera1401 commented Mar 15, 2019 •

edited

manoldonev commented Mar 15, 2019

jpierront commented Mar 15, 2019

valera1401 commented Mar 15, 2019

valera1401 commented Apr 1, 2019

valera1401 commented Apr 3, 2019

jpierront commented Apr 3, 2019

manoldonev commented Apr 8, 2019

jpierront commented Apr 8, 2019

lock bot commented Apr 15, 2020

Android: Crash with "markingMode: none" and "ngFor" with binding #7125

Android: Crash with "markingMode: none" and "ngFor" with binding #7125

Comments

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

NickIliev commented Mar 6, 2019

jpierront commented Mar 6, 2019 • edited

jpierront commented Mar 13, 2019

valera1401 commented Mar 15, 2019 • edited

manoldonev commented Mar 15, 2019

jpierront commented Mar 15, 2019

valera1401 commented Mar 15, 2019

valera1401 commented Apr 1, 2019

valera1401 commented Apr 3, 2019

jpierront commented Apr 3, 2019

manoldonev commented Apr 8, 2019

jpierront commented Apr 8, 2019

lock bot commented Apr 15, 2020

jpierront commented Mar 6, 2019 •

edited

valera1401 commented Mar 15, 2019 •

edited