fix(sdk-web): parse url with relative url string (#2972)

Co-authored-by: Valentin Marchaud <contact@vmarchaud.fr>

CHANGELOG.md

@@ -18,6 +18,8 @@ All notable changes to this project will be documented in this file.
 
 ### :bug: (Bug Fix)
 
+* fix(sdk-web): parse url with relative url string [#2972](https://github.com/open-telemetry/opentelemetry-js/pull/2972) @legendecas
+
 ### :books: (Refine Doc)
 
 ### :house: (Internal)

experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts

@@ -29,12 +29,6 @@ import { FetchError, FetchResponse, SpanData } from './types';
 import { VERSION } from './version';
 import { _globalThis } from '@opentelemetry/core';
 
-function parseUrl(url: string): web.URLLike {
-  const element = document.createElement('a');
-  element.href = url;
-  return element;
-}
-
 // how long to wait for observer to collect information about resources
 // this is needed as event "load" is called before observer
 // hard to say how long it should really wait, seems like 300ms is
@@ -126,7 +120,7 @@ export class FetchInstrumentation extends InstrumentationBase<Promise<Response>>
     span: api.Span,
     response: FetchResponse
   ): void {
-    const parsedUrl = parseUrl(response.url);
+    const parsedUrl = web.parseUrl(response.url);
     span.setAttribute(SemanticAttributes.HTTP_STATUS_CODE, response.status);
     if (response.statusText != null) {
       span.setAttribute(AttributeNames.HTTP_STATUS_TEXT, response.statusText);
@@ -301,7 +295,7 @@ export class FetchInstrumentation extends InstrumentationBase<Promise<Response>>
         ...args: Parameters<typeof fetch>
       ): Promise<Response> {
         const self = this;
-        const url = parseUrl(args[0] instanceof Request ? args[0].url : args[0]).href;
+        const url = web.parseUrl(args[0] instanceof Request ? args[0].url : args[0]).href;
 
         const options = args[0] instanceof Request ? args[0] : args[1] || {};
         const createdSpan = plugin._createSpan(url, options);
@@ -437,17 +431,16 @@ export class FetchInstrumentation extends InstrumentationBase<Promise<Response>>
   private _prepareSpanData(spanUrl: string): SpanData {
     const startTime = core.hrTime();
     const entries: PerformanceResourceTiming[] = [];
-    if (PerformanceObserver == null) {
+    if (typeof PerformanceObserver !== 'function') {
       return { entries, startTime, spanUrl };
     }
 
-    const observer: PerformanceObserver = new PerformanceObserver(list => {
+    const observer = new PerformanceObserver(list => {
       const perfObsEntries = list.getEntries() as PerformanceResourceTiming[];
-      const parsedUrl = parseUrl(spanUrl);
       perfObsEntries.forEach(entry => {
         if (
           entry.initiatorType === 'fetch' &&
-          entry.name === parsedUrl.href
+          entry.name === spanUrl
         ) {
           entries.push(entry);
         }

experimental/packages/opentelemetry-instrumentation-xml-http-request/src/xhr.ts

@@ -28,7 +28,7 @@ import {
   getResource,
   PerformanceTimingNames as PTN,
   shouldPropagateTraceHeaders,
-  URLLike
+  parseUrl,
 } from '@opentelemetry/sdk-trace-web';
 import { EventNames } from './enums/EventNames';
 import {
@@ -40,12 +40,6 @@ import {
 import { VERSION } from './version';
 import { AttributeNames } from './enums/AttributeNames';
 
-function parseUrl(url: string): URLLike {
-  const element = document.createElement('a');
-  element.href = url;
-  return element;
-}
-
 // how long to wait for observer to collect information about resources
 // this is needed as event "load" is called before observer
 // hard to say how long it should really wait, seems like 300ms is
@@ -215,8 +209,8 @@ export class XMLHttpRequestInstrumentation extends InstrumentationBase<XMLHttpRe
     const xhrMem = this._xhrMem.get(xhr);
     if (
       !xhrMem ||
-      PerformanceObserver == null ||
-      PerformanceResourceTiming == null
+      typeof PerformanceObserver !== 'function' ||
+      typeof PerformanceResourceTiming !== 'function'
     ) {
       return;
     }

experimental/packages/opentelemetry-instrumentation-xml-http-request/test/xhr.test.ts

@@ -29,7 +29,7 @@ import { SemanticAttributes } from '@opentelemetry/semantic-conventions';
 import {
   PerformanceTimingNames as PTN,
   WebTracerProvider,
-  URLLike,
+  parseUrl,
 } from '@opentelemetry/sdk-trace-web';
 import * as assert from 'assert';
 import * as sinon from 'sinon';
@@ -49,12 +49,6 @@ class DummySpanExporter implements tracing.SpanExporter {
   }
 }
 
-function parseUrl(url: string): URLLike {
-  const element = document.createElement('a');
-  element.href = url;
-  return element;
-}
-
 const XHR_TIMEOUT = 2000;
 
 const getData = (

packages/opentelemetry-sdk-trace-web/src/utils.ts

@@ -300,7 +300,7 @@ export interface URLLike {
  */
 export function parseUrl(url: string): URLLike {
   if (typeof URL === 'function') {
-    return new URL(url);
+    return new URL(url, location.href);
   }
   const element = getUrlNormalizingAnchor();
   element.href = url;

packages/opentelemetry-sdk-trace-web/test/utils.test.ts

@@ -490,12 +490,25 @@ describe('utils', () => {
         assert.strictEqual(typeof url[field], 'string');
       });
     });
+
+    it('should parse relative url', () => {
+      const url = parseUrl('/foo');
+      urlFields.forEach(field => {
+        assert.strictEqual(typeof url[field], 'string');
+      });
+    });
   });
 
   describe('normalizeUrl', () => {
     it('should normalize url', () => {
       const url = normalizeUrl('https://opentelemetry.io/你好');
       assert.strictEqual(url, 'https://opentelemetry.io/%E4%BD%A0%E5%A5%BD');
     });
+
+    it('should normalize relative url', () => {
+      const url = normalizeUrl('/你好');
+      const urlObj = new URL(url);
+      assert.strictEqual(urlObj.pathname, '/%E4%BD%A0%E5%A5%BD');
+    });
   });
 });