Issue with OpenTelemetry Browser Instrumentation causing webpack build errors (React, TypeScript)

[hjvasoya009]

What happened?

Details

I am facing issues with the OpenTelemetry Instrumentation in my React TypeScript app. The errors are related to the inability to resolve the 'path' module in two specific files within the OpenTelemetry dependencies, resulting in webpack build failures.

Error Details

Additional Information

Environment: React TypeScript app
Error Cause: The errors are related to the 'path' module not being resolved in the OpenTelemetry dependencies.
Steps to Reproduce:

• Include the provided OpenTelemetry setup code in a React TypeScript app.
• Run the webpack build process.
• Observe the mentioned errors in the screenshot.

OpenTelemetry Setup Code

// openTelemetrySetup.ts
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';

const initOpenTelemetry = () => {
    const provider = new WebTracerProvider();

    provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
    
    provider.register({
      contextManager: new ZoneContextManager(),
    });
    
    // Registering instrumentations
    registerInstrumentations({
      instrumentations: [
        new DocumentLoadInstrumentation(),
        new UserInteractionInstrumentation(),
        new XMLHttpRequestInstrumentation(),
        new FetchInstrumentation()
      ],
    });
    
}

export default initOpenTelemetry;

package.json

{
  "name": "opentelemetry",
  "version": "1.5.0",
  "private": true,
  "author": "John Doe",
  "license": "MIT",
  "dependencies": {
    "@opentelemetry/api": "1.7.0",
    "@opentelemetry/context-zone": "1.19.0",
    "@opentelemetry/exporter-collector": "0.25.0",
    "@opentelemetry/exporter-trace-otlp-http": "0.46.0",
    "@opentelemetry/instrumentation-document-load": "0.34.0",
    "@opentelemetry/instrumentation-fetch": "0.46.0",
    "@opentelemetry/instrumentation-user-interaction": "0.34.0",
    "@opentelemetry/instrumentation-xml-http-request": "0.46.0",
    "@opentelemetry/sdk-trace-base": "1.19.0",
    "@opentelemetry/sdk-trace-web": "1.19.0",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "async-request": "^1.2.0",
    "body-parser": "^1.20.2",
    "express": "^4.18.2",
    "express-request-proxy": "^2.2.2",
    "i18next": "^23.5.0",
    "jest-junit": "16.0.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "path-browserify": "1.0.1",
    "pm2": "^5.3.0",
    "postcss-normalize": "^10.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^13.2.2",
    "react-scripts": "^5.0.1",
    "react-scroll": "^1.8.9",
    "react-spring": "^9.7.2",
    "react-test-renderer": "^18.2.0",
    "renamer": "^4.0.0",
    "replace-in-file": "^7.0.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.5"
  },
  "jest-junit": {
    "suiteNameTemplate": "{filepath}",
    "outputDirectory": ".",
    "outputName": "junit.xml"
  },
  "scripts": {
    "start": "cd ../order-status-proxy && start cmd /c npm start && cd ../order-status-client && npm run start-webpack && timeout 5 && start chrome \"http://localhost:3000\" --kiosk --incognito --disable-pinch --no-default-browser-check --overscroll-history-navigation=0 --force-device-scale-factor=2.0",
    "start-webpack": "webpack serve --config ./webpack.config.js",
    "stop": "taskkill /im chrome.exe /f && taskkill /im node.exe /f",
    "build": "react-scripts build && npm run rename && npm run fix-assetmanifest && npm run fix-index && npm run fix-precachemanifest && npm run fix-serviceworker && npm run fix-mainchunkcss && npm run fix-main-chunk-map && npm run fix-main-chunk",
    "rename": "npm run rename-js && npm run rename-js-2 && npm run rename-css && npm run rename-media-PikeBold && npm run rename-media-PikeRegular && npm run rename-media-light && npm run rename-media-SemiBold-2 && npm run rename-media-getFetch-cjs && npm run rename-media-SemiBold && npm run rename-precache-manifest-js",
    "rename-js": "renamer --find \"/main\\.[^\\.]+\\./i\" --replace \"main.chunk.\" build\\static\\js\\*",
    "rename-js-2": "renamer --find \"/2\\.[^\\.]+\\./i\" --replace \"2.chunk.\" build\\static\\js\\*",
    "rename-css": "renamer --find \"/main\\.[^\\.]+\\./i\" --replace \"main.chunk.\" build\\static\\css\\*",
    "rename-media-PikeBold": "renamer --find \"/Pike-Bold\\.[^\\.]+\\./i\" --replace \"Pike-Bold.\" build\\static\\media\\*",
    "rename-media-PikeRegular": "renamer --find \"/Pike-Regular\\.[^\\.]+\\./i\" --replace \"Pike-Regular.\" build\\static\\media\\*",
    "rename-media-light": "renamer --find \"/SoDoSans-Light\\.[^\\.]+\\./i\" --replace \"SoDoSans-Light.\" build\\static\\media\\*",
    "rename-media-SemiBold": "renamer --find \"/SoDoSans-SemiBold\\.[^\\.]+\\./i\" --replace \"SoDoSans-SemiBold.\" build\\static\\media\\*",
    "rename-media-SemiBold-2": "renamer --find \"/SoDoSansNarrow-SemiBold\\.[^\\.]+\\./i\" --replace \"SoDoSansNarrow-SemiBold.\" build\\static\\media\\*",
    "rename-media-getFetch-cjs": "renamer --find \"/getFetch\\.[^\\.]+\\./i\" --replace \"getFetch.\" build\\static\\media\\*",
    "rename-precache-manifest-js": "renamer --find \"/precache-manifest\\.[^\\.]+\\./i\" --replace \"precache-manifest.\" build\\*",
    "fix-assetmanifest": "npm run fix-assetmanifest-main-chunk-css && npm run fix-assetmanifest-main-chunk-js && npm run fix-assetmanifest-runtime-main-js && npm run fix-assetmanifest-2-chunk-js && npm run fix-assetmanifest-precache-manifest-js && npm run fix-assetmanifest-Pike-Bold-woff && npm run fix-assetmanifest-Pike-Regular-woff && npm run fix-assetmanifest-SoDoSans-Light-woff && npm run fix-assetmanifest-SoDoSans-SemiBold-woff && npm run fix-assetmanifest-SoDoSansNarrow-SemiBold-woff && npm run fix-assetmanifest-getFetch-cjs",
    "fix-assetmanifest-main-chunk-css": "replace-in-file \"/main\\.[^\\.]+\\.css/g\" \"main.chunk.css\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-main-chunk-js": "replace-in-file \"/main\\.[^\\.]+\\.js/g\" \"main.chunk.js\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-runtime-main-js": "replace-in-file \"/runtime-main\\.[^\\.]+\\.js/g\" \"runtime-main.js\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-2-chunk-js": "replace-in-file \"/2\\.[^\\.]+\\.js/g\" \"2.chunk.js\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-precache-manifest-js": "replace-in-file \"/precache-manifest\\.[^\\.]+\\.js/g\" \"precache-manifest.js\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-Pike-Bold-woff": "replace-in-file \"/Pike-Bold\\.[^\\.]+\\.woff/g\" \"Pike-Bold.woff\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-Pike-Regular-woff": "replace-in-file \"/Pike-Regular\\.[^\\.]+\\.woff/g\" \"Pike-Regular.woff\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-SoDoSans-Light-woff": "replace-in-file \"/SoDoSans-Light\\.[^\\.]+\\.woff/g\" \"SoDoSans-Light.woff\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-SoDoSans-SemiBold-woff": "replace-in-file \"/SoDoSans-SemiBold\\.[^\\.]+\\.woff/g\" \"SoDoSans-SemiBold.woff\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-SoDoSansNarrow-SemiBold-woff": "replace-in-file \"/SoDoSansNarrow-SemiBold\\.[^\\.]+\\.woff/g\" \"SoDoSansNarrow-SemiBold.woff\" build/asset-manifest.json --isRegex",
    "fix-assetmanifest-getFetch-cjs": "replace-in-file \"/getFetch\\.[^\\.]+\\.cjs/g\" \"getFetch.cjs\" build/asset-manifest.json --isRegex",
    "fix-index": "npm run fix-index-main-chunk-css && npm run fix-index-2-chunk-js && npm run fix-index-main-chunk-js",
    "fix-index-main-chunk-css": "replace-in-file \"/main\\.[^\\.]+\\.css/g\" \"main.chunk.css\" build/index.html --isRegex",
    "fix-index-2-chunk-js": "replace-in-file \"/2\\.[^\\.]+\\.js/g\" \"2.chunk.js\" build/index.html --isRegex",
    "fix-index-main-chunk-js": "replace-in-file \"/main\\.[^\\.]+\\.js/g\" \"main.chunk.js\" build/index.html --isRegex",
    "fix-main-chunk-map": "npm run fix-main-chunk-css-map && npm run fix-main-chunk-js-map",
    "fix-main-chunk-css-map": "replace-in-file \"/main\\.[^\\.]+\\.css/g\" \"main.chunk.css\" build/static/css/main.chunk.css.map --isRegex",
    "fix-main-chunk-js-map": "replace-in-file \"/main\\.[^\\.]+\\.js/g\" \"main.chunk.js\" build/static/js/main.chunk.js.map --isRegex",
    "fix-main-chunk": "npm run fix-main-chunk-css && npm run fix-main-chunk-js",
    "fix-main-chunk-css": "replace-in-file \"/main\\.[^\\.]+\\.css/g\" \"main.chunk.css\" build/static/css/main.chunk.css --isRegex",
    "fix-main-chunk-js": "replace-in-file \"/main\\.[^\\.]+\\.js/g\" \"main.chunk.js\" build/static/js/main.chunk.js --isRegex",
    "fix-precachemanifest": "npm run fix-precachemanifest-main-chunk-css && npm run fix-precachemanifest-main-chunk-js && npm run fix-precachemanifest-2-chunk-js && npm run fix-precachemanifest-runtime-main-js && npm run fix-precachemanifest-SoDoSans-Light-woff && npm run fix-precachemanifest-SoDoSans-SemiBold-woff && npm run fix-precachemanifest-SoDoSansNarrow-SemiBold-woff",
    "fix-precachemanifest-main-chunk-css": "replace-in-file \"/main\\.[^\\.]+\\.css/g\" \"main.chunk.css\" build/precache-manifest.js --isRegex",
    "fix-precachemanifest-main-chunk-js": "replace-in-file \"/main\\.[^\\.]+\\.js/g\" \"main.chunk.js\" build/precache-manifest.js --isRegex",
    "fix-precachemanifest-2-chunk-js": "replace-in-file \"/2\\.[^\\.]+\\.js/g\" \"2.chunk.js\" build/precache-manifest.js --isRegex",
    "fix-precachemanifest-runtime-main-js": "replace-in-file \"/runtime-main\\.[^\\.]+\\.js/g\" \"runtime-main.js\" build/precache-manifest.js --isRegex",
    "fix-precachemanifest-SoDoSans-Light-woff": "replace-in-file \"/SoDoSans-Light\\.[^\\.]+\\.woff/g\" \"SoDoSans-Light.woff\" build/precache-manifest.js --isRegex",
    "fix-precachemanifest-SoDoSans-SemiBold-woff": "replace-in-file \"/SoDoSans-SemiBold\\.[^\\.]+\\.woff/g\" \"SoDoSans-SemiBold.woff\" build/precache-manifest.js --isRegex",
    "fix-precachemanifest-SoDoSansNarrow-SemiBold-woff": "replace-in-file \"/SoDoSansNarrow-SemiBold\\.[^\\.]+\\.woff/g\" \"SoDoSansNarrow-SemiBold.woff\" build/precache-manifest.js --isRegex",
    "fix-serviceworker": "npm run fix-serviceworker-precache-manifest-js",
    "fix-serviceworker-precache-manifest-js": "replace-in-file \"/precache-manifest\\.[^\\.]+\\.js/g\" \"precache-manifest.js\" build/service-worker.js --isRegex",
    "fix-mainchunkcss": "npm run fix-mainchunkcss-Pike-Bold-woff && npm run fix-mainchunkcss-Pike-Bold-woff2 && npm run fix-mainchunkcss-Pike-Regular-woff && npm run fix-mainchunkcss-Pike-Regular-woff2 && npm run fix-mainchunkcss-SoDoSans-Light-woff && npm run fix-mainchunkcss-SoDoSans-Light-woff2 && npm run fix-mainchunkcss-SoDoSans-SemiBold-woff && npm run fix-mainchunkcss-SoDoSans-SemiBold-woff2 && npm run fix-mainchunkcss-SoDoSansNarrow-SemiBold-woff && npm run fix-mainchunkcss-SoDoSansNarrow-SemiBold-woff2",
    "fix-mainchunkcss-Pike-Bold-woff": "replace-in-file \"/Pike-Bold\\.[^\\.]+\\.woff/g\" \"Pike-Bold.woff\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-Pike-Bold-woff2": "replace-in-file \"/Pike-Bold\\.[^\\.]+\\.woff2/g\" \"Pike-Bold.woff2\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-Pike-Regular-woff": "replace-in-file \"/Pike-Regular\\.[^\\.]+\\.woff/g\" \"Pike-Regular.woff\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-Pike-Regular-woff2": "replace-in-file \"/Pike-Regular\\.[^\\.]+\\.woff2/g\" \"Pike-Regular.woff2\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-SoDoSans-Light-woff": "replace-in-file \"/SoDoSans-Light\\.[^\\.]+\\.woff/g\" \"SoDoSans-Light.woff\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-SoDoSans-Light-woff2": "replace-in-file \"/SoDoSans-Light\\.[^\\.]+\\.woff2/g\" \"SoDoSans-Light.woff2\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-SoDoSans-SemiBold-woff": "replace-in-file \"/SoDoSans-SemiBold\\.[^\\.]+\\.woff/g\" \"SoDoSans-SemiBold.woff\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-SoDoSans-SemiBold-woff2": "replace-in-file \"/SoDoSans-SemiBold\\.[^\\.]+\\.woff2/g\" \"SoDoSans-SemiBold.woff2\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-SoDoSansNarrow-SemiBold-woff": "replace-in-file \"/SoDoSansNarrow-SemiBold\\.[^\\.]+\\.woff/g\" \"SoDoSansNarrow-SemiBold.woff\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkcss-SoDoSansNarrow-SemiBold-woff2": "replace-in-file \"/SoDoSansNarrow-SemiBold\\.[^\\.]+\\.woff2/g\" \"SoDoSansNarrow-SemiBold.woff2\" build/static/css/main.chunk.css --isRegex",
    "fix-mainchunkjs-getFetch-cjs": "replace-in-file \"/getFetch\\.[^\\.]+\\.cjs/g\" \"getFetch.cjs\" build/static/js/main.chunk.js --isRegex",
    "eject": "react-scripts eject",
    "start2": "set PORT=3002 && react-scripts start",
    "test": "jest --coverage",
    "test:ci": "npm run test -- --watchAll=false --reporters=default --reporters=jest-junit"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.22.11",
    "@testing-library/jest-dom": "^6.1.2",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.4",
    "@types/node": "20.10.5",
    "@types/react-scroll": "^1.8.7",
    "babel-jest": "^29.6.4",
    "jest": "^29.6.4",
    "jest-environment-jsdom": "^29.6.4",
    "jest-watch-typeahead": "^2.2.2",
    "parcel": "2.10.3",
    "ts-jest": "^29.1.1",
    "webpack": "5.89.0",
    "webpack-cli": "5.1.4"
  },
  "description": "This is the web page.",
  "main": "pageserver.js",
  "keywords": [],
  "resolutions": {
    "path": "path-browserify"
  }
}

Relevant log output

No response

[darekodz]

I had the same issue and resolved it by adding
fallback: { "path": false } in the resolve object in my webpack config

[hjvasoya009]

@darekodz I tried both fallback: { "path": false } and fallback: { "path": require.resolve("path-browserify") }. But error remains as it is.

[cangSDARM]

open-telemetry/opentelemetry-js-contrib#1892
This is the instrumentation-document-load problem. @hjvasoya009

[pichlermarc]

Hi, thanks for reporting the issue. This is actually fixed in the most recent release of this repo and we're currently working on releasing a fix over at https://github.com/open-telemetry/opentelemetry-js-contrib but we hit a lot of road-bumps while working on that. The good news is that we've isolated the problem and are expecting that we'll have them sorted out soon.

I'm closing this issue since it's a duplicate of #4373 and open-telemetry/opentelemetry-js-contrib#1892, if you feel that this is not correct, please feel free to reach out here on the issue and I'll re-open it.