feat(exporter-metrics-otlp-proto): Support to protobuf in browser metrics (#5710)

YangJonghun · web-flow · commit 4919fd17115a · 2025-05-27T08:59:33.000Z
diff --git a/experimental/CHANGELOG.md b/experimental/CHANGELOG.md
@@ -10,6 +10,8 @@ For notes on migrating to 2.x / 0.200.x see [the upgrade guide](doc/upgrade-to-2
 
 ### :rocket: Features
 
+* feat(exporter-metrics-otlp-proto): Support to protobuf in browser metrics. [#5710](https://github.com/open-telemetry/opentelemetry-js/pull/5710) @YangJonghun
+
 ### :bug: Bug Fixes
 
 ### :books: Documentation
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/.eslintrc.js b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/.eslintrc.js
@@ -3,6 +3,7 @@ module.exports = {
         "mocha": true,
         "commonjs": true,
         "node": true,
+        "browser": true
     },
     ...require('../../../eslint.base.js')
 }
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/karma.conf.js b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/karma.conf.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const karmaWebpackConfig = require('../../../karma.webpack');
+const karmaBaseConfig = require('../../../karma.base');
+
+module.exports = config => {
+  config.set(
+    Object.assign({}, karmaBaseConfig, {
+      webpack: karmaWebpackConfig,
+      files: ['test/browser/index-webpack.ts'],
+      preprocessors: { 'test/browser/index-webpack.ts': ['webpack'] },
+    })
+  );
+};
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/package.json b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/package.json
@@ -7,6 +7,12 @@
   "esnext": "build/esnext/index.js",
   "types": "build/src/index.d.ts",
   "repository": "open-telemetry/opentelemetry-js",
+  "browser": {
+    "./src/platform/index.ts": "./src/platform/browser/index.ts",
+    "./build/esm/platform/index.js": "./build/esm/platform/browser/index.js",
+    "./build/esnext/platform/index.js": "./build/esnext/platform/browser/index.js",
+    "./build/src/platform/index.js": "./build/src/platform/browser/index.js"
+  },
   "scripts": {
     "prepublishOnly": "npm run compile",
     "compile": "tsc --build tsconfig.json tsconfig.esm.json tsconfig.esnext.json",
@@ -15,6 +21,7 @@
     "lint:fix": "eslint . --ext .ts --fix",
     "tdd": "npm run test -- --watch-extensions ts --watch",
     "test": "nyc mocha 'test/**/*.test.ts' --exclude 'test/browser/**/*.ts'",
+    "test:browser": "karma start --single-run",
     "version": "node ../../../scripts/version-update.js",
     "watch": "tsc --build --watch tsconfig.json tsconfig.esm.json tsconfig.esnext.json",
     "precompile": "cross-var lerna run version --scope $npm_package_name --include-dependencies",
@@ -55,17 +62,30 @@
     "access": "public"
   },
   "devDependencies": {
+    "@babel/core": "7.27.1",
+    "@babel/preset-env": "7.27.2",
     "@opentelemetry/api": "1.9.0",
     "@types/mocha": "10.0.10",
     "@types/node": "18.6.5",
     "@types/sinon": "17.0.4",
+    "@types/webpack-env": "1.16.3",
+    "babel-loader": "10.0.0",
+    "babel-plugin-istanbul": "7.0.0",
     "cross-var": "1.1.0",
+    "karma": "6.4.4",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "2.2.1",
+    "karma-mocha": "2.0.1",
+    "karma-spec-reporter": "0.0.36",
+    "karma-webpack": "5.0.1",
     "lerna": "6.6.2",
     "mocha": "11.1.0",
     "nyc": "17.1.0",
     "sinon": "15.1.2",
     "ts-loader": "9.5.2",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "webpack": "5.99.9",
+    "webpack-cli": "6.0.1"
   },
   "peerDependencies": {
     "@opentelemetry/api": "^1.3.0"
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/index.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { OTLPMetricExporter } from './OTLPMetricExporter';
+export { OTLPMetricExporter } from './platform';
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/browser/OTLPMetricExporter.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/browser/OTLPMetricExporter.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { OTLPMetricExporterOptions } from '@opentelemetry/exporter-metrics-otlp-http';
+import { OTLPMetricExporterBase } from '@opentelemetry/exporter-metrics-otlp-http';
+import { OTLPExporterNodeConfigBase } from '@opentelemetry/otlp-exporter-base';
+import { ProtobufMetricsSerializer } from '@opentelemetry/otlp-transformer';
+import { createLegacyOtlpBrowserExportDelegate } from '@opentelemetry/otlp-exporter-base/browser-http';
+
+export class OTLPMetricExporter extends OTLPMetricExporterBase {
+  constructor(
+    config: OTLPExporterNodeConfigBase & OTLPMetricExporterOptions = {}
+  ) {
+    super(
+      createLegacyOtlpBrowserExportDelegate(
+        config,
+        ProtobufMetricsSerializer,
+        'v1/metrics',
+        { 'Content-Type': 'application/x-protobuf' }
+      ),
+      config
+    );
+  }
+}
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/browser/index.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/browser/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { OTLPMetricExporter } from './OTLPMetricExporter';
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/index.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { OTLPMetricExporter } from './node';
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/node/OTLPMetricExporter.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/node/OTLPMetricExporter.ts
@@ -18,7 +18,7 @@ import { OTLPMetricExporterOptions } from '@opentelemetry/exporter-metrics-otlp-
 import { OTLPMetricExporterBase } from '@opentelemetry/exporter-metrics-otlp-http';
 import { OTLPExporterNodeConfigBase } from '@opentelemetry/otlp-exporter-base';
 import { ProtobufMetricsSerializer } from '@opentelemetry/otlp-transformer';
-import { VERSION } from './version';
+import { VERSION } from '../../version';
 import {
   convertLegacyHttpOptions,
   createOtlpHttpExportDelegate,
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/node/index.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/src/platform/node/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { OTLPMetricExporter } from './OTLPMetricExporter';
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/test/browser/OTLPMetricExporter.test.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/test/browser/OTLPMetricExporter.test.ts
@@ -0,0 +1,107 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  MeterProvider,
+  PeriodicExportingMetricReader,
+} from '@opentelemetry/sdk-metrics';
+import * as assert from 'assert';
+import * as sinon from 'sinon';
+import { OTLPMetricExporter } from '../../src/platform/browser';
+
+/*
+ * NOTE: Tests here are not intended to test the underlying components directly. They are intended as a quick
+ * check if the correct components are used. Use the following packages to test details:
+ * - `@opentelemetry/oltp-exporter-base`: OTLP common exporter logic (handling of concurrent exports, ...)
+ * - `@opentelemetry/otlp-transformer`: Everything regarding serialization and transforming internal representations to OTLP
+ * - `@opentelemetry/otlp-grpc-exporter-base`: gRPC transport
+ */
+
+describe('OTLPTraceExporter', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  describe('export', function () {
+    describe('when sendBeacon is available', function () {
+      it('should successfully send data using sendBeacon', async function () {
+        // arrange
+        const stubBeacon = sinon.stub(navigator, 'sendBeacon');
+        const meterProvider = new MeterProvider({
+          readers: [
+            new PeriodicExportingMetricReader({
+              exporter: new OTLPMetricExporter(),
+            }),
+          ],
+        });
+
+        // act
+        meterProvider
+          .getMeter('test-meter')
+          .createCounter('test-counter')
+          .add(1);
+        await meterProvider.shutdown();
+
+        // assert
+        const args = stubBeacon.args[0];
+        const blob: Blob = args[1] as unknown as Blob;
+        const body = await blob.text();
+        assert.throws(
+          () => JSON.parse(body),
+          'expected requestBody to be in protobuf format, but parsing as JSON succeeded'
+        );
+      });
+    });
+
+    describe('when sendBeacon is not available', function () {
+      beforeEach(function () {
+        // fake sendBeacon not being available
+        (window.navigator as any).sendBeacon = false;
+      });
+
+      it('should successfully send data using XMLHttpRequest', async function () {
+        // arrange
+        const server = sinon.fakeServer.create();
+        server.respondWith('OK');
+        server.respondImmediately = true;
+        server.autoRespond = true;
+        const meterProvider = new MeterProvider({
+          readers: [
+            new PeriodicExportingMetricReader({
+              exporter: new OTLPMetricExporter(),
+            }),
+          ],
+        });
+
+        // act
+        meterProvider
+          .getMeter('test-meter')
+          .createCounter('test-counter')
+          .add(1);
+
+        await meterProvider.shutdown();
+
+        // assert
+        const request = server.requests[0];
+        const body = request.requestBody as unknown as Uint8Array;
+        assert.throws(
+          () => JSON.parse(new TextDecoder().decode(body)),
+          'expected requestBody to be in protobuf format, but parsing as JSON succeeded'
+        );
+      });
+    });
+  });
+});
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/test/browser/index-webpack.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/test/browser/index-webpack.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const testsContext = require.context('../browser', true, /test$/);
+testsContext.keys().forEach(testsContext);
+
+const srcContext = require.context('.', true, /src$/);
+srcContext.keys().forEach(srcContext);
diff --git a/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/test/node/OTLPMetricExporter.test.ts b/experimental/packages/opentelemetry-exporter-metrics-otlp-proto/test/node/OTLPMetricExporter.test.ts
@@ -18,7 +18,7 @@ import * as assert from 'assert';
 import * as http from 'http';
 import * as sinon from 'sinon';
 
-import { OTLPMetricExporter } from '../src/';
+import { OTLPMetricExporter } from '../../src/platform/node';
 import {
   MeterProvider,
   PeriodicExportingMetricReader,
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ module.exports = {`
`3`	`3`	`"mocha": true,`
`4`	`4`	`"commonjs": true,`
`5`	`5`	`"node": true,`
	`6`	`+ "browser": true`
`6`	`7`	`},`
`7`	`8`	`...require('../../../eslint.base.js')`
`8`	`9`	`}`