@opentelemetry/web does not work in web workers

[Obi-Dann]

What version of OpenTelemetry are you using?

0.11.0

What version of Node are you using?

v12.18.3

Please provide the code you used to setup the OpenTelemetry SDK

CodeSandbox editor url https://codesandbox.io/s/dark-brook-q5dmi?fontsize=14&hidenavigation=1&theme=dark
CodeSandbox preview https://q5dmi.sse.codesandbox.io/

// JS code running inside web worker
import {
  ConsoleSpanExporter,
  SimpleSpanProcessor
} from "@opentelemetry/tracing";
import { WebTracerProvider } from "@opentelemetry/web";

const provider = new WebTracerProvider();

provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));

provider.register();

What did you do?

Just load the page

What did you expect to see?

WebWorker would run successfully with opentelemetry instrumentation

What did you see instead?

Errors when running opentelemetry libs

Additional context

Some of the modules in opentelemetry use modules unavailable in web workers. So far I found these places

opentelemetry-js/packages/opentelemetry-core/src/platform/browser/environment.ts

Line 28 in 60d4dab

const _window = window as typeof window & ENVIRONMENT_MAP;

this code uses window unavailable in web workers, it's simple to fix by replacing window with self

opentelemetry-js/packages/opentelemetry-web/src/utils.ts

Line 32 in 60d4dab

const urlNormalizingA = document.createElement('a');

document is not available in web workers, it's probably possible to use different logic for normalizing URLs eg, new URL or something else

[DVN237294]

Having the same issue trying to implement @opentelemetry/web in Next.js. My issue is essentially the same as OP, so commenting here instead of making a new issue.

I initialized WebTracerProvider in React's useEffect hook to make sure it only runs client-side, but Next.js's server side rendering process in Node seems to be resolving the dependencies server side, causing the document to be referenced here:

opentelemetry-js/packages/opentelemetry-web/src/utils.ts

Line 32 in 60d4dab

const urlNormalizingA = document.createElement('a');

Moving the document.createElement('a') reference to

opentelemetry-js/packages/opentelemetry-web/src/utils.ts

Line 134 in 60d4dab

urlNormalizingA.href = spanUrl;

where urlNormalizingA is referred to, solves the problem for me as all other document references runs client-side (I think).

(I'm not sure if useEffect is the right place to init OpenTelemetry. I'm quite new to both OpenTelemetry and Next.js so I'm open to suggestions!)

[ryhinchey]

I've been hitting the same issues referenced in this issue and will start work on a PR fixing them

[legendecas]

Closing as #2719 landed.