Added web browser traffic in loadgenerator

[jordibisbal8]

Changes

In this PR, we aim to add browser traffic by using playwright (as discussed here). The main changes are:

• Installed playwright in the DockerFile
• Increase memory constraints for the load generator container to be able to run playwright for several concurrent users
• Added playwright user and two tasks in the locustfile. One goes to the /cart page and the other clicks the Go shopping button.
• Added environment variable to enable browser traffic (false by default)

Merge Requirements

For new features contributions please make sure you have completed the following
essential items:

• CHANGELOG.md updated to document new feature additions
• Appropriate documentation updates in the docs
• Appropriate Helm chart updates in the helm-chartsAdded environment variable and increased memory limit opentelemetry-helm-charts#959

Maintainers will not merge until the above have been completed. If you're unsure
which docs need to be changed ping the
@open-telemetry/demo-approvers.

[danielgblanco]

I've left a couple of comments (not a maintainer to approve). I think this is a great addition and will help build up client-side instrumentation use cases.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: jordibisbal8 / name: Jordi Bisbal Ansaldo (3cb52e4, 3b8f621, eaa699a, 7e78c5b, 4e671a6, 45e0a4e, 2988f77)
• ✅ login: julianocosta89 / name: Juliano Costa (a7d1822)
• ✅ login: austinlparker / name: Austin Parker (d05d21c)

[julianocosta89]

This is does not build.
greenlet needs to be downgraded to v 3.0.0

[jordibisbal8]

This is does not build. greenlet needs to be downgraded to v 3.0.0

Thanks for spotting this @julianocosta89, I have downgraded greenlet

[jordibisbal8]

@julianocosta89 can you have another look now?

[julianocosta89]

Hello @jordibisbal8 and @danielgblanco 👋🏽

I've been playing around with the demo since this PR got merged and I couldn't figure it out what that added to the demo.
I was expecting that after enabling LOCUST_BROWSER_TRAFFIC_ENABLED I would get traces where the root span would be the frontend-web.

It happens that this is not happening, and I only get the frontend-web spans, when manually navigating through the browser.

If that's not what this PR added, could you help me out understanding here what Playwright actually brings to the demo?

This was a big change on memory allocation, I just want to make sure we are getting something out of it.

FYI: @austinlparker

[jordibisbal8]

Hello @jordibisbal8 and @danielgblanco 👋🏽

I've been playing around with the demo since this PR got merged and I couldn't figure it out what that added to the demo. I was expecting that after enabling LOCUST_BROWSER_TRAFFIC_ENABLED I would get traces where the root span would be the frontend-web.

It happens that this is not happening, and I only get the frontend-web spans, when manually navigating through the browser.

If that's not what this PR added, could you help me out understanding here what Playwright actually brings to the demo?

This was a big change on memory allocation, I just want to make sure we are getting something out of it.

FYI: @austinlparker

Yes, you should be able to see traces with the loadgenerator calling the browser. Let me test this again and I will let you know :) How are you setting the environment up? docker-compose?

[julianocosta89]

Yes, you should be able to see traces with the loadgenerator calling the browser. Let me test this again and I will let you know :) How are you setting the environment up? docker-compose?

Yes:

docker compose build
docker compose up

[jordibisbal8]

Do you see the browser events/tasks in the load generator? Like the screenshot I have attached :)

[puckpuck]

I have also noticed a similar experience as @julianocosta89 and did a lot more digging to figure it out.

The current scripts for the playwright user scenarios, hitting the cart endpoint or going home then clicking a button, don't generate a second request. The scenario of going home and hitting a button is navigating to a link anchor built into the home page and not doing another request.

I modified the script to click on a product and then the add to cart button so that it could generate multiple requests. This worked and did produce traces, but they were all missing root spans. This leads me to believe the playwright Javascript engine doesn't properly work with the OpenTelemetry SDK, and that's why we do not see any traces that have a service of frontend-web.

It makes sense to open a new issue for this and track it. I don't like the idea of having a 10x memory requirement for the load generator if we don't produce traces that originate from frontend-web. I would like to get this resolved before we release.

[jordibisbal8]

@puckpuck thanks for reporting this issue, I will take a closer look :)

[danielgblanco]

I believe the issue is related to having a hardcoded PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT pointing to localhost in

opentelemetry-demo/.env

Line 16 in 889d455

PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://localhost:8080/otlp-http/v1/traces

and also in the chart values

https://github.com/open-telemetry/opentelemetry-helm-charts/blob/764920aac4d1fe1147ba187dd86631e021c2e297/charts/opentelemetry-demo/values.yaml#L343

In both cases, it expects the collector to be available in localhost. In the K8s example, expecting port-forward to be run beforehand to achieve this. I can see two main options:

1. Making the same host routable from within the loadgenerator container and from outside a cluster (hitting the browser manually). This may add extra complexity.
2. Using a different PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT depending on the type of request. As there is a

   opentelemetry-demo/src/loadgenerator/locustfile.py

   Line 129 in 889d455

   ctx = baggage.set_baggage("synthetic_request", "true")

   this could be doable and we have a different endpoint for those after checking baggage.

[danielgblanco]

The issue @puckpuck related to missing parents could be a timing issue though, possibly related to open-telemetry/opentelemetry-js#2205. Would be good to execute some requests, then navigate away to another page (so unload is triggered) and wait for load or for network idle before finishing the test case. This should ensure that spans are exported.

So, another PR on this would need:

1. For the frontend to know when a request is coming from loadgen (via synthetic_request baggage) and use a different PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT (should be configurable via a new env property).
2. Some tests that generate some XHR requests that can be instrumented (not just the initial page load).
3. Trigger an unload and wait for the browser to push spans (i.e. wait for next load or network idle).

[danielgblanco]

Actually, when the batch processor is configured here

https://github.com/open-telemetry/opentelemetry-demo/blob/889d455951ac091d9926d151f540d33e4d844b63/src/frontend/utils/telemetry/FrontendTracer.ts#L34C13-L34C13

We could set a different exportTimeoutMillis (or via env var) that allows us to control how long to wait on the Locust side for spans to be exported.