Add sample that send telemetry from the browser

[JamesNK]

See https://github.com/dotnet/aspire/tree/main/playground/BrowserTelemetry as an example of how to do this.

[DamianEdwards]

I'm thinking we should just update the existing AspireWithJavaScript sample to do this. It has Angular, React, and Vue apps in it so seems like a good candidate to add this functionality.

/Cc @IEvangelist

[IEvangelist]

I'm thinking we should just update the existing AspireWithJavaScript sample to do this. It has Angular, React, and Vue apps in it so seems like a good candidate to add this functionality.

/Cc @IEvangelist

Tried doing this, only to learn that it's not really well supported. I spoke with @vhvb1989 and @davidfowl on this, and here's the conclusion as to why we cannot do this with the AspireWithJavaScript sample:

• Since these apps are SPAs, they're built in the container and their bits are pushed to a /dist folder and served by nginx as static files.

• In order to get the values of the OTEL_EXPORTER_OTLP_ENDPOINT, OTEL_EXPORTER_OTLP_HEADERS, and OTEL_RESOURCE_ATTRIBUTES at deployment time, I attempted to use the PublishAsDockerFile with the following build args:

  DockerBuildArg[] otelBuildArgs = [
      new("OTEL_EXPORTER_OTLP_ENDPOINT"),
      new("OTEL_EXPORTER_OTLP_HEADERS"),
      new("OTEL_RESOURCE_ATTRIBUTES")
  ];
  

  However, these env vars are not available during build when publishing the app.

• At runtime, these env var values are available, but at that point - it's too late.

• Also, ACA doesn't expose the OTEL collector.

[DamianEdwards]

@IEvangelist everything you're referring to is regarding supporting this after publishing to ACA, correct? IIUC we could make the sample support it at dev time without much trouble but it wouldn't work after publishing, right?

[IEvangelist]

@IEvangelist everything you're referring to is regarding supporting this after publishing to ACA, correct? IIUC we could make the sample support it at dev time without much trouble but it wouldn't work after publishing, right?

@DamianEdwards - Correct, I have it working locally for dev time support...that was still a bit of work though. So many different opinions about how each JS SPA framework handles building env vars.

[DamianEdwards]

OK. I guess we just need to decide if we want to include it in the sample in that state then, perhaps with a note in the README. Given how many folks asked for the feature and the fact we made changes to unblock it, seems like it's worthwhile?

[IEvangelist]

Yeah, again I have this all working locally and correctly reporting browser telemetry for each SPA. I could add a note in the README.md to say something about the deployment not working. Perhaps, we should remove the Dockerfiles from the sample then too, as it's really confusing to include them since they will not work.

[DamianEdwards]

Could we update the sample logic so that the client app gets the URL via a call to a backend API?

[ethangillengg]

Hi all, I am trying to implement this for an aspire app using Vite as the SPA bundler. I am also in the same situation where OTEL from the browser is working in dev, but I cannot get it working on my deployment ACA.

@IEvangelist you mentioned that:

• Also, ACA doesn't expose the OTEL collector.

Would this mean that there is no way currently to get OTEL from the browser when deploying to ACA? Thanks!

[unmade-spangle]

Any update on this? There is no point in having samples with javascript if it doesn't work, why even bother having it then?

[gusflopes]

Would it make sense to add a request sample to the API service also? Open Telemetry + requests from the frontend to the backend? I was checking the repo to figure out how to expose the API port so I could inject it on the frontend as base url for HTTP requests.