Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.58k stars 2.92k forks source link

[$500] Loading spinner when adding a invoice bank account #51919

Open m-natarajan opened 3 weeks ago

m-natarajan commented 3 weeks ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!


Version Number: Reproducible in staging?: Needs reproduction Reproducible in production?: Needs reproduction If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @quinthar Slack conversation (hyperlinked to channel name): #quality

Action Performed:

  1. Go to Go to staging.new.expensify.com
  2. Create a Workspace or go to workspace through settings
  3. Enable Invoices > Connect bank account

    Expected Result:

    User able to continue and add a bank account

    Actual Result:

    Continuous loading spinner displayed

    Workaround:

    Unknown

    Platforms:

    Which of our officially supported platforms is this issue occurring on?

    • [ ] Android: Standalone
    • [ ] Android: HybridApp
    • [ ] Android: mWeb Chrome
    • [ ] iOS: Standalone
    • [ ] iOS: HybridApp
    • [ ] iOS: mWeb Safari
    • [x] MacOS: Chrome / Safari
    • [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence https://github.com/user-attachments/assets/44a2f8e5-feae-4bb0-9a48-52dbc0963934 ``` [info] [API] Called API write - {"command":"CompleteGuidedSetup","engagementChoice":"newDotLookingAround","firstName":"David","lastName":"Barrett (EXFY CEO)","actorAccountID":8392101,"guidedSetupData":"[{\"type\":\"message\",\"reportID\":\"61204031\",\"reportActionID\":\"3516336773692675037\",\"reportComment\":\"Let's get you set up 🔧\"},{\"type\":\"message\",\"reportID\":\"61204031\",\"reportActionID\":\"2929353029631138233\",\"reportComment\":\"Expensify is best known for expense and corporate card management, but we do a lot more than that. Let me know what you're interested in and I'll help get you started.\"}]"} Log.ts:76 [info] [API] Preparing request - {"command":"CompleteGuidedSetup","type":"write"} Log.ts:76 [info] [API] Applying optimistic data - {"command":"CompleteGuidedSetup","type":"write"} Log.ts:76 [info] [Onyx] set called for key: networkRequestQueue properties: 0 hasChanged: true - "" Log.ts:76 [info] [Onyx] set called for key: plaidLinkToken hasChanged: false - "" Log.ts:76 [info] [Onyx] set called for key: plaidData properties: bankName,plaidAccessToken,bankAccounts,isLoading,errors hasChanged: false - "" Log.ts:76 [info] [Network] Making API request - {"command":"CompleteGuidedSetup"} {request: {…}, response: undefined} Log.ts:76 [info] [Onyx] merge called for key: report_61204031 properties: lastMentionedTime,hasOutstandingChildTask hasChanged: true - "" Log.ts:76 [info] [Onyx] merge called for key: reportActions_61204031 properties: 3516336773692675037,2929353029631138233 hasChanged: true - "" Log.ts:76 [info] [Onyx] merge called for key: nvp_introSelected properties: choice hasChanged: false - "" Log.ts:76 [info] [Onyx] merge called for key: nvp_onboarding properties: hasCompletedGuidedSetupFlow hasChanged: false - "" Log.ts:76 [info] Not switching user to optimized focus mode. - {"isInFocusMode":true,"hasTriedFocusMode":true} Log.ts:76 [info] [API] Called API.read - {"command":"OpenPlaidBankLogin","redirectURI":"https://staging.new.expensify.com/bank-account","allowDebit":false,"bankAccountID":0} Log.ts:76 [info] [API] Preparing request - {"command":"OpenPlaidBankLogin","type":"read"} Log.ts:76 [info] [API] Applying optimistic data - {"command":"OpenPlaidBankLogin","type":"read"} Log.ts:76 [info] [API] 'OpenPlaidBankLogin' is waiting on 1 write commands - "" Log.ts:76 [info] Navigating to route - {"path":"/settings/wallet/add-bank-account"} Log.ts:76 [info] [Onyx] set called for key: plaidData properties: bankName,plaidAccessToken,bankAccounts,isLoading,errors hasChanged: true - "" Log.ts:76 [info] [Onyx] set called for key: plaidLinkToken hasChanged: false - "" Log.ts:76 [info] [Onyx] merge called for key: modal properties: isVisible hasChanged: true - "" Log.ts:76 [info] [Onyx] merge called for key: lastVisitedPath hasChanged: true - "" Log.ts:76 [info] [Onyx] merge called for key: reimbursementAccountDraft properties: plaidAccountID hasChanged: false - "" Log.ts:76 [info] [SequentialQueue] 'CompleteGuidedSetup' command queued. Queue length is 1 - "" Log.ts:76 [info] [Network] Finished API request in 450ms - {"command":"CompleteGuidedSetup","jsonCode":200,"requestID":"8dbe8fc4aa3b0954-SEA"} {request: {…}, response: {…}} OnyxUpdates.ts:29 [OnyxUpdateManager] Applying https update Log.ts:76 [info] [OnyxUpdateManager] Applying update type: https with lastUpdateID: 2725453769 - {"command":"CompleteGuidedSetup"} Log.ts:76 [info] [Onyx] merge called for key: OnyxUpdatesLastUpdateIDAppliedToClient hasChanged: true - "" OnyxUpdates.ts:64 [OnyxUpdateManager] Done applying HTTPS update Log.ts:76 [info] [RequestThrottle] in clear() - "" Log.ts:76 [info] [SequentialQueue] Unable to process. No requests to process. - "" Log.ts:76 [info] [SequentialQueue] Finished processing queue. - "" Log.ts:76 [info] [Network] Making API request - {"command":"OpenPlaidBankLogin"} {request: {…}, response: undefined} Log.ts:76 [info] [Onyx] merge called for key: report_61204031 properties: participants,chatType,description,lastActorAccountID,lastMessageText,lastVisibleActionCreated,managerID,ownerAccountID,parentReportActionID,parentReportID,policyID,reportID,reportName,state,stateNum,statusNum,type,visibility hasChanged: true - "" Log.ts:76 [info] [Onyx] merge called for key: reportActions_61204031 properties: 3516336773692675037,2929353029631138233 hasChanged: true - "" Log.ts:76 [info] [Onyx] merge called for key: personalDetailsList properties: 8392101 hasChanged: false - "" Log.ts:76 [info] Not switching user to optimized focus mode. - {"isInFocusMode":true,"hasTriedFocusMode":true} Log.ts:76 [info] [SequentialQueue] 'CompleteGuidedSetup' removed from the queue. Queue length is 0 - "" Log.ts:76 [info] [Onyx] merge called for key: snapshot_243428839 properties: data hasChanged: false - "" Log.ts:76 [info] [Network] Finished API request in 742ms - {"command":"OpenPlaidBankLogin","jsonCode":200,"requestID":"8dbe8fc6ab230954-SEA"} {request: {…}, response: {…}} OnyxUpdates.ts:29 [OnyxUpdateManager] Applying https update Log.ts:76 [info] [OnyxUpdateManager] Applying update type: https with lastUpdateID: 0 - {"command":"OpenPlaidBankLogin"} Log.ts:76 [info] [Onyx] set called for key: plaidLinkToken hasChanged: true - "" Log.ts:76 [info] [Onyx] set called for key: isPlaidDisabled hasChanged: false - "" OnyxUpdates.ts:64 [OnyxUpdateManager] Done applying HTTPS update Log.ts:76 [info] Flushing logs as app is going inactive - {} Log.ts:76 [info] Previous log requestID - {"requestID":"8dbe908b8df60954-SEA"} OnyxUpdates.ts:29 [OnyxUpdateManager] Applying https update Log.ts:76 [info] [OnyxUpdateManager] Applying update type: https with lastUpdateID: 0 - {"command":"Log"} OnyxUpdates.ts:64 [OnyxUpdateManager] Done applying HTTPS update Log.ts:76 [info] [Onyx] set called for key: activeClients properties: 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17 hasChanged: false - "" ```

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021854106024301234049
  • Upwork Job ID: 1854106024301234049
  • Last Price Increase: 2024-11-15
  • Automatic offers:
    • ishpaul777 | Reviewer | 105019772
Issue OwnerCurrent Issue Owner: @ishpaul777
MelvinBot commented 3 weeks ago

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

melvin-bot[bot] commented 3 weeks ago

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

melvin-bot[bot] commented 3 weeks ago

Triggered auto assignment to @mjasikowski (AutoAssignerNewDotQuality)

mjasikowski commented 3 weeks ago

Will look into this today

mjasikowski commented 3 weeks ago

Can reproduce on staging & production, but not on dev

mjasikowski commented 3 weeks ago

Works fine consistently on Firefox, I can only reproduce this in Chrome so far.

mjasikowski commented 3 weeks ago

Can be reproduced in Chrome on dev with ENVIRONMENT=production.

mjasikowski commented 3 weeks ago

It seems that despite receiving correct token, Plaid's onLoad() is never called in production build in Chrome.

isabelastisser commented 3 weeks ago

Hey, @MichaelBuhler, should this issue be assigned to an external contributor or one of our engineers?

mjasikowski commented 3 weeks ago

@isabelastisser let's make it external, it's a pure front-end problem.

melvin-bot[bot] commented 3 weeks ago

Job added to Upwork: https://www.upwork.com/jobs/~021854106024301234049

melvin-bot[bot] commented 3 weeks ago

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ishpaul777 (External)

shahinyan11 commented 3 weeks ago

Hi there. @mjasikowski Could you please tell me which file should I make the following changes ENVIRONMENT=production in?. And I want to clarify the behavior. Is it expected to always open Plaid when working properly ?

mjasikowski commented 3 weeks ago

@shahinyan11 here's how I managed to reproduce this with my limited testing:

  1. Edit your.env file by adding ENVIRONMENT=production to the end of the file (or changing the environment in the file to production if it's already there)
  2. Start the app with npm run web
  3. Open the app in the newest version of Chrome (I personally tested on 132.0.6811.3 (Official Build) dev (arm64))
  4. Create a Workspace or go to workspace through settings
  5. Go to "More features" and enable Invoices
  6. Go to "Invoices"
  7. Press "Add bank account"

This should always open Plaid. Currently there's an activity indicator and it just spins indefinitely. I couldn't replicate this in Firefox. As mentioned in the comment above, it seems that a relevant onLoad() function is just never called.

Anastasiia-F commented 3 weeks ago

Looks like mjasikowski was right we need to call the onLoad function

melvin-bot[bot] commented 3 weeks ago

📣 @Anastasiia-F! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

  1. Make sure you've read and understood the contributing guidelines.
  2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
  3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
  4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Screen Shot 2022-11-16 at 4 42 54 PM Format:
    Contributor details
    Your Expensify account email: <REPLACE EMAIL HERE>
    Upwork Profile Link: <REPLACE LINK HERE>
Anastasiia-F commented 3 weeks ago

Contributor details Your Expensify account email: afesenk@gmail.com Upwork Profile Link: Upwork

melvin-bot[bot] commented 3 weeks ago

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

melvin-bot[bot] commented 2 weeks ago

@mjasikowski, @isabelastisser, @ishpaul777 Huh... This is 4 days overdue. Who can take care of this?

ishpaul777 commented 2 weeks ago

No proposals

melvin-bot[bot] commented 2 weeks ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

ishpaul777 commented 2 weeks ago

no proposals to review

mjasikowski commented 1 week ago

Investigated this a bit more, it seems that Chrome is refusing to load the plaid script fetched dynamically from their CDN, but only in production mode:

image

mjasikowski commented 1 week ago

I've tested this on multiple setups:

MacOS 15.1 (Macbook Pro M3 Max)

MacOS 14.5 (Macbook Pro M1 Pro)

MacOS 15.0 (Macbook Air M2)

MacOS 14.2.1 (Mac mini M1)

Windows 11 (Intel laptop)

The root cause of the issue is the react-plaid-link npm package creating a <script> node in DOM, which should load link-initialize.js from Plaid's CDN, but in some cases the network request just stalls, preventing Plaid's iframe to load.

melvin-bot[bot] commented 1 week ago

Upwork job price has been updated to $500

mvtglobally commented 1 week ago

Issue not reproducible during KI retests. (First week)

melvin-bot[bot] commented 1 week ago

@mjasikowski @isabelastisser @ishpaul777 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

ishpaul777 commented 1 week ago

no proposal to review, i'll advertise this on slack

NJ-2020 commented 1 week ago

@ishpaul777 Did you able to reproduce this issue?

ishpaul777 commented 1 week ago

I can reproduce on production but not on staging and dev

https://github.com/user-attachments/assets/d833d47e-bbe1-42de-ba8f-61d749318544

teneeto commented 1 week ago

Hi, I'm Eto from Callstack - expert contributor group - and I would like to take look at this issue.

mjasikowski commented 1 week ago

@teneeto go ahead and let me know if you need any help - I can reproduce this reliably in my local dev environment.

mjasikowski commented 1 week ago

Repro update: this works fine when running Chrome from a different data directory, eg. if you run open -na Google\ Chrome\ Dev --args --user-data-dir=/tmp/temporary-chrome-profile-dir from terminal. Possibly a caching bug in Chrome?

JKobrynski commented 5 days ago

Hi, I'm Julian from Callstack - expert contributor group - and I would like to take look at this issue.

fabioh8010 commented 5 days ago

@mjasikowski

@JKobrynski will take over the issue from @teneeto since he will be OOO for some time.

ishpaul777 commented 5 days ago

not overdue, @mjasikowski Can you please assign @JKobrynski

melvin-bot[bot] commented 5 days ago

📣 @ishpaul777 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

mvtglobally commented 5 days ago

Issue not reproducible during KI retests. (Second week)

melvin-bot[bot] commented 1 day ago

@mjasikowski, @isabelastisser, @JKobrynski, @ishpaul777 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

mjasikowski commented 1 day ago

@JKobrynski any progress here?

JKobrynski commented 1 day ago

@mjasikowski not yet, investigation in progress

ishpaul777 commented 1 day ago

not overdue, update ^

JKobrynski commented 1 day ago

So far I haven't been able to reproduce the issue in dev with ENVIRONMENT=production and I also haven't been able to do it in the production app. I think the reason might be the system that I'm using, currently I'm on MacOS Sonoma 14.6.1, Chrome 131 and it doesn't reproduce for me.

I'm going to update my OS and Chrome and retest.

JKobrynski commented 19 hours ago

I updated my OS and tried reproducing the bug but once again, no success. I'm currently on macOS Sequoia 15.1.1 and I wasn't able to reproduce the bug in the production app, nor have I been able to do it in dev with ENVIRONMENT=production.

Can we somehow verify if this is still happening?

ishpaul777 commented 18 hours ago

I could not reproduce any more checked on staging, production and dev it got redirected to plaid flow successfully

mjasikowski commented 17 hours ago

For some reason I'm still able to consistently reproduce it on my end. @JKobrynski we can jump on a call and do a screenshare if you'd like