setup lightstep open telemetry js snippet

[codecakes]

UPDATED

We need a vendor-neutral open-source Observability framework for instrumenting, generating, collecting, and exporting telemetry data such as traces, metrics, logs.

The following code walkthrough is better suited for node driven service and is meant for reference. A good browser based example is given here:

• https://opentelemetry.io/docs/instrumentation/js/getting-started/browser/
• https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/tracer-web

1. Add the code during initialization of the app;
2. Set two constants in constants.js following same semantics as others: LS_ACCESS_TOKEN and LS_SERVICE_NAME then setup the code like so:

const { lightstep, opentelemetry } =
      require("lightstep-opentelemetry-launcher-node");

// Set access token. If you prefer, set the LS_ACCESS_TOKEN environment variable instead, and remove accessToken here.
// setup LS_ACCESS_TOKEN in constants.js file;
const accessToken = LS_ACCESS_TOKEN;

const sdk = lightstep.configureOpenTelemetry({
  accessToken,
  serviceName: LS_SERVICE_NAME, // setup this name from constants.js file;
});

3. Start the OpenTelemetry SDK. All of your application code and imports need to be inside the then() block so that they run after OpenTelemetry has been setup.

   sdk.start().then(() => {
   // All of your application code and any imports that should leverage
   // OpenTelemetry automatic instrumentation must go here; e.g.,
   // const express = require('express');
   
   // If you're using an automatically instrumented library (such as Express,
   // as above), spans will be created automatically.  If you would like to manually
   // create a span, uncomment the lines below:
   // const tracer = opentelemetry.trace.getTracer('example');
   // const span = tracer.startSpan('test-span');
   // span.end();
   // tracer.getActiveSpanProcessor().shutdown();
   });

Reference:

• https://opentelemetry.io/docs/concepts/observability-primer/
• https://lightstep.com/developers/opentelemetry/
• https://open-telemetry.github.io/opentelemetry-js/

[tim08094495757]

I have two suggestions. a. use express to serve react-scripts build with the snippet you mentioned

1. https://create-react-app.dev/docs/deployment/
2. https://github.com/Xcov19/mycovidconnect/issues/260#issue-1246413243

b. migrate from create-react-app to next js with open telemetry

1. https://nextjs.org/docs/migrating/from-create-react-app
2. https://signoz.io/blog/opentelemetry-nextjs/

[codecakes]

I have two suggestions. a. use express to serve react-scripts build with the snippet you mentioned

How will be serve this as static single page cdn if we use express?

b. migrate from create-react-app to next js with open telemetry

Why? What is the motivation (in a single line) to migrate the entire codebase to next js? What is the the investment cost of it vs incentive of doing so?

[tim08094495757]

https://lightstep.com/opentelemetry/js

I don't take a deep dive into the source of lightstep-opentelemetry-launcher-node.

But if some stuffs related to require('lightstep-opentelemetry-launcher-node') can't be built as static file, sth like express will need to be used.

or if npm install @opentelemetry/api @opentelemetry/web @opentelemetry/tracing --save alone without express can successfully integrate this repo with opentelemetry, it would be great.

=> need time to survey

How will be serve this as static single page cdn if we use express?

can't be fully static. But cdn can also be used to cache the specific pattern of url.

What is the motivation (in a single line) to migrate the entire codebase to next js?

I think, if sth like express is needed or the project becomes more complicated, next.js may also be cool. https://www.reddit.com/r/reactjs/comments/s3k3xt/when_is_it_recommended_to_use_next_over_react/

[codecakes]

I don't take a deep dive into the source of lightstep-opentelemetry-launcher-node.

But if some stuffs related to require('lightstep-opentelemetry-launcher-node') can't be built as static file, sth like express will need to be used.

or if npm install @opentelemetry/api @opentelemetry/web @opentelemetry/tracing --save alone without express can successfully integrate this repo with opentelemetry, it would be great.

Yes ofcourse this should be the way to go: https://opentelemetry.io/docs/instrumentation/js/getting-started/browser/ You can do some research on a simple hello world tracing as an exercise.

How will be serve this as static single page cdn if we use express?

can't be fully static. But cdn can also be used to cache the specific pattern of url.

If you build it in the distribution that is served like provided in above links :point_up: , it will be static.

I think, if sth like express is needed or the project becomes more complicated, next.js may also be cool. https://www.reddit.com/r/reactjs/comments/s3k3xt/when_is_it_recommended_to_use_next_over_react/

Changing frameworks does not automatically solve code complexity. Building with a clean design in mind solves for the complexity. We have different perspective screens in the website and they all run just fine. Just to introduce a telemetry package, changing the entire framework is an overkill.

[codecakes]

@tim08094495757 I've updated the description.