switch to using global evt processor instead of async approach

Author: Lms24

packages/svelte/src/sdk.ts

@@ -1,5 +1,6 @@
 import { addGlobalEventProcessor, BrowserOptions, init as browserInit, SDK_VERSION } from '@sentry/browser';
-import { getDomElement, SyncPromise } from '@sentry/utils';
+import type { EventProcessor } from '@sentry/types';
+import { getDomElement } from '@sentry/utils';
 /**
  * Inits the Svelte SDK
  */
@@ -18,29 +19,34 @@ export function init(options: BrowserOptions): void {
 
   browserInit(options);
 
-  void detectAndReportSvelteKit();
+  detectAndReportSvelteKit();
 }
 
 /**
- * Detects if the SDK is initialized in a SvelteKit frontend, in which case
- * we add a global event processor to add it as an event.module entry to
- * outgoing events.
+ * Adds a global event processor to detect if the SDK is initialized in a SvelteKit frontend,
+ * in which case add SvelteKit an event.modules entry to outgoing events.
+ * SvelteKit detection is performed only once, when the event processor is called for the
+ * first time. We cannot perform this check upfront (directly when init is called) because
+ * at this time, the HTML element might not yet be accessible.
  */
-export function detectAndReportSvelteKit(): PromiseLike<void> {
-  // We have to run this async because only after the SDK is initialized,
-  // the HTML element is available
-  return new SyncPromise(resolve => {
-    if (isSvelteKitApp()) {
-      addGlobalEventProcessor(event => {
-        event.modules = {
-          svelteKit: '1.0',
-          ...event.modules,
-        };
-        return event;
-      });
+export function detectAndReportSvelteKit(): void {
+  let detectedSvelteKit: boolean | undefined = undefined;
+
+  const svelteKitProcessor: EventProcessor = event => {
+    if (detectedSvelteKit === undefined) {
+      detectedSvelteKit = isSvelteKitApp();
+    }
+    if (detectedSvelteKit) {
+      event.modules = {
+        svelteKit: '1.0',
+        ...event.modules,
+      };
     }
-    resolve();
-  });
+    return event;
+  };
+  svelteKitProcessor.id = 'svelteKitProcessor';
+
+  addGlobalEventProcessor(svelteKitProcessor);
 }
 
 /**
@@ -50,6 +56,6 @@ export function detectAndReportSvelteKit(): PromiseLike<void> {
  *
  * @see https://github.com/sveltejs/kit/issues/307 for more information
  */
-function isSvelteKitApp(): boolean {
+export function isSvelteKitApp(): boolean {
   return getDomElement('div#svelte-announcer') !== null;
 }

packages/svelte/test/sdk.test.ts

@@ -1,9 +1,14 @@
 import { addGlobalEventProcessor, init as browserInitRaw, SDK_VERSION } from '@sentry/browser';
+import { EventProcessor } from '@sentry/types';
 
-import { detectAndReportSvelteKit, init as svelteInit } from '../src/sdk';
+import { detectAndReportSvelteKit, init as svelteInit, isSvelteKitApp } from '../src/sdk';
 
 const browserInit = browserInitRaw as jest.Mock;
 const addGlobalEventProcessorFunction = addGlobalEventProcessor as jest.Mock;
+let passedEventProcessor: EventProcessor | undefined;
+addGlobalEventProcessorFunction.mockImplementation(proc => {
+  passedEventProcessor = proc;
+});
 
 jest.mock('@sentry/browser');
 
@@ -33,23 +38,52 @@ describe('Initialize Svelte SDk', () => {
 });
 
 describe('detectAndReportSvelteKit()', () => {
+  const originalHtmlBody = document.body.innerHTML;
   afterEach(() => {
     jest.clearAllMocks();
+    document.body.innerHTML = originalHtmlBody;
+    passedEventProcessor = undefined;
   });
 
-  it('detects SvelteKit correctly and adds a global event processor', async () => {
-    document.body.innerHTML += '<div id="svelte-announcer">Navigated to Home</div>';
-
-    await detectAndReportSvelteKit();
+  it('registers a global event processor', async () => {
+    detectAndReportSvelteKit();
 
     expect(addGlobalEventProcessorFunction).toHaveBeenCalledTimes(1);
+    expect(passedEventProcessor?.id).toEqual('svelteKitProcessor');
+  });
+
+  it('adds "SvelteKit" as a module to the event, if SvelteKit was detected', () => {
+    document.body.innerHTML += '<div id="svelte-announcer">Home</div>';
+    detectAndReportSvelteKit();
+
+    const processedEvent = passedEventProcessor && passedEventProcessor({} as unknown as any, {});
+
+    expect(processedEvent).toBeDefined();
+    expect(processedEvent).toEqual({ modules: { svelteKit: '1.0' } });
   });
 
-  it("doesn't add global event processor, if SvelteKit was not detected", async () => {
+  it("doesn't add anything to the event, if SvelteKit was not detected", () => {
     document.body.innerHTML = '';
+    detectAndReportSvelteKit();
 
-    await detectAndReportSvelteKit();
+    const processedEvent = passedEventProcessor && passedEventProcessor({} as unknown as any, {});
 
-    expect(addGlobalEventProcessorFunction).not.toHaveBeenCalled();
+    expect(processedEvent).toBeDefined();
+    expect(processedEvent).toEqual({});
+  });
+
+  describe('isSvelteKitApp()', () => {
+    it('returns true if the svelte-announcer div is present', () => {
+      document.body.innerHTML += '<div id="svelte-announcer">Home</div>';
+      expect(isSvelteKitApp()).toBe(true);
+    });
+    it('returns false if the svelte-announcer div is not present (but similar elements)', () => {
+      document.body.innerHTML += '<div id="svelte-something">Home</div>';
+      expect(isSvelteKitApp()).toBe(false);
+    });
+    it('returns false if no div is present', () => {
+      document.body.innerHTML = '';
+      expect(isSvelteKitApp()).toBe(false);
+    });
   });
 });