getsentry · mydea · Sep 4, 2024 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024
diff --git a/dev-packages/browser-integration-tests/suites/feedback/attachTo/init.js b/dev-packages/browser-integration-tests/suites/feedback/attachTo/init.js
@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/browser';
+// Import this separately so that generatePlugin can handle it for CDN scenarios
+import { feedbackIntegration } from '@sentry/browser';
+
+const feedback = feedbackIntegration({
+  autoInject: false,
+});
+
+window.Sentry = Sentry;
+window.feedback = feedback;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [feedback],
+});
+
+feedback.attachTo('#custom-feedback-buttom');
diff --git a/dev-packages/browser-integration-tests/suites/feedback/attachTo/template.html b/dev-packages/browser-integration-tests/suites/feedback/attachTo/template.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button type="button" id="custom-feedback-buttom">Show feedback!</button>
+  </body>
+</html>
diff --git a/dev-packages/browser-integration-tests/suites/feedback/attachTo/test.ts b/dev-packages/browser-integration-tests/suites/feedback/attachTo/test.ts
@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+
+import { TEST_HOST, sentryTest } from '../../../utils/fixtures';
+import { envelopeRequestParser, getEnvelopeType, shouldSkipFeedbackTest } from '../../../utils/helpers';
+
+sentryTest('should capture feedback with custom button', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipFeedbackTest()) {
+    sentryTest.skip();
+  }
+
+  const feedbackRequestPromise = page.waitForResponse(res => {
+    const req = res.request();
+
+    const postData = req.postData();
+    if (!postData) {
+      return false;
+    }
+
+    try {
+      return getEnvelopeType(req) === 'feedback';
+    } catch (err) {
+      return false;
+    }
+  });
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+  await page.locator('#custom-feedback-buttom').click();
+  await page.waitForSelector(':visible:text-is("Report a Bug")');
+
+  expect(await page.locator(':visible:text-is("Report a Bug")').count()).toEqual(1);
+  await page.locator('[name="name"]').fill('Jane Doe');
+  await page.locator('[name="email"]').fill('janedoe@example.org');
+  await page.locator('[name="message"]').fill('my example feedback');
+  await page.locator('[data-sentry-feedback] .btn--primary').click();
+
+  const feedbackEvent = envelopeRequestParser((await feedbackRequestPromise).request());
+  expect(feedbackEvent).toEqual({
+    type: 'feedback',
+    breadcrumbs: expect.any(Array),
+    contexts: {
+      feedback: {
+        contact_email: 'janedoe@example.org',
+        message: 'my example feedback',
+        name: 'Jane Doe',
+        source: 'widget',
+        url: `${TEST_HOST}/index.html`,
+      },
+      trace: {
+        trace_id: expect.stringMatching(/\w{32}/),
+        span_id: expect.stringMatching(/\w{16}/),
+      },
+    },
+    level: 'info',
+    timestamp: expect.any(Number),
+    event_id: expect.stringMatching(/\w{32}/),
+    environment: 'production',
+    tags: {},
+    sdk: {
+      integrations: expect.arrayContaining(['Feedback']),
+      version: expect.any(String),
+      name: 'sentry.javascript.browser',
+      packages: expect.anything(),
+    },
+    request: {
+      url: `${TEST_HOST}/index.html`,
+      headers: {
+        'User-Agent': expect.stringContaining(''),
+      },
+    },
+    platform: 'javascript',
+  });
+});
diff --git a/dev-packages/browser-integration-tests/suites/feedback/logger/init.js b/dev-packages/browser-integration-tests/suites/feedback/logger/init.js
@@ -0,0 +1,19 @@
+import * as Sentry from '@sentry/browser';
+// Import this separately so that generatePlugin can handle it for CDN scenarios
+import { feedbackIntegration } from '@sentry/browser';
+
+const feedback = feedbackIntegration({
+  autoInject: false,
+});
+
+window.Sentry = Sentry;
+window.feedback = feedback;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  debug: true,
+  integrations: [feedback],
+});
+
+// This should log an error!
+feedback.attachTo('#does-not-exist');
diff --git a/dev-packages/browser-integration-tests/suites/feedback/logger/test.ts b/dev-packages/browser-integration-tests/suites/feedback/logger/test.ts
@@ -0,0 +1,36 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../utils/fixtures';
+import { shouldSkipFeedbackTest } from '../../../utils/helpers';
+
+/**
+ * This test is mostly relevant for ensuring that the logger works in all combinations of CDN bundles.
+ * Even if feedback is included via the CDN, this test ensures that the logger is working correctly.
+ */
+sentryTest('should log error correctly', async ({ getLocalTestUrl, page }) => {
+  // In minified bundles we do not have logger messages, so we skip the test
+  if (shouldSkipFeedbackTest() || (process.env.PW_BUNDLE || '').includes('_min')) {
+    sentryTest.skip();
+  }
+
+  const messages: string[] = [];
+
+  page.on('console', message => {
+    messages.push(message.text());
+  });
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+
+  expect(messages).toContain('Sentry Logger [log]: Integration installed: Feedback');
+  expect(messages).toContain('Sentry Logger [error]: [Feedback] Unable to attach to target element');
+});
diff --git a/...es/browser-integration-tests/suites/integrations/httpclient/httpClientIntegration/init.js b/...es/browser-integration-tests/suites/integrations/httpclient/httpClientIntegration/init.js
diff --git a/...browser-integration-tests/suites/integrations/httpclient/httpClientIntegration/subject.js b/...browser-integration-tests/suites/integrations/httpclient/httpClientIntegration/subject.js
diff --git a/...es/browser-integration-tests/suites/integrations/httpclient/httpClientIntegration/test.ts b/...es/browser-integration-tests/suites/integrations/httpclient/httpClientIntegration/test.ts
@@ -0,0 +1,18 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = Sentry.replayIntegration({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+  minReplayDuration: 0,
+});
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  debug: true,
+
+  integrations: [window.Replay],
+});
@@ -0,0 +1,36 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../utils/fixtures';
+import { shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
+
+sentryTest('should output logger messages', async ({ getLocalTestPath, page }) => {
+  // In minified bundles we do not have logger messages, so we skip the test
+  if (shouldSkipReplayTest() || (process.env.PW_BUNDLE || '').includes('_min')) {
+    sentryTest.skip();
+  }
+
+  const messages: string[] = [];
+
+  page.on('console', message => {
+    messages.push(message.text());
+  });
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await Promise.all([page.goto(url), reqPromise0]);
+
+  expect(messages).toContain('Sentry Logger [log]: Integration installed: Replay');
+  expect(messages).toContain('Sentry Logger [info]: [Replay]  Creating new session');
+  expect(messages).toContain('Sentry Logger [info]: [Replay]  Starting replay in session mode');
+  expect(messages).toContain('Sentry Logger [info]: [Replay]  Using compression worker');
+});
diff --git a/dev-packages/browser-integration-tests/utils/generatePlugin.ts b/dev-packages/browser-integration-tests/utils/generatePlugin.ts
@@ -30,7 +30,6 @@ const useLoader = bundleKey.startsWith('loader');
 const IMPORTED_INTEGRATION_CDN_BUNDLE_PATHS: Record<string, string> = {
   httpClientIntegration: 'httpclient',
   captureConsoleIntegration: 'captureconsole',
-  CaptureConsole: 'captureconsole',
   debugIntegration: 'debug',
   rewriteFramesIntegration: 'rewriteframes',
   contextLinesIntegration: 'contextlines',

diff --git a/packages/utils/src/logger.ts b/packages/utils/src/logger.ts
@@ -1,7 +1,7 @@
 import type { ConsoleLevel } from '@sentry/types';
 
 import { DEBUG_BUILD } from './debug-build';
-import { GLOBAL_OBJ } from './worldwide';
+import { GLOBAL_OBJ, getGlobalSingleton } from './worldwide';
 
 /** Prefix for logging strings */
 const PREFIX = 'Sentry Logger ';
@@ -97,4 +97,8 @@ function makeLogger(): Logger {
   return logger as Logger;
 }
 
-export const logger = makeLogger();
+/**
+ * This is a logger singleton which either logs things or no-ops if logging is not enabled.
+ * The logger is a singleton on the carrier, to ensure that a consistent logger is used throughout the SDK.
+ */
+export const logger = getGlobalSingleton('logger', makeLogger);
diff --git a/packages/utils/src/worldwide.ts b/packages/utils/src/worldwide.ts
@@ -15,6 +15,7 @@
 import type { Client, MetricsAggregator, Scope } from '@sentry/types';
 
 import type { SdkSource } from './env';
+import type { logger } from './logger';
 import { SDK_VERSION } from './version';
 
 interface SentryCarrier {
@@ -25,6 +26,7 @@ interface SentryCarrier {
   defaultIsolationScope?: Scope;
   defaultCurrentScope?: Scope;
   globalMetricsAggregators?: WeakMap<Client, MetricsAggregator> | undefined;
+  logger?: typeof logger;
 
   /** Overwrites TextEncoder used in `@sentry/utils`, need for `react-native@0.73` and older */
   encodePolyfill?: (input: string) => Uint8Array;