Project photos don't save on edit
S4mmyb opened this issue · comments
Describe the bug
I was able to successfully add photos to a project (KSH01-001) on mainnet using the project edit form via the UI. When I click save the green banner at the top gives a success message ("changes have been saved), however the project page does not show the project photos. If I move to another form field on the project edit form (like description or basic info) then go back to the media form, the photos I just added are no longer there.
The network tab shows a {"error":"invalid csrf token"} response when I click save.
To Reproduce
Expected behavior
Screenshots
Desktop (please complete the following information):
- OS:
- Browser:
- Version:
Smartphone (please complete the following information):
- Device:
- OS:
- Browser:
- Version:
Additional context
For Admin Use
- Not duplicate issue
- Appropriate labels and zenhub epics applied
- Appropriate contributors tagged
Do you mean gallery photos in particular? It seems like there’s none associated to KSH01-001 indeed, but looking at the S3 bucket, a bunch of photos got successfully uploaded for this project. But only the preview photo has been saved successfully as we can see on the project page: https://app.regen.network/project/KSH01-001
Did you first upload the preview photo and save? Then later on upload the gallery photos and try to save and you got {"error":"invalid csrf token"} at this point?
Yep, gallery photos in particular. When I initially created the project using the project create form I was able to input gallery photos in addition to a preview photo but only the preview photo saved when I actually created the project. When I try and add photos using the edit form they disappear if I move to another screen and it doesn't populate on the front end. Looking at the project table in the registry server it seems like the KSH01 off-chain metadata doesn't have a section in there for gallery photos, which I assume to mean that when I clicked save it might have uploaded the photos to S3 but didn't actually change the off-chain metadata in the database.
Hey team! Please add your planning poker estimate with Zenhub @blushi @flagrede @wgwz
I had a look at this but it will be hard to debug without being able to reproduce it in dev.
For reference here's a previous PR where we fixed issues related to an invalid CSRF token: #1876
@S4mmyb By chance did you reproduce that in https://dev.app.regen.network/ env as well?
@flagrede I just tried and actually I'm running into an entire different issue on dev. When I upload and try to save a photo, I get an AxiosError: Request failed with status code 401 (see image below). Are you running into this issue on dev? This is different from what I was running into on production and I actually can't replicate the issue yet because I ran into something prior.
In terms of what was happening in this original issue, I think the problem was that the the JSON-LD for the project-page material was not updating in the project table to include the gallery photos being uploaded to S3. As far as I understand, and correct me if I'm wrong, the content in the project pages are populated via the JSON-LD in the postgres database, so if the JSON-LD doesn't have the content it won't render. Looking at the entry for the project page in our postgres database, the unanchored JSON-LD didn't actually list the gallery photos (see example here) like it should have.
@S4mmyb This is weird, I also have this locally but not all on all projects but I didn't yesterday. Will check with the rest of the team if there might be some regressions on that.
Regarding the original problem, that's correct the photos you uploaded should be in the JSON-LD. It means that the call updating the metadata failed for some reason.
I'll get back to you once the dev env is fixed so we can check if you can reproduce the initial error there.
@flagrede I just tried and actually I'm running into an entire different issue on dev. When I upload and try to save a photo, I get an AxiosError: Request failed with status code 401 (see image below). Are you running into this issue on dev? This is different from what I was running into on production and I actually can't replicate the issue yet because I ran into something prior.
On which project were you testing this @S4mmyb?
@flagrede I just tried and actually I'm running into an entire different issue on dev. When I upload and try to save a photo, I get an AxiosError: Request failed with status code 401 (see image below). Are you running into this issue on dev? This is different from what I was running into on production and I actually can't replicate the issue yet because I ran into something prior.
On which project were you testing this @S4mmyb?
Nevermind, I've found what causes the 401 unauthorized issue and this will get fixed as part of regen-network/rnd-dev-team#1791
@S4mmyb are you able to reproduce this now on dev or prod?
I could reproduce the invalid csrf token error while trying to create a project.
I've checked the request and it does have the X-Csrf-Token header in it. Also the queries before that use the same value for the X-Csrf-Token header succeeded. The difference between those queries seem to be in the __SECURE-regen-staging.x-csrf-token cookie value.
Failing query:
Some successful query using the same token:
Then I've realized that __SECURE-regen-staging.x-csrf-token is a session cookie meaning it has no Expired / Max-Age value specified, and the value changes as soon as you have another tab open with the app requesting a new csrf token, which results in the cookie being stored to not match with the X-Csrf-Token provided in the header of the initial request...
Understanding that, this becomes quite easy to reproduce, go to https://dev.app.regen.network/profile/projects (logged in), then open up https://dev.app.regen.network/ in another tab, then go back to the initial tab and try to create a project, this will fail with the invalid csrf token.
So I guess one solution for that would be to not cache the getCsrfTokenQuery but that means we would need to make this additional query every time we try to hit a protected endpoint, which could affect performance... Any other ideas?
cc/ @flagrede @wgwz
@blushi Thanks for the investigation. I think not caching the CSRF token could also bring back some old issues we had (#1877).
How about we handle the refetch of the CSRF token + cookie in case of an error in a request that is done on all pages (for example getPartiesByAccountIdQuery in the header layout). Once the token is prefetched it should automatically retriggers requests that have failed previously.
@blushi We might want to update the final estimate of this task as it required a larger investigation than expected.
yes definitely, 3 or 5?
I'd say 5.