fix: Node do not require window to build (#2007)

* fix: Node do not require window to build

* fix: Remove unused lint rule

* meta: Changelog

Author: HazAT

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+- [utils] ref: Move `htmlTreeAsString` to `@sentry/browser`
+- [utils] ref: Remove `Window` typehint `getGlobalObject`
+
 ## 5.0.6
 
 - [utils]: Change how we use `utils` and expose `esm` build

packages/browser/src/integrations/helpers.ts

@@ -1,6 +1,6 @@
 import { captureException, getCurrentHub, withScope } from '@sentry/core';
 import { Event as SentryEvent, Mechanism, WrappedFunction } from '@sentry/types';
-import { addExceptionTypeValue, htmlTreeAsString, normalize } from '@sentry/utils';
+import { addExceptionTypeValue, isString, normalize } from '@sentry/utils';
 
 const debounceDuration: number = 1000;
 let keypressTimeout: number | undefined;
@@ -181,7 +181,7 @@ export function breadcrumbEventHandler(eventName: string): (event: Event) => voi
     //   can throw an exception in some circumstances.
     let target;
     try {
-      target = htmlTreeAsString(event.target as Node);
+      target = _htmlTreeAsString(event.target as Node);
     } catch (e) {
       target = '<unknown>';
     }
@@ -240,3 +240,79 @@ export function keypressEventHandler(): (event: Event) => void {
     }, debounceDuration) as any) as number;
   };
 }
+
+/**
+ * Given a child DOM element, returns a query-selector statement describing that
+ * and its ancestors
+ * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
+ * @returns generated DOM path
+ */
+function _htmlTreeAsString(elem: Node): string {
+  let currentElem: Node | null = elem;
+  const MAX_TRAVERSE_HEIGHT = 5;
+  const MAX_OUTPUT_LEN = 80;
+  const out = [];
+  let height = 0;
+  let len = 0;
+  const separator = ' > ';
+  const sepLength = separator.length;
+  let nextStr;
+
+  while (currentElem && height++ < MAX_TRAVERSE_HEIGHT) {
+    nextStr = _htmlElementAsString(currentElem as HTMLElement);
+    // bail out if
+    // - nextStr is the 'html' element
+    // - the length of the string that would be created exceeds MAX_OUTPUT_LEN
+    //   (ignore this limit if we are on the first iteration)
+    if (nextStr === 'html' || (height > 1 && len + out.length * sepLength + nextStr.length >= MAX_OUTPUT_LEN)) {
+      break;
+    }
+
+    out.push(nextStr);
+
+    len += nextStr.length;
+    currentElem = currentElem.parentNode;
+  }
+
+  return out.reverse().join(separator);
+}
+
+/**
+ * Returns a simple, query-selector representation of a DOM element
+ * e.g. [HTMLElement] => input#foo.btn[name=baz]
+ * @returns generated DOM path
+ */
+function _htmlElementAsString(elem: HTMLElement): string {
+  const out = [];
+  let className;
+  let classes;
+  let key;
+  let attr;
+  let i;
+
+  if (!elem || !elem.tagName) {
+    return '';
+  }
+
+  out.push(elem.tagName.toLowerCase());
+  if (elem.id) {
+    out.push(`#${elem.id}`);
+  }
+
+  className = elem.className;
+  if (className && isString(className)) {
+    classes = className.split(/\s+/);
+    for (i = 0; i < classes.length; i++) {
+      out.push(`.${classes[i]}`);
+    }
+  }
+  const attrWhitelist = ['type', 'name', 'title', 'alt'];
+  for (i = 0; i < attrWhitelist.length; i++) {
+    key = attrWhitelist[i];
+    attr = elem.getAttribute(key);
+    if (attr) {
+      out.push(`[${key}="${attr}"]`);
+    }
+  }
+  return out.join('');
+}

packages/integrations/src/angular.ts

@@ -40,7 +40,7 @@ export class Angular implements Integration {
    */
   public constructor(options: { angular?: any } = {}) {
     // tslint:disable-next-line: no-unsafe-any
-    this._angular = options.angular || getGlobalObject().angular;
+    this._angular = options.angular || getGlobalObject<any>().angular;
   }
 
   /**

packages/integrations/src/ember.ts

@@ -22,7 +22,7 @@ export class Ember implements Integration {
    */
   public constructor(options: { Ember?: any } = {}) {
     // tslint:disable-next-line: no-unsafe-any
-    this._Ember = options.Ember || getGlobalObject().Ember;
+    this._Ember = options.Ember || getGlobalObject<any>().Ember;
   }
 
   /**

packages/integrations/src/reportingobserver.ts

@@ -89,7 +89,7 @@ export class ReportingObserver implements Integration {
 
     this._getCurrentHub = getCurrentHub;
 
-    const observer = new (getGlobalObject()).ReportingObserver(this.handler.bind(this), {
+    const observer = new (getGlobalObject<any>()).ReportingObserver(this.handler.bind(this), {
       buffered: true,
       types: this._options.types,
     });

packages/integrations/src/vue.ts

@@ -38,7 +38,7 @@ export class Vue implements Integration {
    */
   public constructor(options: { Vue?: any; attachProps?: boolean } = {}) {
     // tslint:disable-next-line: no-unsafe-any
-    this._Vue = options.Vue || getGlobalObject().Vue;
+    this._Vue = options.Vue || getGlobalObject<any>().Vue;
     if (options.attachProps === false) {
       this._attachProps = false;
     }

packages/utils/src/misc.ts

@@ -1,7 +1,5 @@
 import { Event, Mechanism, WrappedFunction } from '@sentry/types';
 
-import { isString } from './is';
-
 /** Internal */
 interface SentryGlobal {
   __SENTRY__: {
@@ -37,8 +35,7 @@ const fallbackGlobalObject = {};
  *
  * @returns Global scope object
  */
-// tslint:disable:strict-type-predicates
-export function getGlobalObject<T extends Window | NodeJS.Global = any>(): T & SentryGlobal {
+export function getGlobalObject<T>(): T & SentryGlobal {
   return (isNodeEnv()
     ? global
     : typeof window !== 'undefined'
@@ -99,82 +96,6 @@ export function uuid4(): string {
   });
 }
 
-/**
- * Given a child DOM element, returns a query-selector statement describing that
- * and its ancestors
- * e.g. [HTMLElement] => body > div > input#foo.btn[name=baz]
- * @returns generated DOM path
- */
-export function htmlTreeAsString(elem: Node): string {
-  let currentElem: Node | null = elem;
-  const MAX_TRAVERSE_HEIGHT = 5;
-  const MAX_OUTPUT_LEN = 80;
-  const out = [];
-  let height = 0;
-  let len = 0;
-  const separator = ' > ';
-  const sepLength = separator.length;
-  let nextStr;
-
-  while (currentElem && height++ < MAX_TRAVERSE_HEIGHT) {
-    nextStr = htmlElementAsString(currentElem as HTMLElement);
-    // bail out if
-    // - nextStr is the 'html' element
-    // - the length of the string that would be created exceeds MAX_OUTPUT_LEN
-    //   (ignore this limit if we are on the first iteration)
-    if (nextStr === 'html' || (height > 1 && len + out.length * sepLength + nextStr.length >= MAX_OUTPUT_LEN)) {
-      break;
-    }
-
-    out.push(nextStr);
-
-    len += nextStr.length;
-    currentElem = currentElem.parentNode;
-  }
-
-  return out.reverse().join(separator);
-}
-
-/**
- * Returns a simple, query-selector representation of a DOM element
- * e.g. [HTMLElement] => input#foo.btn[name=baz]
- * @returns generated DOM path
- */
-export function htmlElementAsString(elem: HTMLElement): string {
-  const out = [];
-  let className;
-  let classes;
-  let key;
-  let attr;
-  let i;
-
-  if (!elem || !elem.tagName) {
-    return '';
-  }
-
-  out.push(elem.tagName.toLowerCase());
-  if (elem.id) {
-    out.push(`#${elem.id}`);
-  }
-
-  className = elem.className;
-  if (className && isString(className)) {
-    classes = className.split(/\s+/);
-    for (i = 0; i < classes.length; i++) {
-      out.push(`.${classes[i]}`);
-    }
-  }
-  const attrWhitelist = ['type', 'name', 'title', 'alt'];
-  for (i = 0; i < attrWhitelist.length; i++) {
-    key = attrWhitelist[i];
-    attr = elem.getAttribute(key);
-    if (attr) {
-      out.push(`[${key}="${attr}"]`);
-    }
-  }
-  return out.join('');
-}
-
 /**
  * Parses string form of URL into an object
  * // borrowed from https://tools.ietf.org/html/rfc3986#appendix-B