@newrelic/browser-agent 1.238.0 → 1.239.0

package/src/features/jserrors/aggregate/index.js

@@ -18,7 +18,6 @@ import { now } from '../../../common/timing/now'
 import { globalScope } from '../../../common/constants/runtime'
 
 import { FEATURE_NAME } from '../constants'
-import { drain } from '../../../common/drain/drain'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { AggregateBase } from '../../utils/aggregate-base'
 
@@ -35,7 +34,7 @@ export class Aggregate extends AggregateBase {
     this.observedAt = {}
     this.pageviewReported = {}
     this.errorCache = {}
-    this.currentBody
+    this.currentBody = undefined
     this.errorOnPage = false
 
     // this will need to change to match whatever ee we use in the instrument
@@ -63,7 +62,7 @@ export class Aggregate extends AggregateBase {
       scheduler.stopTimer(true)
     }, this.featureName, this.ee)
 
-    drain(this.agentIdentifier, this.featureName)
+    this.drain()
   }
 
   onHarvestStarted (options) {
@@ -74,7 +73,7 @@ export class Aggregate extends AggregateBase {
       this.currentBody = body
     }
 
-    var payload = { body: body, qs: {} }
+    var payload = { body, qs: {} }
     var releaseIds = stringify(getRuntime(this.agentIdentifier).releaseIds)
 
     if (releaseIds !== '{}') {
@@ -196,7 +195,7 @@ export class Aggregate extends AggregateBase {
     params.firstOccurrenceTimestamp = this.observedAt[bucketHash]
 
     var type = internal ? 'ierr' : 'err'
-    var newMetrics = { time: time }
+    var newMetrics = { time }
 
     // sr, stn and spa aggregators listen to this event - stn sends the error in its payload,
     // and spa annotates the error with interaction info

package/src/features/metrics/aggregate/framework-detection.js

@@ -2,15 +2,30 @@ import { isBrowserScope } from '../../../common/constants/runtime'
 
 const FRAMEWORKS = {
   REACT: 'React',
+  NEXTJS: 'NextJS',
+
+  VUE: 'Vue',
+  NUXTJS: 'NuxtJS',
+
   ANGULAR: 'Angular',
+  ANGULARUNIVERSAL: 'AngularUniversal',
+
+  SVELTE: 'Svelte',
+  SVELTEKIT: 'SvelteKit',
+
+  PREACT: 'Preact',
+  PREACTSSR: 'PreactSSR',
+
   ANGULARJS: 'AngularJS',
   BACKBONE: 'Backbone',
   EMBER: 'Ember',
-  VUE: 'Vue',
   METEOR: 'Meteor',
   ZEPTO: 'Zepto',
   JQUERY: 'Jquery',
-  MOOTOOLS: 'MooTools'
+  MOOTOOLS: 'MooTools',
+  QWIK: 'Qwik',
+
+  ELECTRON: 'Electron'
 }
 
 export function getFrameworks () {
@@ -18,16 +33,42 @@ export function getFrameworks () {
 
   const frameworks = []
   try {
-    if (detectReact()) frameworks.push(FRAMEWORKS.REACT)
+    if (detectReact()) {
+      frameworks.push(FRAMEWORKS.REACT)
+
+      if (detectNextJS()) frameworks.push(FRAMEWORKS.NEXTJS)
+    }
+    if (detectVue()) {
+      frameworks.push(FRAMEWORKS.VUE)
+
+      if (detectNuxtJS()) frameworks.push(FRAMEWORKS.NUXTJS)
+    }
+    if (detectAngular()) {
+      frameworks.push(FRAMEWORKS.ANGULAR)
+
+      if (detectAngularUniversal()) frameworks.push(FRAMEWORKS.ANGULARUNIVERSAL)
+    }
+    if (detectSvelte()) {
+      frameworks.push(FRAMEWORKS.SVELTE)
+
+      if (detectSvelteKit()) frameworks.push(FRAMEWORKS.SVELTEKIT)
+    }
+    if (detectPreact()) {
+      frameworks.push(FRAMEWORKS.PREACT)
+
+      if (detectPreactSSR()) frameworks.push(FRAMEWORKS.PREACTSSR)
+    }
+
     if (detectAngularJs()) frameworks.push(FRAMEWORKS.ANGULARJS)
-    if (detectAngular()) frameworks.push(FRAMEWORKS.ANGULAR)
     if (Object.prototype.hasOwnProperty.call(window, 'Backbone')) frameworks.push(FRAMEWORKS.BACKBONE)
     if (Object.prototype.hasOwnProperty.call(window, 'Ember')) frameworks.push(FRAMEWORKS.EMBER)
-    if (Object.prototype.hasOwnProperty.call(window, 'Vue')) frameworks.push(FRAMEWORKS.VUE)
     if (Object.prototype.hasOwnProperty.call(window, 'Meteor')) frameworks.push(FRAMEWORKS.METEOR)
     if (Object.prototype.hasOwnProperty.call(window, 'Zepto')) frameworks.push(FRAMEWORKS.ZEPTO)
     if (Object.prototype.hasOwnProperty.call(window, 'jQuery')) frameworks.push(FRAMEWORKS.JQUERY)
     if (Object.prototype.hasOwnProperty.call(window, 'MooTools')) frameworks.push(FRAMEWORKS.MOOTOOLS)
+    if (Object.prototype.hasOwnProperty.call(window, 'qwikevents')) frameworks.push(FRAMEWORKS.QWIK)
+
+    if (detectElectron()) frameworks.push(FRAMEWORKS.ELECTRON)
   } catch (err) {
     // Possibly not supported
   }
@@ -53,6 +94,86 @@ function detectReact () {
   }
 }
 
+function detectNextJS () {
+  // React SSR
+  try {
+    return Object.prototype.hasOwnProperty.call(window, 'next') &&
+    Object.prototype.hasOwnProperty.call(window.next, 'version')
+  } catch (err) {
+    return false
+  }
+}
+
+function detectVue () {
+  try {
+    return Object.prototype.hasOwnProperty.call(window, 'Vue')
+  } catch (err) {
+    return false
+  }
+}
+
+function detectNuxtJS () {
+  // Vue SSR
+  try {
+    return Object.prototype.hasOwnProperty.call(window, '$nuxt') &&
+      Object.prototype.hasOwnProperty.call(window.$nuxt, 'nuxt')
+  } catch (err) {
+    return false
+  }
+}
+
+function detectAngular () {
+  try {
+    return Object.prototype.hasOwnProperty.call(window, 'ng') ||
+      document.querySelector('[ng-version]')
+  } catch (err) {
+    return false
+  }
+}
+
+function detectAngularUniversal () {
+  // Anguler SSR
+  try {
+    return document.querySelector('[ng-server-context]')
+  } catch (err) {
+    return false
+  }
+}
+
+function detectSvelte () {
+  try {
+    return Object.prototype.hasOwnProperty.call(window, '__svelte')
+  } catch (err) {
+    return false
+  }
+}
+
+function detectSvelteKit () {
+  // Svelte SSR
+  try {
+    return !!Object.keys(window).find(prop => prop.startsWith('__sveltekit'))
+  } catch (err) {
+    return false
+  }
+}
+
+function detectPreact () {
+  try {
+    return Object.prototype.hasOwnProperty.call(window, 'preact')
+  } catch (err) {
+    return false
+  }
+}
+
+function detectPreactSSR () {
+  // Svelte SSR
+  try {
+    return document.querySelector('script[type="__PREACT_CLI_DATA__"]')
+  } catch (err) {
+    return false
+  }
+}
+
 function detectAngularJs () {
   try {
     return Object.prototype.hasOwnProperty.call(window, 'angular') ||
@@ -63,10 +184,10 @@ function detectAngularJs () {
   }
 }
 
-function detectAngular () {
+function detectElectron () {
   try {
-    return Object.prototype.hasOwnProperty.call(window, 'ng') ||
-      document.querySelector('[ng-version]')
+    return typeof navigator === 'object' && typeof navigator.userAgent === 'string' &&
+      navigator.userAgent.indexOf('Electron') >= 0
   } catch (err) {
     return false
   }

package/src/features/metrics/aggregate/framework-detection.test.js

@@ -23,125 +23,252 @@ test('framework detection should not happen in non-browser scope', async () => {
   delete global.React
 })
 
-test('should detect react from global React property', () => {
-  global.React = {}
+describe('react', () => {
+  test('should detect react from global React property', () => {
+    global.React = {}
 
-  expect(getFrameworks()).toEqual(['React'])
+    expect(getFrameworks()).toEqual(['React'])
 
-  delete global.React
-})
+    delete global.React
+  })
 
-test('should detect react from global ReactDOM property', () => {
-  global.ReactDOM = {}
+  test('should detect react from global ReactDOM property', () => {
+    global.ReactDOM = {}
 
-  expect(getFrameworks()).toEqual(['React'])
+    expect(getFrameworks()).toEqual(['React'])
 
-  delete global.ReactDOM
-})
+    delete global.ReactDOM
+  })
 
-test('should detect react from global ReactRedux property', () => {
-  global.ReactRedux = {}
+  test('should detect react from global ReactRedux property', () => {
+    global.ReactRedux = {}
 
-  expect(getFrameworks()).toEqual(['React'])
+    expect(getFrameworks()).toEqual(['React'])
 
-  delete global.ReactRedux
-})
+    delete global.ReactRedux
+  })
 
-test('should detect react from html [data-reactroot] property', () => {
-  document.body.innerHTML = '<div data-reactroot=""></div>'
+  test('should detect react from html [data-reactroot] property', () => {
+    document.body.innerHTML = '<div data-reactroot=""></div>'
 
-  expect(getFrameworks()).toEqual(['React'])
-})
+    expect(getFrameworks()).toEqual(['React'])
+  })
 
-test('should detect react from html [data-reactid] property', () => {
-  document.body.innerHTML = '<div data-reactid=""></div>'
+  test('should detect react from html [data-reactid] property', () => {
+    document.body.innerHTML = '<div data-reactid=""></div>'
 
-  expect(getFrameworks()).toEqual(['React'])
-})
+    expect(getFrameworks()).toEqual(['React'])
+  })
 
-test('should detect react from element _reactRootContainer property', () => {
-  const element = document.createElement('div')
-  element._reactRootContainer = {}
-  document.body.innerHTML = '<html><body></body></html>'
-  document.body.appendChild(element)
+  test('should detect react from element _reactRootContainer property', () => {
+    const element = document.createElement('div')
+    element._reactRootContainer = {}
+    document.body.innerHTML = '<html><body></body></html>'
+    document.body.appendChild(element)
 
-  expect(getFrameworks()).toEqual(['React'])
-})
+    expect(getFrameworks()).toEqual(['React'])
+  })
 
-test('should detect angularjs from global angular property', () => {
-  global.angular = {}
+  describe('nextjs', () => {
+    test('should not detect nextjs if react is not detected', () => {
+      global.next = { version: 'test' }
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
+      expect(getFrameworks()).toEqual([])
 
-  delete global.angular
-})
+      delete global.next
+    })
+
+    test('should detect nextjs if global is set', () => {
+      global.React = {}
+      global.next = { version: 'test' }
 
-test('should detect angularjs from html .ng-binding property', () => {
-  document.body.innerHTML = '<div class="ng-binding"></div>'
+      expect(getFrameworks()).toEqual(['React', 'NextJS'])
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
+      delete global.React
+      delete global.next
+    })
+  })
 })
 
-test('should detect angularjs from html [ng-app] property', () => {
-  document.body.innerHTML = '<div ng-app=""></div>'
+describe('vue', () => {
+  test('should detect vue from global Vue property', () => {
+    global.Vue = {}
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
-})
+    expect(getFrameworks()).toEqual(['Vue'])
 
-test('should detect angularjs from html [data-ng-app] property', () => {
-  document.body.innerHTML = '<div data-ng-app=""></div>'
+    delete global.Vue
+  })
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
-})
+  describe('nuxtjs', () => {
+    test('should not detect nuxtjs if vue is not detected', () => {
+      global.$nuxt = { nuxt: {} }
 
-test('should detect angularjs from html [ng-controller] property', () => {
-  document.body.innerHTML = '<div ng-controller=""></div>'
+      expect(getFrameworks()).toEqual([])
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
-})
+      delete global.$nuxt
+    })
+
+    test('should detect nuxtjs if global is set', () => {
+      global.Vue = {}
+      global.$nuxt = { nuxt: {} }
 
-test('should detect angularjs from html [data-ng-controller] property', () => {
-  document.body.innerHTML = '<div data-ng-controller=""></div>'
+      expect(getFrameworks()).toEqual(['Vue', 'NuxtJS'])
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
+      delete global.Vue
+      delete global.$nuxt
+    })
+  })
 })
 
-test('should detect angularjs from html [ng-repeat] property', () => {
-  document.body.innerHTML = '<div ng-repeat=""></div>'
+describe('angular', () => {
+  test('should detect angular from global ng property', () => {
+    global.ng = {}
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
-})
+    expect(getFrameworks()).toEqual(['Angular'])
 
-test('should detect angularjs from html [data-ng-repeat] property', () => {
-  document.body.innerHTML = '<div data-ng-repeat=""></div>'
+    delete global.ng
+  })
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
-})
+  test('should detect angular from html [ng-version] property', () => {
+    document.body.innerHTML = '<div ng-version=""></div>'
+
+    expect(getFrameworks()).toEqual(['Angular'])
+  })
+
+  describe('angular universal', () => {
+    test('should not detect angular universal if angular is not detected', () => {
+      document.body.innerHTML = '<div ng-server-context=""></div>'
+
+      expect(getFrameworks()).toEqual([])
+    })
 
-test('should detect angularjs from angular.js script element', () => {
-  document.body.innerHTML = `<script src="${faker.internet.url()}/angular.js"></script>`
+    test('should detect nuxtjs if global is set', () => {
+      document.body.innerHTML = '<div ng-version="" ng-server-context=""></div>'
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
+      expect(getFrameworks()).toEqual(['Angular', 'AngularUniversal'])
+    })
+  })
 })
 
-test('should detect angularjs from angular.min.js script element', () => {
-  document.body.innerHTML = `<script src="${faker.internet.url()}/angular.min.js"></script>`
+describe('svelte', () => {
+  test('should detect svelte from global __svelte property', () => {
+    global.__svelte = {}
+
+    expect(getFrameworks()).toEqual(['Svelte'])
+
+    delete global.__svelte
+  })
+
+  describe('sveltekit', () => {
+    test('should not detect sveltekit if svelte is not detected', () => {
+      global.__sveltekit_1234 = { }
 
-  expect(getFrameworks()).toEqual(['AngularJS'])
+      expect(getFrameworks()).toEqual([])
+
+      delete global.__sveltekit_1234
+    })
+
+    test('should detect sveltekit if global is set', () => {
+      global.__svelte = {}
+      global.__sveltekit_4567 = {}
+
+      expect(getFrameworks()).toEqual(['Svelte', 'SvelteKit'])
+
+      delete global.__svelte
+      delete global.__sveltekit_4567
+    })
+  })
 })
 
-test('should detect angular from global ng property', () => {
-  global.ng = {}
+describe('preact', () => {
+  test('should detect preact from global preact property', () => {
+    global.preact = {}
+
+    expect(getFrameworks()).toEqual(['Preact'])
+
+    delete global.preact
+  })
+
+  describe('preact ssr', () => {
+    test('should not detect preact ssr if preact is not detected', () => {
+      document.body.innerHTML = '<script type="__PREACT_CLI_DATA__"></div>'
 
-  expect(getFrameworks()).toEqual(['Angular'])
+      expect(getFrameworks()).toEqual([])
+    })
 
-  delete global.ng
+    test('should detect sveltekit if global is set', () => {
+      global.preact = {}
+      document.body.innerHTML = '<script type="__PREACT_CLI_DATA__"></div>'
+
+      expect(getFrameworks()).toEqual(['Preact', 'PreactSSR'])
+
+      delete global.preact
+    })
+  })
 })
 
-test('should detect angular from html [ng-version] property', () => {
-  document.body.innerHTML = '<div ng-version=""></div>'
+describe('angularjs', () => {
+  test('should detect angularjs from global angular property', () => {
+    global.angular = {}
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+
+    delete global.angular
+  })
+
+  test('should detect angularjs from html .ng-binding property', () => {
+    document.body.innerHTML = '<div class="ng-binding"></div>'
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
+
+  test('should detect angularjs from html [ng-app] property', () => {
+    document.body.innerHTML = '<div ng-app=""></div>'
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
+
+  test('should detect angularjs from html [data-ng-app] property', () => {
+    document.body.innerHTML = '<div data-ng-app=""></div>'
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
+
+  test('should detect angularjs from html [ng-controller] property', () => {
+    document.body.innerHTML = '<div ng-controller=""></div>'
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
+
+  test('should detect angularjs from html [data-ng-controller] property', () => {
+    document.body.innerHTML = '<div data-ng-controller=""></div>'
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
+
+  test('should detect angularjs from html [ng-repeat] property', () => {
+    document.body.innerHTML = '<div ng-repeat=""></div>'
 
-  expect(getFrameworks()).toEqual(['Angular'])
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
+
+  test('should detect angularjs from html [data-ng-repeat] property', () => {
+    document.body.innerHTML = '<div data-ng-repeat=""></div>'
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
+
+  test('should detect angularjs from angular.js script element', () => {
+    document.body.innerHTML = `<script src="${faker.internet.url()}/angular.js"></script>`
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
+
+  test('should detect angularjs from angular.min.js script element', () => {
+    document.body.innerHTML = `<script src="${faker.internet.url()}/angular.min.js"></script>`
+
+    expect(getFrameworks()).toEqual(['AngularJS'])
+  })
 })
 
 test('should detect backbone from global Backbone property', () => {
@@ -160,14 +287,6 @@ test('should detect ember from global Ember property', () => {
   delete global.Ember
 })
 
-test('should detect vue from global Vue property', () => {
-  global.Vue = {}
-
-  expect(getFrameworks()).toEqual(['Vue'])
-
-  delete global.Vue
-})
-
 test('should detect meteor from global Meteor property', () => {
   global.Meteor = {}
 
@@ -199,3 +318,15 @@ test('should detect mootools from global MooTools property', () => {
 
   delete global.MooTools
 })
+
+test('should detect electron from user agent', () => {
+  const currentNavigator = global.navigator
+  Object.defineProperty(global, 'navigator', {
+    value: { userAgent: 'This is a test; Electron some version; foobar' },
+    writable: true
+  })
+
+  expect(getFrameworks()).toEqual(['Electron'])
+
+  global.navigator = currentNavigator
+})