signalfx / splunk-otel-js-web

Splunk distribution of Open Telemetry for browser environment.

Getting Started   •   Getting Involved

Splunk distribution of OpenTelemetry JavaScript for Web

The Splunk distribution of OpenTelemetry JavaScript for Web

🚧 This project is currently in BETA. It is officially supported by Splunk. However, breaking changes MAY be introduced.

Getting Started

For complete instructions for how to get started with the Splunk distribution of OpenTelemetry JavaScript for Web, see Install the Browser RUM agent for Splunk RUM

Documentation

The official Splunk documentation for this page is Instrument browser-based web applications for Splunk RUM.

Open Telemetry version

Compatibility between the versions of this project and Open Telemetry is specified in CHANGELOG.md.

Troubleshooting

For troubleshooting issues with the Splunk Distribution of OpenTelemetry JS for Web, see Troubleshoot browser instrumentation for Splunk Observability Cloud in the official documentation.

Building and contributing

Please read CONTRIBUTING.md for instructions on building, running tests, and so forth.

License

The Splunk distribution of OpenTelemetry JavaScript Browser is a distribution of OpenTelemetry JavaScript Browser. It is licensed under the terms of the Apache Software License version 2.0. See the license file for more details.

ℹ️  SignalFx was acquired by Splunk in October 2019. See Splunk SignalFx for more information.

splunk-otel-js-web's Issues

iOS 12: "TypeError: undefined is not an object (evaluating 'window.PerformanceObserver.supportedEntryTypes.includes')"

We upgraded our app from 0.0.13 to 0.0.19 of the client SDK and started seeing this error in our Sentry reports on page load:

We then see the following error logged on every route change:

TypeError: undefined is not an object (evaluating 'window.SplunkRum.provider.getTracer')
  at value(/app/enrollment/static/splunk-rum-0.0.19.js:1:73806)
  at ? (/app/enrollment/static/splunk-rum-0.0.19.js:1:74376)
  at value(../../../../next-server/lib/router/router.ts:932:7)
  at call(../../../../next-server/lib/router/router.ts:869:7)
  at tryCatch(./node_modules/regenerator-runtime/runtime.js:63:40)
  at key(./node_modules/regenerator-runtime/runtime.js:293:22)
  at asyncGeneratorStep(./node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:20)
  at _next(./node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
  at promiseReactionJob([native code])

The error is showing up on the following browsers:

Typescript - No types published for library

I am working with an Internal Angular app with my enterprise. Unfortunately we've been having trouble getting any type support.

Application Details
Angular 14
Typescript 4.8
Node 16
ES 2020

Library Details:
Tested versions 12.3 thru 14rc5

Using the library with no changes results in the following error:

TypeError: _splunk_otel_web__WEBPACK_IMPORTED_MODULE_0__.init is not a function

In order to resolve, types must be written by the consumer and added to the tsconfig typeRoots property. This is trickier as we wrap otel-web in another internal lib. Is there any way to get native types from the lib or contributing the full types to the DefinitelyTyped project?

Additionally some of our unit tests will fail without placing this reference to the library in tsconfig path which I suspect may be related to the types issue.
"paths": { "@splunk/otel-web": ["node_modules/@splunk/otel-web/dist/cjs/index.js"] },

Webpack is using cjs files instead of esm

For context, I'm using NextJS and following the instructions here to instrument the @splunk/otel-web package. While using @next/bundle-analyzer, I noticed that the @splunk/otel-web/dist/cjs files are being pulled in. I was hoping to see the @splunk/otel-web/dist/esm files being used so that Webpack can tree shake off the modules that @splunk/otel-web is not using.

It looks like the reason the CJS files are being used is because Webpack checks the browser field of the package.json first by default and currently it contains:

  "browser": "dist/cjs/index.js",
  "module": "dist/esm/index.js",

I was wondering if the team would be open to:

• updating the browser field to point to dist/esm/index.js
• renaming browser to main
• perhaps one of the solutions discussed in webpack/webpack#4674
• something else?

I'm happy to open a PR.

Untranspiled code to an old browser (flatMap is undefined) and (Unexpected token, Unexpected reserved word, missing argument)

Mostly the error is related to the untranspiled code to an old browser flatMap is undefined

This error makes SplunkPostDocLoadResourceInstrumentation data not recorded into Splunk for users with Android 8.1.0 and below.

Upgrade to protobufjs >= 7.2.4 in otel-web-session-recorder

Projects depending on @splunk/otel-web-session-recorder are getting flagged for this CVE: https://nvd.nist.gov/vuln/detail/CVE-2023-36665

Add troubleshooting docs and reference them in README.md

Per https://github.com/signalfx/gdi-specification/blob/v1.5.0/specification/repository.md?plain=1#L112

Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.

We are encountering a lot of these errors, when using the SplunkSessionRecorder:

Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.
    at u (mutation.js:131:60)
    at e.emit (mutation.js:203:25)
    at e.processMutations (mutation.js:102:19)

We are using version v0.16.3.

It looks like the origin of the error is the rrweb-dependecy (version 1.1.3).

There already are corresponding bug reports in the rrweb-repository (rrweb-io/rrweb#1114 and rrweb-io/rrweb#890).

A fix also already was implemented (see rrweb-io/rrweb#891 and rrweb-io/rrweb@3cdcb8a), however, it is not available in any of the 1.x versions. It looks like the earliest version that contains this fix is [email protected].

Unfortunately we can't use the session recorder like this as it is flooding our Sentry-instance. with the mentioned errors.

Feature request: trace parent for post-document-load resource fetch spans

The document-load plugin supports defining a trace parent for resource fetch spans, but there is no way to do the same for resource fetches that happen after the document load.

Proposal: support defining the trace parent with a data-traceparent attribute on the <script> element that loads the resource, i.e.

  <script src="my-script.js" data-traceparent="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01"></script>

If this approach seems reasonable, I'd be happy to submit a PR.

Update CONTRIBUTING.md

Make sure to use the template https://github.com/signalfx/gdi-specification/blob/v1.5.0/specification/templates/CONTRIBUTING.md

E.g. I noticed that currently in CONTRIBUTING.md the hyperlink for CLA is not correct.

Pin GitHub Actions versions and configure dependabot

Per https://github.com/signalfx/gdi-specification/blob/v1.5.0/specification/repository.md?plain=1#L47-L49

The GitHub Actions versions MUST be pinned. E.g. - uses: actions/[email protected].

You can also consider using ubuntu-22.04 instead of ubuntu-latest.

Per https://github.com/signalfx/gdi-specification/blob/v1.5.0/specification/repository.md?plain=1#L53

dependabot.yml misses a configuration for github-actions.

Next.js: how to use SplunkRum.setGlobalAttributes?

We have integrating Splunk RUM into a number of Next.js apps, following the directions here.

We'd like to now use setGlobalAttributes to add some additional information to our spans. It seems that if we import SplunkRum from '@splunk/otel-web' and try to use it in one of our components, we'll encounter an error during build:

./node_modules/@splunk/otel-web/node_modules/@opentelemetry/instrumentation/build/src/platform/node/instrumentation.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/@splunk/otel-web/node_modules/@opentelemetry/instrumentation/build/src/platform/node/index.js
./node_modules/@splunk/otel-web/node_modules/@opentelemetry/instrumentation/build/src/platform/index.js
./node_modules/@splunk/otel-web/node_modules/@opentelemetry/instrumentation/build/src/index.js
./node_modules/@splunk/otel-web/dist/esm/index.js
./pages/list.js


> Build error occurred
ReferenceError: NodeList is not defined

I saw this was brought up in #222, but I'm still left wondering how to use setGlobalAttributes. I understand that Splunk Rum is only meant to be used on the client side, but even if we add some checks to ensure setGlobalAttributes is only called on the client-side, simply having the import in the page causes the build to fail with the aforementioned error.

Config option to disable all exporting (console and network)

My use case is that I'd like to @splunk/otel-web as a local tracer provider / source of auto-instrumentation, but implement my own exporter to send its spans to a different ingest location.

Multiple global otel registrations from init()

I hit an error in a project where I had version 1.0.4 of @opentelemetry/api installed alongside version 0.8.1 of @splunk/otel-web (which is notable because its own @opentelemetry/api dependency is pinned at 1.0.2). Calling init fails with the following error:

Error: @opentelemetry/api: All API registration versions must match
    at registerGlobal (bundle.js:2778:15)
    at TraceAPI.setGlobalTracerProvider (bundle.js:1675:89)
    at SplunkWebTracerProvider.BasicTracerProvider.register (bundle.js:12922:59)
    at SplunkWebTracerProvider.WebTracerProvider.register (bundle.js:14905:31)
    at Object.init (bundle.js:20441:14)
    at initSplunkOtelWeb (bundle.js:16992:23)
    at initTracingProvider (bundle.js:17091:9)
    at Module../src/index.tsx (bundle.js:198:81)
    at Module.options.factory (bundle.js:90787:31)
    at __webpack_require__ (bundle.js:90225:33)

I tracked this down to the fact that init directly registers with global otel API when it calls diag.setLogger, which puts the 1.0.2 version into the global registry. And then it indirectly registers with the global API when it instantiates a new SplunkWebTracerProvider. Since this indirect registration happens inside of the @opentelemetry/sdk-trace-web module, it resolves version 1.0.4 of @opentelemetry/api and that causes an error because 1.0.2 already exists in the registry.

This could be fixed by having @splunk/otel-web declare @opentelemetry/api as a peer dependency, or at least use a more permissive semver range so that npm can de-dupe it with other installed versions.

Support for 64bit traceId in Server-Timing response header

Hello, I have a question about tracing and Server-Timing response header format expected by the instrumentation script.

Is there any reason, why the instrumentation does not support 64bit traceIds?
If I understood correctly, the traceId should be valid for b3-propagation (both 64bit and 128bit identifiers are valid as per https://github.com/openzipkin/b3-propagation#traceid).
Current servertiming.ts implementation asks for 32hex traceId identifiers (specifically here and here).

We are not using Splunk agent on the server side for automatic instrumentation of the code and our traceIds are 64bit long. This prevents us effectively from linking traces from server and client as the Splunk RUM does not pick up the Server-Timing header.

Am I missing something? Would it be possible to support shorter traceIds as well?

Adopt GDI specification v1.6.0

Adopt https://github.com/signalfx/gdi-specification/releases/tag/v1.6.0

Can't use npm installation on Angular project

I'm trying to implement npm example installation on an Angular 10 app and can't build it.

The show this error:

ERROR in node_modules/@opentelemetry/instrumentation-user-interaction/build/src/types.d.ts:21:33 - error TS2304: Cannot find name 'Task'.
21 export declare type AsyncTask = Task & {
                                   ~~~~
node_modules/@opentelemetry/instrumentation-user-interaction/build/src/types.d.ts:24:12 - error TS2304: Cannot find name 'Zone'.
24     _zone: Zone;
              ~~~~
node_modules/@opentelemetry/instrumentation-user-interaction/build/src/types.d.ts:29:94 - error TS2304: Cannot find name 'Zone'.
29 export declare type RunTaskFunction = (task: AsyncTask, applyThis?: any, applyArgs?: any) => Zone;
                                                                                                ~~~~
node_modules/@opentelemetry/instrumentation-user-interaction/build/src/types.d.ts:52:61 - error TS2304: Cannot find name 'Zone'.
52 export declare type ZoneTypeWithPrototype = ZonePrototype & Zone;
                                                               ~~~~

You can check the error on this repo: https://github.com/suga0828/splunk-rum-instrumentation

Adopt GDI specification v1.5.0

Adopt https://github.com/signalfx/gdi-specification/releases/tag/v1.5.0

typo in websocket config docs

Hi,
all docs that I found regarding websockets instrumentations are using plural websockets while in code there is a websocket

https://quickdraw.splunk.com/redirect/?product=Observability&location=github.rum.configuration&version=current

splunk-otel-js-web/docs/Configuration.md

Line 45 in ec39d79

|`instrumentations.websockets`|`false`|Enables capturing [websockets](Instrumentations.md#instrumentation-websockets).|

splunk-otel-js-web/packages/web/src/index.ts

Line 85 in ec39d79

websocket?: boolean | InstrumentationConfig;

Examples should be self-contained

Hello,

I was trying out the examples and ran into errors about npm packages not being found. Ideally we would fix the examples to be self-contained.

As a workaround, the README should to mention that the examples assume you have run npm install once in the root folder of this repo.

Add Lychee Link Checker GitHub Action

Per https://github.com/signalfx/gdi-specification/blob/v1.5.0/specification/repository.md?plain=1#L74

Example: https://github.com/signalfx/splunk-otel-dotnet/blob/main/.github/workflows/validate-documentation.yml

CDN doesn't allow to be grabbed from another site

I get the following error:
Access to script at 'https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js' from origin 'https://www.whiscuit.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I believe the solution is here: https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

No documentation for SSR / SSG / hybrid rendering

This library breaks when used out-of-the-box with next.js. We should document what configuration changes are needed to make it work or make it work out-of-the-box.

The most common error in such a scenario is:

ReferenceError: NodeList is not defined

Documentation lacking for concat-based builds

Documentation assumes everywhere that the builds are never based on concatenation.

For example, manual instrumentation instructions tell you to use:

import {trace} from '@opentelemetry/api'

which is impossible to follow when your build is based on concatenation of files (rather than usingimport or require statements).