Hi. I’m running openedx palm 3 with tutor. In the ora-grading MFE, when I click on the “View all responses” button I get the error page below for ORAs with file uploads.
This page is shown briefly before the error page.
1 Like
Ok I finally found the reason. The problem is that the file download URL is just the path not the full URL (which seems to be no longer like this in the edx-platform master). As the LMS address is missing from the download URL, the preview render fails. As this part fails, the app tries to show us the error (which is not a clear error message by the way), then the error render fails due to the error mentioned above (the reason is just a stupid typing error: headingMessage → headerMessage)
So, about the LMS base URL missing… I guess that this is a problem on the code side. Just don’t know which branch to commit this on, so it’ll be fixed in general and for everyone. Is it the open-release/palm.master branch of the frontend-app-ora-grading repo?
Hi @FatemeKhodayari,
It’s a bit tricky to understand what is the actual issue here. Please add more information:
What is the exact file download URL that you are seeing?
What should the full URL look like?
Do you have a link to the edx-platform source code to prove that?
Why are we talking about a preview render here? What part of the app is previewing what?
What is the error message?
I don’t understand what is the “error mentioned above”.
How did you come to that conclusion? Which part of the code should be modified?
In which part of the code base is there an error? Please paste a link here.
Hi dear @regis and thanks for the response. As you know, ORAs have this feature to let users upload files (if enabled in their settings by the staff). For grading ORAs, we use frontend-app-ora-grading which is enabled by default in tutor. To grade an ORA click on the “grade available responses” button at the bottom of the unit in LMS (you can also reach there from instructor tab).
This will open the page below (which is the first page of ora-grading MFE)
If you click on the “View all responses” button, you should see the submitted ORA. The problem happens here. IF the ORA has no file uploaded with it, everything is fine. You can see and grade it.
But if the ORA contains file, the MFE tries to preview this file but fails and shows the page below.
As mentioned in my original post, on a low speed internet connection you’ll see the grading page for a second before it crashes ans shows the error page. All of these led me to assume the problem must be with the file preview (which is shown when grading an ORA with file but not for a file-less ORA). The code responsible for rendering the file preview component is here. As you see, it tries to render the FileCard component and if any problem occurs it will render the ErrorBanner instead.
...
return (
<FileCard key={file.downloadUrl} file={file}>
{isLoading && <LoadingBanner />}
{errorStatus ? (
<ErrorBanner {...error} />
) : (
<Renderer {...rendererProps} />
)}
</FileCard>
);
...
On my local, I ran a master version of devstack and couldn’t reproduce the error. It seemed to be solved. Then I used the palm.3 version of frontend-app-ora-grading with master version of edx-platform and again no problem. So the problem was only happening when using palm.3 versions of edx-platform. This led me to this thought that there must be some incompatibility between front and back.
So I started simple and stupid. Using devstack palm.3 version, I first commented the ErrorBanner component and instead logged the error in console. This led me to seeing an empty file preview component with an error message saying Unknown error in the console.
See? The error message doesn’t help at all in showing what’s gone wrong. But the console log helps with one thing. See the headerMessage in the error object? Now lets have a look at the ErrorBanner component.
...
export const ErrorBanner = ({ actions, headingMessage, children }) => {
...
The ErrorBaanner component is getting headingMessage as input argument but the error object passed from FilePreview to ErrorBanner doesn’t have such attribute. Remember the original error page and its error message in the console? It was saying Error: [@formatjs/intl] an id must be provided to format a message. which is a translation issue. It’s trying to get an id attribute from the given object (headingMessage) so that it can get the proper translation but as there was nothing passed to headingMessage, there is no id so the frontend crashes. If you change the input argument from headingMessage to headerMessage in the ErrorBanner component, the error banner can be displayed without crashing the frontend.
Aside from the error banner and its error message, the file preview is still showing no file. As I mentioned, file preview is fine in the master version of edx-platform no matter what the frontend app version is. So I compared the response of this request https://lms.example.com/api/ora_staff_grader/submission?oraLocation=block-v1%3AedX%2BDemoX%2BDemo_Course…
The palm.3 version of edx-platform is returning this
{
"gradeData": {},
"gradeStatus": "ungraded",
"lockStatus": "unlocked",
"response": {
"files": [
{
"downloadUrl": "/openassessment/fileupload/submissions_attachments/.....",
"description": "prob",
"name": "Screenshot from 2023-10-24 12-44-06.png",
"size": 150097
}
],
"text": [
"تستtest response"
]
}
}
While the master version is returning
{
"gradeData": {},
"gradeStatus": "ungraded",
"lockStatus": "unlocked",
"response": {
"files": [
{
"downloadUrl": "https://lms.example.com/media/submissions_attachments/....",
"description": "prob",
"name": "Screenshot from 2023-10-24 12-44-06.png",
"size": 150097
}
],
"text": [
"تستtest response"
]
}
}
The downloadUrl sent from palm.3 version, unlike the one sent from master version, is not the full address of the file. So i tried adding my lms base url to the start of it and the file preview got fixed.
The Download Files button had a similar issue as well. The files got downloaded but had 0 bytes in size. Adding lms base url to their downloadUrl fixed the download. The changes I made can be seen here. My solution may not be the perfect (or even the correct) way of solving it. It’s just what came to my mind.
Sorry this got super long. Hope I’ve explained everything well this time : )
Thank you so much for the very thorough explanations. This is extremely useful. As far as I’m concerned, problem descriptions never have too much details.
My understanding is that there are two actual issues. One is critical, and the other is relatively minor:
Files are not previewed correctly and cause the grader MFE to crash (critical)
The preview fails because the file downloadUrl contains only a path, and not a hostname. As a consequence, the client attempts to download the file from the MFE host. This fails because the file is hosted in the lms container, not the mfe.
The devstack is not getting this error because it has ORA2_FILEUPLOAD_BACKEND = 'django' while Tutor has ORA2_FILEUPLOAD_BACKEND = 'filesystem'.
I suggest that we fix this issue by changing the implementation of the UploadedFileSerializer in edx-platform. This serializer will prefix the download_url with the LMS scheme://host if absent.
Once we have merged a PR to the master branch of edx-platform, we should cherry-pick it in Tutor.
A bug in the error banner causes the grader MFE to crash (minor)
This is because the MFE frontend code attempt to access an attribute called “headingMessage” instead of “headerMessage”. But this crash only occurs during an error, so it should be relatively unfrequent.
To fix this issue, we should open a PR in the frontend-app-ora-grading repository. It’s unnecessary to backport it to Palm.
@FatemeKhodayari would you like to open pull requests yourself? If you don’t have time we can find someone else to look into it.
1 Like
You mean that this issue about downloadUrl has nothing to do with the edx-platform changes between palm.3 and master but is actually just a difference between devstack and tutor? Unfortunately I couldn’t set up devstack on palm.3 as it gives manifest unknown for a lot of docker images when you try to setup an open-release so I can’t check this myself. Another question :)) What are filesystem and django anyway? I couldn’t find their usage or any implementation for them in edx-platform. Are they the file upload backends implemented here in edx-ora2?
I’ll be glad to do this. I’ll close my current merge request on frontend-ora-app-grading and open a new one that only fixes the error banner. About the one on edx-platform, I may need your help on understanding the ORA2_FILEUPLOAD_BACKEND s better : )
1 Like
Does anyone has any idea when this will be merged? Quince is released and this problem still exists :\
Apologies for the delay here… @Dmytro_Alipov 's fix works well, so I’ve approved the master PR and pinged core contributors to get it merged.
1 Like
Thanks @jill : ) Hope this gets merged soon.
@jill Thank you! @itsjeyd @Michelle_Philbrick FYI ^
Btw @jill given your knowledge of the platform, it could make sense to get you a rights extension to make you a committer on edx-platform, so you can merge this type of PR?
1 Like
2 Likes