reload on connect in quizsummarypage; avoid possible error w/ missing…

nucleogenesis commented 1 month ago

Summary

Closes #12388

I was only able to replicate the error described there by @AlexVelezLl when I forced specifically a 502 error within the size endpoint's handler. I don't know any way that a 502 would come through unless the server is disconnected somehow during the page load.

I could not replicate it naturally, however, so I cannot be 100% this addresses the issue at hand here.

But, ultimately, what it came down to was that if the page got a 502 error, it would show the proper "disconnected" snackbar & backdrop. In this case, the value used this.quizId was not yet initialized.

The change here ensures that when the user regains connection to the server, their page will reload, hopefully successfully.

One thing of concern is that if there is a way in which we could end up getting some kind of unjustified 502, then this could just result in an infinite loop of failing to connect and reloading.

The only way that I can think of that the size endpoint's handler would cause a 502 is if it's crashing the server. I've made some large quizzes during development on EQM and I've not had any issues with it and trying it didn't help replicate the issue.

Without some kind of stack trace for the error from a naturally occurring replication of the error this will be hard to debug, as there are several calls within that could cause the failure:

    @action(detail=False)
    def size(self, request, **kwargs):
        exams, draft_exams = self.filter_querysets(
            self.get_queryset(), self.get_draft_queryset()
        )
        exams_sizes_set = []
        for exam in list(exams) + list(draft_exams):
            quiz_size = {}

            quiz_nodes = ContentNode.objects.filter(
                id__in=[question["exercise_id"] for question in exam.get_questions()]
            )

            quiz_size[exam.id] = total_file_size(quiz_nodes)
            exams_sizes_set.append(quiz_size)

        return Response(exams_sizes_set)

Also worth noting that my first thought was to force an error within the function there, but that just resulted in the expected 400 Bad request rather than the 502 that is the direct cause of this issue.

Reviewer guidance

Code review

Is there any kind of additional handing I should add in the size handler?
Any thoughts on how to better replicate this particular issue -- are there any quirks to our disconnection handling that might come into play here?

QA

Path 1: Fake replication

With Network Throttling enabled, click to view a Quiz's details (click it's name link on the quiz list page). Throttling will help buy you time to kill your server in the next step :)
Then, quickly kill your server kolibri stop, causing the backend to no longer be available
Restart the Kolibri server, click to reconnect on the snackbar message in your browser, and the page should reload when you reconnect successfully
Now you should be able to delete the quiz without issue

Path 2: Possibly replicate it naturally

Maybe try once more with a very large quiz w/ lots of exercises in it that would have a large size
Don't do the "kill your server" thing manually and see if you can get it to naturally occur that you get a 502 somehow?

github-actions[bot] commented 1 month ago

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.17.0a0.dev0_git.67.g6ca6ff84.pex
Windows Installer (EXE)	kolibri-0.17.0a0.dev0+git.67.g6ca6ff84-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0a0.dev0+git.67.g6ca6ff84-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0a0.dev0+git.67.g6ca6ff84.dmg
Android Package (APK)	kolibri-0.17.0a0.dev0+git.67.g6ca6ff84-0.1.4-debug.apk
TAR file	kolibri-0.17.0a0.dev0+git.67.g6ca6ff84.tar.gz
WHL file	kolibri-0.17.0a0.dev0+git.67.g6ca6ff84-py2.py3-none-any.whl

pcenov commented 1 month ago

Hi @nucleogenesis, following the directions in 'Path 1: Fake replication' I managed to actually replicate the original issue that is - I can see the quiz details page with "Resource not found on device" shown and I can't delete the quiz after having successfully restarted the server. Only if I manually refresh the entire page, then I can delete it. So if we consider that a valid testing scenario, then we've not fixed the original issue since from the perspective of a normal user of Kolibri we are still getting in the edge-case scenario where we can't delete the quiz with missing resources for no obvious reason. Here's a video of what I am observing:

https://github.com/user-attachments/assets/1c59b7d9-d5ff-472c-84a9-58109f08b62b

Logs: logs.zip

nucleogenesis commented 1 month ago

@pcenov I've updated the PR so that the deletion modal uses the always present quizId value from the URL itself. This ensures that the modal being submitted will always work.

@rtibbles @AlexVelezLl -- I've updated the QuizSummaryPage a bit here. We were duplicating the fetch from the backend to get data we already had available by way of the classSummary store. So the component got the same data two different ways and used them differently.

My changes consolidate them into one exam property derived from classSummary/examMap, then uses the exam utils fetchExamWithContent function to be sure we're getting the content in the right shape. I think that we could probably just derive this from the classSummary/contentNodeMap but I figured I'd get feedback on this first as I think the changes here should sufficiently resolve the issue this PR targets.

pcenov commented 3 weeks ago

Hi @nucleogenesis - I confirm that now it's possible to delete a quiz while the 'Resource not found on device' message is displayed:

https://github.com/user-attachments/assets/7b9259b5-2d8b-4d6b-a5d9-7bc1922642fb

I can also see the missing resources loaded correctly when I manually refresh the page after the successful server restart:

https://github.com/user-attachments/assets/ec838c0a-bb54-41d9-bcd0-b61649f3909b

rtibbles commented 2 weeks ago

As a final manual test here before we merge, @pcenov could you:

Install 0.16
Create a quiz on 0.16.
Upgrade to the asset in this PR.
Navigate to the quiz summary page for a specific quiz under plan.
Confirm that the questions all display correctly.

pcenov commented 1 week ago

Hi @rtibbles - I confirm that there is a regression when opening a quiz created in 0.16:

https://github.com/user-attachments/assets/62e05b16-2d2b-4ce1-b035-6865ded87d4d

I'm seeing the following error in the console:

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at ManageExamModals.vue:95:1
    at QuizSummaryPagevue_type_script_lang_js_toConsumableArray (ManageExamModals.vue:95:1)
    at index.vue:116:1
    at Array.reduce (<anonymous>)
    at Sub.selectedQuestions (index.vue:115:1)
    at Watcher.get (vue.runtime.esm.js:4495:25)
    at Watcher.evaluate (vue.runtime.esm.js:4597:21)
    at Sub.selectedQuestions (vue.runtime.esm.js:4851:17)
    at Sub.QuizSummaryPagevue_type_template_id_f77f4f98_scoped_true_render (index.vue:1:1036)
    at vue-composition-api.mjs:1940:35

Here's the entire home folder: kolibri.zip

learningequality / kolibri