Fix crash when opening sign in modal as anonymous user

[bernhardoj]

Details

The app crashes when we open sign in modal.

Fixed Issues

$ #30228 (comment)
$ #29192
PROPOSAL:

Tests

Same as QA Steps

• Verify that no errors appear in the JS console

Offline tests

Same as QA Steps

QA Steps

1. Sign out if you are signed in
2. Open a public room
3. Press the Sign in button
4. Verify the sign in page opens without the app crashing

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Screen.Recording.2023-10-26.at.00.15.46.mov

Android: mWeb Chrome

Screen.Recording.2023-10-26.at.00.19.41.mov

iOS: Native

Screen.Recording.2023-10-26.at.00.13.46.mov

iOS: mWeb Safari

Screen.Recording.2023-10-26.at.00.14.51.mov

MacOS: Chrome / Safari

Screen.Recording.2023-10-25.at.22.20.56.mov

MacOS: Desktop

Screen.Recording.2023-10-25.at.23.21.32.mov

[melvin-bot]

@fedirjh Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[fedirjh]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Screen.Recording.2023-10-25.at.6.06.15.PM.mov

Mobile Web - Chrome

Screen.Recording.2023-10-25.at.6.14.06.PM.mov

Mobile Web - Safari

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-10-25.at.18.10.25.mp4

Desktop

Screen.Recording.2023-10-25.at.6.22.19.PM.mov

iOS

Screen.Recording.2023-10-25.at.6.44.13.PM.mov

Android

Screen.Recording.2023-10-25.at.6.44.55.PM.mov

[situchan]

This needs to be CP'ed

[fedirjh]

@bernhardoj let's add linked regressions issues to this one

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Cherry-picked to staging by https://github.com/marcaaron in version: 1.3.91-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

Name	Duration
App start runJsBundle	758.818 ms → 831.650 ms (+72.832 ms, +9.6%) 🔴
App start TTI	1124.747 ms → 1182.659 ms (+57.913 ms, +5.1%) 🔴

Show details

Name	Duration
App start runJsBundle	Baseline Mean: 758.818 ms Stdev: 20.025 ms (2.6%) Runs: 720 722 727 727 729 732 735 735 735 737 739 739 742 743 746 750 752 752 752 753 754 755 758 758 758 759 759 759 759 760 761 762 763 763 765 765 766 767 767 767 768 768 768 771 773 775 776 777 784 786 793 796 799 801 808 Current Mean: 831.650 ms Stdev: 42.259 ms (5.1%) Runs: 737 749 756 765 773 777 779 785 787 788 789 795 800 802 804 804 806 812 813 813 814 816 816 817 820 823 825 827 829 831 832 832 832 834 836 836 840 842 843 845 846 847 847 848 851 861 865 866 875 880 882 882 885 890 892 901 912 913 913 919
App start TTI	Baseline Mean: 1124.747 ms Stdev: 33.214 ms (3.0%) Runs: 1050.9073549997993 1056.8746799998917 1075.417042999994 1081.07764399983 1081.2585209999233 1083.1786890001968 1086.655799999833 1088.3485799999908 1090.7383010000922 1093.4615270001814 1093.923072999809 1094.4161399998702 1097.133911000099 1097.915448000189 1099.696448000148 1099.8147470001131 1101.436110000126 1103.3315209997818 1105.4317540000193 1107.5347440000623 1107.7214509998448 1112.3184250001796 1112.802833000198 1113.9023420000449 1116.846539999824 1117.9399830000475 1121.4449100000784 1122.665761999786 1122.9757750001736 1124.462565000169 1125.3723090002313 1126.5229409998283 1126.6259170002304 1127.9655690002255 1128.0449020001106 1129.220929000061 1134.1799739999697 1134.9490589997731 1136.6331679997966 1139.5690759997815 1139.6904589999467 1139.8094779998064 1140.3565910002217 1143.7508530002087 1143.9510630001314 1147.5380730000325 1147.5622510001995 1148.3162770001218 1150.3397780000232 1163.5788030000404 1164.2452360000461 1165.842515999917 1171.9145010001957 1174.3550450000912 1181.2070760000497 1185.734656999819 1186.444716999773 1191.1916310000233 1203.5105499997735 Current Mean: 1182.659 ms Stdev: 50.781 ms (4.3%) Runs: 1079.7414139998145 1090.5906619997695 1109.2568439999595 1117.4905110001564 1117.764016999863 1124.304717999883 1124.8262999998406 1129.1694200001657 1129.5676520001143 1132.5612650001422 1136.301812000107 1139.0405449997634 1139.5042930003256 1139.9571139998734 1140.8802930000238 1141.0239960001782 1144.891030000057 1145.1055389996618 1147.2465160000138 1150.6537509998307 1151.7799539999105 1155.3795400001109 1158.5243199998513 1161.4712519999593 1166.0022089998238 1170.960665000137 1172.2361019998789 1172.449643000029 1177.4757969998755 1178.5804289998487 1180.3308609998785 1183.4338159998879 1184.0652400003746 1185.874331000261 1186.2545560002327 1186.887040999718 1190.6555280000903 1194.2727210000157 1195.8563970001414 1201.1188989998773 1204.6876259995624 1217.5723310001194 1217.9031940000132 1218.969976999797 1221.6991179999895 1226.2017359999008 1229.8417779998854 1232.6275939997286 1234.0312040001154 1244.3504330003634 1246.5835929997265 1248.8425300000235 1252.1219849996269 1259.515185999684 1261.294448000379 1274.021251999773 1278.655589999631 1279.5735189998522 1294.9232130004093

Meaningless Changes To Duration

Show entries

Name	Duration
Open Search Page TTI	706.935 ms → 718.959 ms (+12.024 ms, +1.7%)
App start regularAppStart	0.013 ms → 0.014 ms (+0.001 ms, +4.9%)
App start nativeLaunch	21.218 ms → 20.915 ms (-0.303 ms, -1.4%)

Show details

Name	Duration
Open Search Page TTI	Baseline Mean: 706.935 ms Stdev: 42.409 ms (6.0%) Runs: 625.2205810002051 627.0979419997893 630.5552980001085 650.0506190001033 651.090046999976 652.1955979997292 654.8688159999438 655.388224999886 657.2058919998817 663.979411999695 665.3198250001296 668.5961100002751 669.0362550001591 671.4510909998789 672.2602949999273 674.7536220001057 675.572224999778 676.9267990002409 677.1833499995992 677.4994310000911 677.7697749999352 679.0803640000522 680.280802000314 683.6247970000841 687.7303880001418 692.6733400002122 695.4491789997555 696.350626999978 699.7895909999497 706.9432779997587 710.1096200002357 711.3524579997174 712.9003500002436 713.9476729999296 717.6602380000986 718.5346270003356 721.0417080000043 721.0973709998652 727.4519870001823 728.1743569998071 729.1697590001859 731.0418699998409 738.7035330003127 739.0705160000362 741.0264890003018 743.3490809998475 744.9682219997048 747.0697429999709 747.1546229999512 747.3297529998235 747.6833500000648 749.2284750002436 749.9754640003666 755.6787109998986 765.206828000024 766.0548500004224 770.5974940001033 771.0948079996742 773.1648360001855 776.7553719999269 810.4966640002094 Current Mean: 718.959 ms Stdev: 47.259 ms (6.6%) Runs: 646.4873049994931 652.5573330000043 655.5070810001343 661.1026210002601 661.7933759996668 663.6673590000719 665.2877200003713 665.7827559998259 667.7337239999324 668.4161380007863 671.715657999739 671.7535809995607 676.087686999701 677.5634359996766 678.2860110001639 680.9366870000958 681.8024500003085 684.3740240000188 685.42264899984 685.8070879997686 688.5149329993874 689.5467130001634 692.6469320002943 693.4962980002165 693.8182789999992 699.9862469993532 702.5105800004676 702.6741539994255 704.6232500001788 708.0068769995123 710.769164999947 717.9047849997878 726.1016040006652 726.1826180005446 726.768391999416 731.5888680005446 732.6997889997438 733.5311690000817 734.4015709999949 734.9301359998062 736.4062510002404 737.3093269998208 737.9181729992852 738.5976560004056 742.4613449992612 742.7818200001493 743.0738939996809 748.0290939994156 750.4154460001737 759.9034430002794 760.5489099994302 771.3740640003234 771.6713060000911 781.4296880001202 785.5077309999615 792.4774989997968 802.9303390001878 825.0934250000864 825.1598720001057 825.1623539999127 825.4637860003859
App start regularAppStart	Baseline Mean: 0.013 ms Stdev: 0.001 ms (4.9%) Runs: 0.011880999896675348 0.012451000045984983 0.01249199965968728 0.012532000429928303 0.0125730000436306 0.0125730000436306 0.012574000284075737 0.012614000122994184 0.012655000202357769 0.012655000202357769 0.012696000281721354 0.012736000120639801 0.012777000200003386 0.012777000200003386 0.012817999813705683 0.012817999813705683 0.012980000115931034 0.013019999954849482 0.013020999729633331 0.013061000034213066 0.013061000034213066 0.013062000274658203 0.01310200011357665 0.013143000192940235 0.013143000192940235 0.01322399964556098 0.013224000111222267 0.013224999886006117 0.013264999724924564 0.013265000190585852 0.0133050000295043 0.013346000108867884 0.013346999883651733 0.013386999722570181 0.013509000185877085 0.013549999799579382 0.013590999878942966 0.013631000183522701 0.013631000183522701 0.013671999797224998 0.013672000262886286 0.013753000181168318 0.013833999633789062 0.013916000258177519 0.013956000097095966 0.0139979999512434 0.0139979999512434 0.014077999629080296 0.01407900033518672 0.014119999948889017 0.014282000251114368 0.014444999862462282 0.0148930000141263 0.015381000004708767 Current Mean: 0.014 ms Stdev: 0.001 ms (4.8%) Runs: 0.012532999739050865 0.0125730000436306 0.012695000041276217 0.01285799965262413 0.012858000118285418 0.013021000195294619 0.01310200011357665 0.01314299926161766 0.013387000188231468 0.01346899988129735 0.01346899988129735 0.013549999799579382 0.013549999799579382 0.01355000026524067 0.01358999963849783 0.013631000183522701 0.013671000022441149 0.013671999797224998 0.013712000101804733 0.01371300034224987 0.01375299971550703 0.013753000181168318 0.013753000646829605 0.013793999329209328 0.01387499924749136 0.013916000723838806 0.013997000642120838 0.013997000642120838 0.0139979999512434 0.014038000255823135 0.014078000094741583 0.014079000800848007 0.014120000414550304 0.014159999787807465 0.014160000253468752 0.014160000253468752 0.014201000332832336 0.014241999946534634 0.014322999864816666 0.014363999478518963 0.014403999783098698 0.014403999783098698 0.014444999396800995 0.014527000021189451 0.014566999860107899 0.014566999860107899 0.014607999939471483 0.014649000018835068 0.01476999931037426 0.014769999776035547 0.014812000095844269 0.0148930000141263 0.015014000236988068 0.01534000039100647 0.01570699969306588
App start nativeLaunch	Baseline Mean: 21.218 ms Stdev: 2.570 ms (12.1%) Runs: 18 18 18 18 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 20 20 20 20 20 20 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 22 22 23 23 23 23 23 24 25 26 27 28 28 28 Current Mean: 20.915 ms Stdev: 2.257 ms (10.8%) Runs: 18 18 18 18 18 19 19 19 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 22 22 22 22 23 23 24 24 24 24 24 25 25 25 25 27 27

[github-actions]

@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker.

[marcaaron]

huh I think it has to be a false positive. Barely anything changed here 🤔

[OSBotify]

🚀 Cherry-picked to staging by https://github.com/marcaaron in version: 1.3.91-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

[OSBotify]

🚀 Deployed to production by https://github.com/marcaaron in version: 1.3.91-8 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to staging by https://github.com/marcochavezf in version: 1.3.93-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/Beamanator in version: 1.3.93-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅