Why you need to instrument your frontend application 🤔
We all are familiar with instrumenting backend services but have you ever thought about instrumenting frontend applications. Let us first understand why we need to instrument frontend applications and why reliability is a priority.
- Frontend is the first and last point of the user's interaction.
- Unreliable frontend can block user's access to product in turn having a direct business impact.
- Increasing devices and platforms unlocks new user genres hence unknown and multiple points of failure.
- To examine and analyze the reliability of a new feature served as an A/B experiment.
- It works in region X but not in region Y.
- RCA on the user's complete journey inside the application.
Instrumenting angular app 🛠
Enable CORS in the OTel Receiver. Inside
docker/clickhouse-setup/otel-collector-config.yaml add the following CORS config.
+ - https://netflix.com # URL of your Frontend application
Make sure to restart the container after making the config changes
Now let's get back to instrumenting our Angular Application. Let's start by installing a couple of dependencies.
npm i @jufab/opentelemetry-angular-interceptor && npm i @opentelemetry/api @opentelemetry/sdk-trace-web @opentelemetry/sdk-trace-base @opentelemetry/core @opentelemetry/semantic-conventions @opentelemetry/resources @opentelemetry/exporter-trace-otlp-http @opentelemetry/exporter-zipkin @opentelemetry/propagator-b3 @opentelemetry/propagator-jaeger @opentelemetry/context-zone-peer-dep @opentelemetry/instrumentation @opentelemetry/instrumentation-document-load @opentelemetry/instrumentation-fetch @opentelemetry/instrumentation-xml-http-request @opentelemetry/propagator-aws-xray --save-dev
Not let's import OTel module in
} from '@jufab/opentelemetry-angular-interceptor';
console: true, // Display trace on console (only in DEV env)
production: false, // Send Trace with BatchSpanProcessor (true) or SimpleSpanProcessor (false)
serviceName: 'Angular Sample App', // Service name send in trace
url: 'http://127.0.0.1:4318/v1/traces', // URL of opentelemetry collector
//Insert OtelCol exporter module
//Insert propagator module
This config would be enough to get you up and running. For more tweaks refer to this detailed documentation of the instrumentation library.
🎉 Congratulations you have successfully instrumented your application.
P.S. Issue triaging is now a piece of cake.
Facing difficulties with instrumenting your application? Check out this video tutorial 👇