We are working with a VS Code extension that contains React components, unlike a conventional React app hosted in a web browser. We are using OpenTelemetry for instrumentation and feeding data into ELK (Elastic Observability) for service map visualization. However, we are facing an issue where the service map diagram in ELK does not individually recognize the services (e.g., network calls, database queries).
In the diagram, the app itself is shown as one service, but all other services are grouped together in an unidentifiable cluster. This behavior is different from what we observe with a traditional web-based React app, where services such as network calls and database queries are clearly represented and distinguished in the service map.
Details:
- The VS Code extension is making network calls, but since it is not a traditional browser-based React application, we suspect some of the automatic instrumentation (HTTP, network, etc.) is either not applicable or not functioning as expected.
- VS Code internally manages some network calls, which might not be captured by the standard HTTP instrumentations available for web apps.
- The service map diagram only shows the app itself and a club of services that cannot be individually recognized or identified.
Request:
- Is there a specific configuration or instrumentation approach that needs to be applied for VS Code extensions to ensure that services are recognized individually in the service map?
- Are there any limitations or alternative methods in OpenTelemetry and ELK for instrumenting and recognizing services in non-conventional environments like VS Code extensions?
- Any insights into how to improve the visibility and separation of services in the service map for this kind of setup would be helpful.
For reference, we are currently working with OpenTelemetry instrumentation and are integrating data with Elastic Observability.
Thank you for your guidance!
