Repository: locustio/locust

Issue:
[Report][Modern-UI] HTML report is blank
### Prerequisites

- [X] I am using [the latest version of Locust](https://github.com/locustio/locust/releases/)
- [X] I am reporting a bug, not asking a question

### Description

Run a test then open the HTML report -> Noticed that it is blank
Note: This bug occurs from 2.22.0, and did not occur on 2.21.0 
![image](https://github.com/locustio/locust/assets/19199172/58cb69ed-29f5-4396-a17a-67bd1d2646d8)


### Command line

locust -f SimpleWeb.py -u 100 -r 10 -t 30s --html=samplelocust.html

### Locustfile contents

```python3
from locust import FastHttpUser, HttpUser, between, constant_pacing, events, task
from loguru import logger


class QuickstartUser(FastHttpUser):
    wait_time = between(2, 5)


    host = "http://127.0.0.1:5000"
    # begin = time.time()

    @task()
    def get_tasks_1(self):
        res = None
        try:
            payload = {}
            headers = {"Cache-Control": "max-age=0, no-cache, no-store, must-revalidate"}
            res = self.client.get("/api/tasks", headers=headers, data=payload, name="Get Tasks")
        except Exception as exception:
            logger.error(exception)

    @task()
    def post_lewin(self):
        try:
            payload = {}
            headers = {"Cache-Control": "max-age=0, no-cache, no-store, must-revalidate"}
            self.client.post("/api/lewin", headers=headers, data=payload, name="Post Lewin")
        except Exception as exception:
            logger.error(exception)
```


### Python version

3.9.18

### Locust version

2.23.1

### Operating system

macOS 14.2.1 (23C71)


Discussion:
@andrewbaldwin44 can you take a look?
Hi @G1-Diep-Duong I'm running your example and I'm not able to reproduce the issue. Do you know if you were using the old Locust UI prior to release 2.22.0? Maybe that would be why it used to work. Can you see if there are any error messages in the browser console? Can you reproduce the issue if you use the `--legacy-ui` flag?
Hi @andrewbaldwin44, 
This bug doesn't occur in the Old UI with the `--legacy-ui` flag
Here is the video of this bug:
In this video, I used the example locust file for reproducing
https://github.com/locustio/locust/assets/19199172/f3fd3b00-1e85-420e-9a5d-1979c7364ffc

Run the example locust file in headless mode for generating HTML reports in both Modern and Old UI:
`locust -f specs/locustfile.py -u 100 -r 5 -t 30s --html=dieplocust_modern.html --headless`
`locust -f specs/locustfile.py -u 100 -r 5 -t 30s --html=dieplocust_old.html --headless --legacy-ui`
Notice that the modern report is blank:
![image](https://github.com/locustio/locust/assets/19199172/96c0479f-5402-47cc-bb90-f2fee4b247fe)


Hey @G1-Diep-Duong, somehow I am still unable to reproduce this issue. I'm using the same locust file and parameters as you, I even tried on a Mac using Python version 3.9

The blank page you are seeing is because there is an error happening somewhere, I will try to add some error handling to prevent this from happening, however we should still try and investigate why this is happening.

Would you mind trying the following:
1. Open the browser console (cmd + option + j) and take a screenshot of the error being displayed. Because it is bundled code the error will probably not be very good but it may still give me an idea
2.  If step one doesn't show a clear error message, then you could try to fork / clone the repo and install locust in development mode: `cd locust && pip install -e .` and then build the frontend in development mode: `cd locust/webui` and then `yarn dev:watch --mode=develop`. Then run the locust file and take a screenshot of the error. This would activate sourcemaps which would give us a better idea of where the issue is coming from.

In the meantime I will keep trying to reproduce the error on my side :/ 


Hi @andrewbaldwin44 , for the option 1, here is the error message:
![image](https://github.com/locustio/locust/assets/19199172/17c82885-0e9d-404d-8e89-60b1f73c9f09)

For Option 2, after installing locust in dev mode version: locust-2.23.2.dev10
The command locust show error when running:
![image](https://github.com/locustio/locust/assets/19199172/a1b3ca3b-f491-4a74-8bce-0e26e4e743f5)


Hmm this is quite strange. @cyberw have you ever seen anyone receiving that error message when installing locust in editable mode?

@G1-Diep-Duong Unfortunately the error message is not super helpful, my best guess is that it would have to do with your browser not supporting something. Can you share the version of Chrome that you are using?
I havent seen this issue myself and havent heard any more than what is in this ticket… maybe the pip version is very old? The version is generated by setuptools_scm..
Yeah that's what I was going to suggest, just try updating everything (pip, python, chrome, etc.). But I'm not sure if that would really count as solving the issue 😅
Hi @andrewbaldwin44 
Here is the HTML file generated from Modern UI mode, hope it helps a bit for the investigation (Change extension .JSON to HTML)
[locust_modern_report.JSON](https://github.com/locustio/locust/files/14368101/locust_modern_report.JSON)

I am using latest Chrome on MacOS:
![image](https://github.com/locustio/locust/assets/19199172/7af1c561-cc64-4ca5-b6aa-d442260944ed)

1. Pip version: pip 24.0 from /opt/homebrew/lib/python3.9/site-packages/pip (python 3.9)
2. Python version: Python 3.9.18
3. MacOS: 14.2.1 (23C71)






Resolving patch:
diff --git a/examples/web_ui_auth.py b/examples/web_ui_auth.py
--- a/examples/web_ui_auth.py
+++ b/examples/web_ui_auth.py
@@ -6,7 +6,7 @@
 
 For more information, see https://docs.locust.io/en/stable/extending-locust.html#authentication
 """
-from locust import HttpUser, events
+from locust import HttpUser, events, task
 
 import json
 import os
@@ -16,7 +16,9 @@
 
 
 class LocustHttpUser(HttpUser):
-    pass
+    @task
+    def example(self):
+        self.client.get("/")
 
 
 class AuthUser(UserMixin):


Test patch: