Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Investigate Firefox issues with long upload #2058

Open
FSM1 opened this issue Mar 30, 2022 · 8 comments
Open

Investigate Firefox issues with long upload #2058

FSM1 opened this issue Mar 30, 2022 · 8 comments
Labels
Issue: Bug 🐛 Added to issues relating to a critical severity bugs. Status: On Ice 🧊 Added to PRs if they are temporarily not worked on

Comments

@FSM1
Copy link
Contributor

FSM1 commented Mar 30, 2022

Describe the bug
Uploads that take longer than 20 minutes fail when using Firefox

To Reproduce
Steps to reproduce the behavior:

  1. Open the Files app
  2. Start a large upload (would need to take at least 20 minutes
  3. Observe the upload get stuck at the end, with an error message logged to the console

Expected behavior
The upload should succeed

Console error

Screenshots

Desktop (please complete the following information):

  • OS: Any
  • Browser: Firefox
  • Version: Latest

Smartphone (please complete the following information):

  • Device: TBC
  • OS: TBC
  • Browser: Firefox
  • Version: Latest

Additional context
Issues in chrome were fixed through some changes at the API layer
@FSM1 FSM1 added the Issue: Bug 🐛 Added to issues relating to a critical severity bugs. label Mar 30, 2022
@Tbaut
Copy link
Collaborator

Tbaut commented Mar 30, 2022 •
edited
Loading

The test done by copying the curl request from Firefox didn't work. getting a 400 instantly, there's not way to upload something here.

curl 'https://stage-api.chainsafe.io/api/v1/bucket/6c3e9ef9-1320-4b99-951f-0ef9466e2222/upload' -X POST -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0' -H 'Accept: application/json' -H 'Accept-Language: fr,en;q=0.5' -H 'Accept-Encoding: gzip, deflate, br' -H 'Authorization: Bearer <redacted>' -H 'Content-Type: multipart/form-data; boundary=---------------------------22656991801474803939577181046' -H 'Content-Length: 524288510' -H 'Origin: http://localhost:3000' -H 'DNT: 1' -H 'Connection: keep-alive' -H 'Referer: http://localhost:3000/' -H 'Sec-Fetch-Dest: empty' -H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: cross-site' -H 'TE: trailers'
<html>
<head><title>400 Bad Request</title></head>
<body>
<center><h1>400 Bad Request</h1></center>
</body>
</html>

@Tbaut
Copy link
Collaborator

Tbaut commented Mar 30, 2022

Did the test on Storage staging (dev) and it's failing with a cors header 400

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://stage-api.chainsafe.io/api/v1/bucket/416624c6-12ce-4e46-b8db-785d0d54f580/upload. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400.

@Tbaut
Copy link
Collaborator

Tbaut commented Mar 30, 2022

I've now switched to postman with Storage on stage, and an api key, a call with the default headers from Postman lasting 27min succeeded.

image

@Tbaut
Copy link
Collaborator

Tbaut commented Mar 30, 2022

Adding all the headers that Firefox has, the upload succeeded after 29min
image

@Tbaut
Copy link
Collaborator

Tbaut commented Mar 31, 2022

I now switched my test to JS implementation using Axios and XMLHttpRequest with super simple html and vanilia JS pages, see the gist if you want to play with them. Add your storage api token and bucket id. Watch the upload progress in the console.

Axios gist

  • Firefox: ✔️ with a 32min upload
  • Brave: ✔️ with a 20min upload

XMLHttpRequest gist

  • Firefox ✔️ with a 30min upload
  • Brave: ✔️ with a 35min upload

@Tbaut
Copy link
Collaborator

Tbaut commented Mar 31, 2022

I bumped axios to the latest 0.26.1 and tried it on Storage, and it failed :(

@Tbaut Tbaut self-assigned this Apr 1, 2022
@Tbaut
Copy link
Collaborator

Tbaut commented Apr 5, 2022 •
edited
Loading

Just to rule out the access token issue. I tried uploading a file using a React app calling storage directly.
This fails on Firefox with a

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://stage-api.chainsafe.io/api/v1/bucket/416624c6-12ce-4e46-b8db-785d0d54f580/upload. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 502.

using this code https://github.com/ChainSafe/filecoindot/blob/main/ui/src/hooks/useBuckets.tsx#L44-L78

So we narrow down the issue to the following:

  • Happens with storage and files api
  • Also happens with api token
  • Only happens with access/refresh tokens

Edit: After creating a project specifically for this, I was able to upload a file for more than 1h, with react!

@Tbaut
Copy link
Collaborator

Tbaut commented Apr 6, 2022

Update after lowering the expiration time of the access token (Files and Storage) to 2min: upload with FF that last 5min (the same 500Mb file) correctly triggered a refresh token call after a successful upload. The problem does not seem to come from the refresh token expiration.

@FSM1 FSM1 added the Status: On Ice 🧊 Added to PRs if they are temporarily not worked on label May 4, 2022
@Tbaut Tbaut removed their assignment Jun 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Issue: Bug 🐛 Added to issues relating to a critical severity bugs. Status: On Ice 🧊 Added to PRs if they are temporarily not worked on
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@FSM1 @Tbaut