chore(svelte): Detect SvelteKit usage

Author: Lms24

packages/svelte/src/sdk.ts

@@ -1,5 +1,5 @@
-import { BrowserOptions, init as browserInit, SDK_VERSION } from '@sentry/browser';
-
+import { addGlobalEventProcessor, BrowserOptions, init as browserInit, SDK_VERSION } from '@sentry/browser';
+import { getDomElement } from '@sentry/utils';
 /**
  * Inits the Svelte SDK
  */
@@ -17,4 +17,35 @@ export function init(options: BrowserOptions): void {
   };
 
   browserInit(options);
+
+  detectSvelteKit();
+}
+
+/**
+ * Detects if the SDK is initialized in a SvelteKit frontend, in which case
+ * we add a global event processor to add it as a module to outgoing events.
+ */
+function detectSvelteKit(): void {
+  setTimeout(() => {
+    if (isSvelteKitApp()) {
+      addGlobalEventProcessor(event => {
+        event.modules = {
+          svelteKit: '1.0',
+          ...event.modules,
+        };
+        return event;
+      });
+    }
+  }, 0);
+}
+
+/**
+ * To actually detect a SvelteKit frontend, we search the DOM for a special
+ * div that's inserted by SvelteKit when the page is rendered. It's identifyed
+ * by 'svelte-announcer' and used to improve page accessibility.
+ *
+ * @see https://github.com/sveltejs/kit/issues/307 for more information
+ */
+function isSvelteKitApp(): boolean {
+  return getDomElement('div#svelte-announcer') !== null;
 }

packages/tracing/src/browser/browsertracing.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 import { Hub } from '@sentry/hub';
 import { EventProcessor, Integration, Transaction, TransactionContext } from '@sentry/types';
-import { getGlobalObject, logger, parseBaggageSetMutability } from '@sentry/utils';
+import { getDomElement, getGlobalObject, logger, parseBaggageSetMutability } from '@sentry/utils';
 
 import { startIdleTransaction } from '../hubextensions';
 import { DEFAULT_FINAL_TIMEOUT, DEFAULT_IDLE_TIMEOUT } from '../idletransaction';
@@ -294,13 +294,6 @@ export function extractTraceDataFromMetaTags(): Partial<TransactionContext> | un
 
 /** Returns the value of a meta tag */
 export function getMetaContent(metaName: string): string | null {
-  const globalObject = getGlobalObject<Window>();
-
-  // DOM/querySelector is not available in all environments
-  if (globalObject.document && globalObject.document.querySelector) {
-    const el = globalObject.document.querySelector(`meta[name=${metaName}]`);
-    return el ? el.getAttribute('content') : null;
-  } else {
-    return null;
-  }
+  const metaTag = getDomElement(`meta[name=${metaName}]`);
+  return metaTag ? metaTag.getAttribute('content') : null;
 }

packages/utils/src/browser.ts

@@ -122,3 +122,21 @@ export function getLocationHref(): string {
     return '';
   }
 }
+
+/**
+ * Gets a DOM element via document.querySelector.
+ *
+ * This wrapper will first check for the existance of the function before
+ * actually calling it so that we don't have to take care of this check,
+ * every time we want to access the DOM.
+ * Reason: DOM/querySelector is not available in all environments
+ *
+ * @param selector the selector string passed on to document.querySelector
+ */
+export function getDomElement(selector: string): Element | null {
+  const global = getGlobalObject<Window>();
+  if (global.document && global.document.querySelector) {
+    return global.document.querySelector(selector);
+  }
+  return null;
+}

packages/utils/test/browser.test.ts

@@ -1,6 +1,6 @@
 import { JSDOM } from 'jsdom';
 
-import { htmlTreeAsString } from '../src/browser';
+import { getDomElement, htmlTreeAsString } from '../src/browser';
 
 beforeAll(() => {
   const dom = new JSDOM();
@@ -45,3 +45,13 @@ describe('htmlTreeAsString', () => {
     );
   });
 });
+
+describe('getDomElement', () => {
+  it('returns the element for a given query selector', () => {
+    document.head.innerHTML = '<div id="mydiv">Hello</div>';
+    const el = getDomElement('div#mydiv');
+    expect(el).toBeDefined();
+    expect(el?.tagName).toEqual('DIV');
+    expect(el?.id).toEqual('mydiv');
+  });
+});