feat: bring back browser extension

.github/component_owners.yml

@@ -32,6 +32,8 @@ components:
   packages/baggage-span-processor:
     - mikegoldsmith
     - jamiedanielson
+  packages/opentelemetry-browser-extension-autoinjection:
+    - svrnm
   packages/opentelemetry-host-metrics:
     - legendecas
   packages/opentelemetry-id-generator-aws-xray:

archive/opentelemetry-browser-extension-autoinjection/README.md → packages/opentelemetry-browser-extension-autoinjection/README.md

@@ -1,10 +1,5 @@
 # OpenTelemetry Browser Extension
 
-## :warning: ARCHIVED PROJECT
-
-> This project has been archived by the maintainers on August 3 2022 because it was causing a failure in the CI and does not have any maintainer.
-> Anyone who would like to maintain this project should open a PR to move it back into the lerna project and add themselves to the component owners file.
-
 This browser extension allows you to inject [OpenTelemetry](https://opentelemetry.io/) instrumentation in any web page. It uses the [Web SDK](https://github.com/open-telemetry/opentelemetry-js/tree/main/packages/opentelemetry-sdk-trace-web) and can export data to Zipkin or an OpenTelemetry Collector.
 
 Compatible with OpenTelemetry JS API and SDK `1.0+`.
@@ -50,6 +45,16 @@ Click on `Save & Reload`, check the developer toolbar to see how spans being are
 
 ![This image shows spans being printed into the console of the developer toolbar for opentelemetry.io](./images/console.png)
 
+### Usage with OTLP
+
+If you'd like to export your telemetry to an OTLP endpoint (i.e. [collector](https://github.com/open-telemetry/opentelemetry-collector)) you might run into issues
+with [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/) (CSP) and [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (CORS).
+
+To work around CSP you need another browser extension, that allows you to disable CSP for your targeted website.
+
+To work around CORS you need your OTLP endpoint to provide you with the right headers. To help you with that you find a `docker-compose.yml` in [./server] that
+starts a nginx, OTel collector and jaeger instance for you. You can leverage that example to get your own installation up and running.
+
 ## Known Limitations
 
 1. The extension works with [active tab](https://developer.chrome.com/docs/extensions/mv3/manifest/activeTab/) permission, this means that every time you want to use it, you have to click the extension icon at least once for your tab.

archive/opentelemetry-browser-extension-autoinjection/package.json → packages/opentelemetry-browser-extension-autoinjection/package.json

@@ -83,4 +83,4 @@
     "react-dom": "17.0.2"
   },
   "homepage": "https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/packages/opentelemetry-browser-extension-autoinjection#readme"
-}
+}

packages/opentelemetry-browser-extension-autoinjection/server/default.conf

@@ -0,0 +1,25 @@
+server {
+    listen 80 default_server;
+    server_name _;
+    location / {
+        # Take care of preflight requests
+        if ($request_method = 'OPTIONS') {
+             add_header 'Access-Control-Max-Age' 1728000;
+             add_header "Access-Control-Allow-Origin" "$http_origin" always;
+             add_header 'Access-Control-Allow-Headers' 'Accept,Accept-Language,Content-Language,Content-Type,X-Requested-With' always;
+             add_header 'Access-Control-Allow-Credentials' 'true' always;
+             add_header 'Content-Type' 'text/plain charset=UTF-8';
+             add_header 'Content-Length' 0;
+             return 204;
+        }
+
+        add_header "Access-Control-Allow-Origin" "$http_origin" always;
+        add_header 'Access-Control-Allow-Credentials' 'true' always;
+        add_header 'Access-Control-Allow-Headers' 'Accept,Accept-Language,Content-Language,Content-Type,X-Requested-With' always;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_pass http://collector:4318;
+    }
+}

packages/opentelemetry-browser-extension-autoinjection/server/docker-compose.yml

@@ -0,0 +1,23 @@
+version: "2"
+services:
+  jaeger:
+    image: jaegertracing/all-in-one:latest
+    environment:
+      - COLLECTOR_OTLP_ENABLED=true
+    ports:
+      - "16686:16686"
+  proxy:
+    image: nginx:latest
+    ports:
+      - "4318:80"
+    volumes:
+      - ./default.conf:/etc/nginx/conf.d/default.conf
+    depends_on:
+      - collector
+  collector:
+    image: otel/opentelemetry-collector:latest
+    command: ["--config=/etc/otel-collector-config.yaml"]
+    volumes:
+      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
+    depends_on:
+      - jaeger

packages/opentelemetry-browser-extension-autoinjection/server/otel-collector-config.yaml

@@ -0,0 +1,31 @@
+receivers:
+  otlp:
+    protocols:
+      http:
+        include_metadata: true
+processors:
+  resource:
+    attributes:
+      - key: browser.user_agent
+        from_context: User-Agent
+        action: upsert
+  attributes:
+    actions:
+      - key: http.client_ip
+        from_context: X-Forwarded-For
+        action: upsert
+
+exporters:
+  otlp:
+    endpoint: jaeger:4317
+    tls:
+      insecure: true
+      insecure_skip_verify: true
+  logging:
+
+service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [resource,attributes]
+      exporters: [logging, otlp]

archive/opentelemetry-browser-extension-autoinjection/src/instrumentation/WebInstrumentation.ts → packages/opentelemetry-browser-extension-autoinjection/src/instrumentation/WebInstrumentation.ts

@@ -17,10 +17,11 @@ import { registerInstrumentations } from '@opentelemetry/instrumentation';
 import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
 import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
 import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
+import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { ZoneContextManager } from '@opentelemetry/context-zone';
 import { ZipkinExporter } from '@opentelemetry/exporter-zipkin';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { OTLPTraceExporter as OTLPHttpTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
 import {
   BatchSpanProcessor,
   ConsoleSpanExporter,
@@ -37,45 +38,64 @@ export class WebInstrumentation {
   withZoneContextManager: boolean;
   provider: WebTracerProvider;
   exporters: Exporters;
+  logger: Console;
   instrumentations: {
     [InstrumentationType.DOCUMENT_LOAD]: { enabled: boolean };
     [InstrumentationType.FETCH]: { enabled: boolean };
     [InstrumentationType.XML_HTTP_REQUEST]: { enabled: boolean };
+    [InstrumentationType.USER_INTERACTION]: { enabled: boolean };
   };
   constructor(
     config: InstrumentationConfiguration,
-    provider: WebTracerProvider
+    provider: WebTracerProvider,
+    logger: Console
   ) {
     this.exporters = config.exporters;
     this.instrumentations = config.instrumentations;
     this.provider = provider;
     this.withZoneContextManager = config.withZoneContextManager;
+    this.logger = logger;
   }
 
   addExporters() {
     if (this.exporters[ExporterType.CONSOLE].enabled) {
+      this.logger.info(
+        '[otel-extension] Logging spans to the console with ConsoleSpanExporter'
+      );
       this.provider.addSpanProcessor(
         new SimpleSpanProcessor(new ConsoleSpanExporter())
       );
     }
 
     if (this.exporters[ExporterType.ZIPKIN].enabled) {
-      this.provider.addSpanProcessor(
-        new BatchSpanProcessor(
-          new ZipkinExporter({
+      const options = this.exporters[ExporterType.ZIPKIN].url
+        ? {
             url: this.exporters[ExporterType.ZIPKIN].url,
-          })
-        )
+          }
+        : {};
+      this.logger.info(
+        '[otel-extension] Logging spans to the console with ZipkinExporter(',
+        options,
+        ')'
+      );
+      this.provider.addSpanProcessor(
+        new BatchSpanProcessor(new ZipkinExporter(options))
       );
     }
 
-    if (this.exporters[ExporterType.COLLECTOR_TRACE].enabled) {
+    if (this.exporters[ExporterType.TRACE_OTLP_HTTP].enabled) {
+      const options = this.exporters[ExporterType.TRACE_OTLP_HTTP].url
+        ? {
+            url: this.exporters[ExporterType.TRACE_OTLP_HTTP].url,
+          }
+        : {};
+      this.logger.info(
+        '[otel-extension] Logging spans to the console with OTLPHttpTraceExporter(',
+        options,
+        ')'
+      );
       this.provider.addSpanProcessor(
-        new BatchSpanProcessor(
-          new OTLPTraceExporter({
-            url: this.exporters[ExporterType.COLLECTOR_TRACE].url,
-          })
-        )
+        new BatchSpanProcessor(new OTLPHttpTraceExporter(options))
       );
     }
   }
@@ -95,6 +115,10 @@ export class WebInstrumentation {
       instrumentations.push(new XMLHttpRequestInstrumentation());
     }
 
+    if (this.instrumentations[InstrumentationType.USER_INTERACTION].enabled) {
+      instrumentations.push(new UserInteractionInstrumentation());
+    }
+
     registerInstrumentations({
       instrumentations,
       tracerProvider: this.provider,

archive/opentelemetry-browser-extension-autoinjection/src/instrumentation/index.ts → packages/opentelemetry-browser-extension-autoinjection/src/instrumentation/index.ts

@@ -43,12 +43,16 @@ new WebInstrumentation(
       [InstrumentationType.XML_HTTP_REQUEST]: {
         enabled: true,
       },
+      [InstrumentationType.USER_INTERACTION]: {
+        enabled: true,
+      },
     },
     withZoneContextManager: true,
   },
   new WebTracerProvider({
     resource: new Resource({
       [SemanticResourceAttributes.SERVICE_NAME]: window.location.hostname,
     }),
-  })
+  }),
+  console
 ).register();

archive/opentelemetry-browser-extension-autoinjection/src/manifest.json5 → packages/opentelemetry-browser-extension-autoinjection/src/manifest.json5

@@ -15,9 +15,12 @@
       "open_in_tab": true,
    },
    "web_accessible_resources": [
-      "instrumentation.js"
+      "instrumentation.js",
+      "instrumentation.js.map",
+      "contentScript.js.map",
+      "js/index.js.map"
    ],
    "host_permissions": [
       '<all_urls>'
    ]
-}
+}

archive/opentelemetry-browser-extension-autoinjection/src/types.ts → packages/opentelemetry-browser-extension-autoinjection/src/types.ts

@@ -25,7 +25,7 @@ export interface Exporters {
     enabled: boolean;
     url: string;
   };
-  [ExporterType.COLLECTOR_TRACE]: {
+  [ExporterType.TRACE_OTLP_HTTP]: {
     enabled: boolean;
     url: string;
   };
@@ -43,6 +43,9 @@ export interface InstrumentationConfiguration {
     [InstrumentationType.XML_HTTP_REQUEST]: {
       enabled: boolean;
     };
+    [InstrumentationType.USER_INTERACTION]: {
+      enabled: boolean;
+    };
   };
   withZoneContextManager: boolean;
 }
@@ -81,7 +84,7 @@ export interface ExporterOptionProps {
   isEnabled: boolean;
   onToggle: (exporter: ExporterType) => void;
   onValueChange?: (
-    name: ExporterType.ZIPKIN | ExporterType.COLLECTOR_TRACE,
+    name: ExporterType.ZIPKIN | ExporterType.TRACE_OTLP_HTTP,
     newValue: string
   ) => void;
   exporterPackageUrl: string;
@@ -117,13 +120,14 @@ export enum AppType {
 export enum ExporterType {
   CONSOLE = 'Console',
   ZIPKIN = 'Zipkin',
-  COLLECTOR_TRACE = 'CollectorTrace',
+  TRACE_OTLP_HTTP = 'OTLP HTTP',
 }
 
 export enum InstrumentationType {
   DOCUMENT_LOAD = 'DocumentLoad',
   FETCH = 'Fetch',
   XML_HTTP_REQUEST = 'XMLHttpRequest',
+  USER_INTERACTION = 'UserInteraction',
 }
 
 export enum DomElements {
@@ -136,7 +140,7 @@ export enum DomAttributes {
 
 export enum PlaceholderValues {
   ZIPKIN_URL = 'http://localhost:9411/api/v2/spans',
-  COLLECTOR_TRACE_URL = 'http://localhost:4318/v1/trace',
+  TRACE_OTLP_HTTP_URL = 'http://localhost:4318/v1/traces',
 }
 
 export enum Labels {

archive/opentelemetry-browser-extension-autoinjection/src/ui/App.tsx → packages/opentelemetry-browser-extension-autoinjection/src/ui/App.tsx

@@ -80,7 +80,7 @@ export class App extends React.Component<AppProps, AppState> {
   }
 
   handleUrlChange(
-    name: ExporterType.ZIPKIN | ExporterType.COLLECTOR_TRACE,
+    name: ExporterType.ZIPKIN | ExporterType.TRACE_OTLP_HTTP,
     value: string
   ) {
     this.setState(state => {
@@ -244,13 +244,13 @@ export class App extends React.Component<AppProps, AppState> {
                 value={exporters[ExporterType.ZIPKIN].url}
               />
               <ExporterOption
-                for={ExporterType.COLLECTOR_TRACE}
-                isEnabled={exporters[ExporterType.COLLECTOR_TRACE].enabled}
+                for={ExporterType.TRACE_OTLP_HTTP}
+                isEnabled={exporters[ExporterType.TRACE_OTLP_HTTP].enabled}
                 onToggle={this.toggleExporter}
                 onValueChange={this.handleUrlChange}
-                placeholderValue={PlaceholderValues.COLLECTOR_TRACE_URL}
-                exporterPackageUrl="https://www.npmjs.com/package/@opentelemetry/exporter-otlp-http"
-                value={exporters[ExporterType.COLLECTOR_TRACE].url}
+                placeholderValue={PlaceholderValues.TRACE_OTLP_HTTP_URL}
+                exporterPackageUrl="https://www.npmjs.com/package/@opentelemetry/exporter-trace-otlp-http"
+                value={exporters[ExporterType.TRACE_OTLP_HTTP].url}
               />
             </Grid>
           </Paper>

archive/opentelemetry-browser-extension-autoinjection/src/ui/ExporterOption.tsx → packages/opentelemetry-browser-extension-autoinjection/src/ui/ExporterOption.tsx

@@ -52,7 +52,7 @@ export class ExporterOption extends React.Component<ExporterOptionProps> {
             </FormHelperText>
           </FormGroup>
         </Grid>
-        {this.props.value !== undefined ? (
+        {this.props.value !== undefined && this.props.isEnabled ? (
           <Grid item xs={12} md={9}>
             <TextField
               label={`${this.props.for} URL`}
@@ -67,7 +67,7 @@ export class ExporterOption extends React.Component<ExporterOptionProps> {
                   ? this.props.onValueChange(
                       this.props.for as
                         | ExporterType.ZIPKIN
-                        | ExporterType.COLLECTOR_TRACE,
+                        | ExporterType.TRACE_OTLP_HTTP,
                       event.target.value
                     )
                   : () => {}

archive/opentelemetry-browser-extension-autoinjection/src/utils/storage.ts → packages/opentelemetry-browser-extension-autoinjection/src/utils/storage.ts

@@ -31,7 +31,7 @@ export function loadFromStorage(): Promise<Storage> {
               enabled: false,
               url: '',
             },
-            [ExporterType.COLLECTOR_TRACE]: {
+            [ExporterType.TRACE_OTLP_HTTP]: {
               enabled: false,
               url: '',
             },

archive/opentelemetry-browser-extension-autoinjection/test/instrumentation.test.ts → packages/opentelemetry-browser-extension-autoinjection/test/instrumentation.test.ts

@@ -62,9 +62,9 @@ describe('WebInstrumentation', () => {
             enabled: true,
             url: PlaceholderValues.ZIPKIN_URL,
           },
-          [ExporterType.COLLECTOR_TRACE]: {
+          [ExporterType.TRACE_OTLP_HTTP]: {
             enabled: true,
-            url: PlaceholderValues.COLLECTOR_TRACE_URL,
+            url: PlaceholderValues.TRACE_OTLP_HTTP_URL,
           },
         },
         instrumentations: {
@@ -77,10 +77,15 @@ describe('WebInstrumentation', () => {
           [InstrumentationType.XML_HTTP_REQUEST]: {
             enabled: true,
           },
+          [InstrumentationType.USER_INTERACTION]: {
+            // disabled, throws "ReferenceError: history is not defined"
+            enabled: false,
+          },
         },
         withZoneContextManager: true,
       },
-      provider
+      provider,
+      console
     );
     instrumentation.register();
     assert.ok(addSpanProcessorSpy.callCount === 3);