Crash(iOS): TypeError: undefined is not an object (evaluating 'measureSpec.setColumn')

[m-abs]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 5.3.1
• Cross-platform modules: 5.3.2
• Android Runtime: Not applicable
• iOS Runtime: 5.3.1
• Plugin(s): nativescript-angular@7.2.3

Describe the bug

In the past month we've tracked 20+ crashes with this error:

TypeError: undefined is not an object (evaluating 'measureSpec.setColumn')

To Reproduce

For now we only have the crash logs from Google Analytics.

Expected behavior

The app to not crash.

Additional context

I think problem is caused in this function:
https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts#L73-L97

And I'm guessing the child layout doesn't have a measureSpec in the GridLayout.map here:
https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts#L138

I suggest adding a check for undefined in updateMeasureSpecs and adding the missing measureSpec to the map..

[m-abs]

Hi @NickIliev
I see you've requested more info.

Unfortunately I haven't been able to write a test project that reproduce the problem.

I can reproduce it in our private app, but I can't share the code.

I've create a small PR that fixes the problem locally, but I'd really wish I had a proper way to reproduce it.

[m-abs]

I've identified the components in our project that causes the problem.

The View tree is like this

Frame(2)
  Page(8)
     ProxyViewComponent -> library tabs component
        GridLayout(13) rows="*, auto, auto"
          ProxyViewComponent -> bookshelf component
             ProxyViewComponent -> lyt-failed-retry.component
                Stacklayout(44) < This is the child that is missing the MeasureSpecs in the GridLayout(13)
                   Stacklayout with *ngIf="false"
                       2x Label

Here is the template for lyt-failed-retry.component:

<StackLayout>
  <StackLayout *ngIf="failed" class="p-5">
    <Label [text]="failedText" textWrap="true" class="t-14 text-center text-danger"></Label>
    <Button [text]="retryBtnText" class="btn btn-rounded-sm btn-outline" [accessibilityLabel]="retryBtnText" (tap)="onRetry()" touchable></Button>
  </StackLayout>
</StackLayout>

Here is how it is used in our bookshelf.component:

<lyt-failed-retry [failed]="isBookshelfFailed$ | async" (retry)="onRefreshFailed()"></lyt-failed-retry>

If switch from <lyt-failed-retry... to <StackLayout lyt-failed-retry... and remove the top StackLayout from lyt-failed-retry.component the problem goes away.

[m-abs]

Hi @NickIliev,

I've finally managed to reproduce the problem see: https://github.com/m-abs/tns-measurespace-undef

We have a outer GridLayout in our base component and first grid item is another tns-angular component sub1 enabled via *ngIf:
https://github.com/m-abs/tns-measurespace-undef/blob/master/src/app/home/home.component.html#L6

The sub1-component includes another tns-angular component sub2.

The sub2-component have an outer StackLayout, it doesn't matter this layout have any children or not.