Zipkin exporter

[Booster2ooo]

Hello,

I just want to provide some more info about Zipkin exporter because it's in a grey area right now for the web browser support.

In the ZipkinExporterService, it's is stated that ZipkinExporter isn't operationnal for the moment in web application. which isn't 100% true.

The Opentelemetry Zipkin exporter is based on few node.js global modules such as http and https which should make the library incompatible with the browser. Nevertheless, webpack provides some polyfills that makes it possible to run the Zipkin exporter in the browser.

By default, Angular's webpack configuration turns off node polyfills (node: false) but it's possible to extend the webpack configuration to turn it on thus making Zipkin exporter work.

To do so, some simple steps are required:

• Install the npm package @angular-builders/custom-webpack
• Change the project build builder in angular.json (projects.project-name.architect.build.builder)

-- "builder": "@angular-devkit/build-angular:browser",
++ "builder": "@angular-builders/custom-webpack:browser",

• Add a customWebpackConfig in the project build options in angular.json (projects.project-name.architect.build.options):

++  "customWebpackConfig": {
++    "path": "./webpack.config-extension.js"
++  },
    "aot": true,
    "progress": true,
    "extractCss": true,
    "outputPath": "dist",
  ...

• (Optional) Change the project serve builder in angular.json (projects.project-name.architect.serve.builder)

-- "builder": "@angular-devkit/build-angular:dev-server",
++ "builder": "@angular-builders/custom-webpack:dev-server",

• Add webpack.config-extension.js at the same level than angular.json

module.exports = {
  node: {
    global: true
  }
}

With this manipulation, the module @opentelemetry/exporter-zipkin can be used in Angular (and, by extension, in the browser).

It is important to note that I don't know the possible side-effects of allowing node globals in the webpack configuration and the impact on the Angular app.

[jufab]

Hi,

Thanks for that!

I started a branch with your suggestion => https://github.com/jufab/opentelemetry-angular-interceptor/tree/zipkin_webpack

It works

But this modification is possible only on the application, not on the library. So if i insert that, this library will be not compatible with a default angular application (ng new)

I prefer to wait for a zipkin "browser" compatible.

I conserve this branch for the moment ;)

[Booster2ooo]

This is indeed purely informative, it's a good way to "pre-test" the zipkin exporter and for users to have some pieces of information on how to setup the zipkin exporter with an angular project.

I totally understand and agree with you, it's best to wait for the official browser support.

[Booster2ooo]

FYI, Zipkin is officially supported in browser now: open-telemetry/opentelemetry-js#1399 (comment)

[jufab]

Thanks.

I just wait the next release ;)