meta: Update CHANGELOG for version 7.62.0

.craft.yml

@@ -1,6 +1,11 @@
 minVersion: '0.23.1'
 changelogPolicy: simple
 preReleaseCommand: bash scripts/craft-pre-release.sh
+statusProvider:
+  name: github
+  config:
+    contexts:
+      - job_required_jobs_passed
 targets:
   # NPM Targets
   ## 1. Base Packages, node or browser SDKs depend on

.github/workflows/build.yml

@@ -599,7 +599,7 @@ jobs:
     needs: [job_get_metadata, job_build]
     if: needs.job_get_metadata.outputs.changed_browser == 'true' || github.event_name != 'pull_request'
     runs-on: ubuntu-20.04
-    timeout-minutes: 10
+    timeout-minutes: 20
     strategy:
       fail-fast: false
       matrix:
@@ -855,8 +855,8 @@ jobs:
         timeout-minutes: 5
         run: yarn test:assert
 
-  job_required_tests:
-    name: All required tests passed or skipped
+  job_required_jobs_passed:
+    name: All required jobs passed or were skipped
     needs:
       [
         job_build,
@@ -870,6 +870,9 @@ jobs:
         job_browser_loader_tests,
         job_remix_integration_tests,
         job_e2e_tests,
+        job_artifacts,
+        job_lint,
+        job_circular_dep_check,
       ]
     # Always run this, even if a dependent job failed
     if: always()

CHANGELOG.md

@@ -4,6 +4,42 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+## 7.62.0
+
+### Important Changes
+
+- **feat(integrations): Add `ContextLines` integration for html-embedded JS stack frames (#8699)**
+
+This release adds the `ContextLines` integration as an optional integration for the Browser SDKs to `@sentry/integrations`.
+
+This integration adds source code from inline JavaScript of the current page's HTML (e.g. JS in `<script>` tags) to stack traces of captured errors.
+It _can't_ collect source code from assets referenced by your HTML (e.g. `<script src="..." />`).
+
+The `ContextLines` integration is useful when you have inline JS code in HTML pages that can't be accessed by Sentry's backend, for example, due to a login-protected page.
+
+```js
+import { ContextLines } from "@sentry/integrations";
+
+Sentry.init({
+  // ...
+  integrations: [
+    new ContextLines({
+      // The number of lines to collect before and after each stack frame's line number
+      // Defaults to 7
+      frameContextLines: 7,
+    }),
+  ],
+});
+```
+
+### Other Changes
+
+- fix(nextjs): Make all wrappers isomorphic and available in all runtimes (#8743)
+- fix(replay): Cancel debounce when replay is too short/long (#8742)
+- fix(utils): `dirname` and `basename` should handle Windows paths (#8737)
+- ref: Hoist `flush`, `close`, and `lastEventId` into `@sentry/core` (#8731)
+- ref(node): Don't call `JSON.stringify` on prisma client when logging (#8745)
+
 ## 7.61.1
 
 - feat(nextjs): Add `AsyncLocalStorage` async context strategy to edge SDK (#8720)

packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/get/test.ts

@@ -4,8 +4,8 @@ import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../../utils/fixtures';
 import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
 
-sentryTest('captures Breadcrumb for basic GET request', async ({ getLocalTestPath, page }) => {
-  const url = await getLocalTestPath({ testDir: __dirname });
+sentryTest('captures Breadcrumb for basic GET request', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.route('**/foo', route => {
     return route.fulfill({

packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/post/test.ts

@@ -4,8 +4,8 @@ import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../../utils/fixtures';
 import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
 
-sentryTest('captures Breadcrumb for POST request', async ({ getLocalTestPath, page }) => {
-  const url = await getLocalTestPath({ testDir: __dirname });
+sentryTest('captures Breadcrumb for POST request', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.route('**/foo', route => {
     return route.fulfill({

packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/get/test.ts

@@ -4,8 +4,8 @@ import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../../utils/fixtures';
 import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
 
-sentryTest('captures Breadcrumb for basic GET request', async ({ getLocalTestPath, page }) => {
-  const url = await getLocalTestPath({ testDir: __dirname });
+sentryTest('captures Breadcrumb for basic GET request', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.route('**/foo', route => {
     return route.fulfill({

packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/post/test.ts

@@ -4,8 +4,8 @@ import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../../utils/fixtures';
 import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
 
-sentryTest('captures Breadcrumb for POST request', async ({ getLocalTestPath, page }) => {
-  const url = await getLocalTestPath({ testDir: __dirname });
+sentryTest('captures Breadcrumb for POST request', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.route('**/foo', route => {
     return route.fulfill({

packages/browser-integration-tests/suites/integrations/ContextLines/init.js

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/browser';
+import { ContextLines } from '@sentry/integrations';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [new ContextLines()],
+});

packages/browser-integration-tests/suites/integrations/ContextLines/inline/template.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+      <button id="inline-error-btn" onclick="throw new Error('Error with context lines')">Click me</button>
+  </body>
+  <footer>
+    Some text...
+  </foot>
+</html>

packages/browser-integration-tests/suites/integrations/ContextLines/inline/test.ts

@@ -0,0 +1,53 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequestOnUrl } from '../../../../utils/helpers';
+
+sentryTest(
+  'should add source context lines around stack frames from errors in Html inline JS',
+  async ({ getLocalTestPath, page, browserName }) => {
+    if (browserName === 'webkit') {
+      // The error we're throwing in this test is thrown as "Script error." in Webkit.
+      // We filter "Script error." out by default in `InboundFilters`.
+      // I don't think there's much value to disable InboundFilters defaults for this test,
+      // given that most of our users won't do that either.
+      // Let's skip it instead for Webkit.
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const eventReqPromise = waitForErrorRequestOnUrl(page, url);
+
+    const clickPromise = page.click('#inline-error-btn');
+
+    const [req] = await Promise.all([eventReqPromise, clickPromise]);
+
+    const eventData = envelopeRequestParser(req);
+
+    expect(eventData.exception?.values).toHaveLength(1);
+
+    const exception = eventData.exception?.values?.[0];
+
+    expect(exception).toMatchObject({
+      stacktrace: {
+        frames: [
+          {
+            pre_context: ['<!DOCTYPE html>', '<html>', '<head>', '    <meta charset="utf-8">', '  </head>', '  <body>'],
+            context_line:
+              '      <button id="inline-error-btn" onclick="throw new Error(\'Error with context lines\')">Click me</button>',
+            post_context: [
+              expect.stringContaining('<script'), // this line varies in the test based on tarball/cdn bundle (+variants)
+              '  <footer>',
+              '    Some text...',
+              '  ',
+              '',
+              '</footer></body>',
+              '</html>',
+            ],
+          },
+        ],
+      },
+    });
+  },
+);

packages/browser-integration-tests/suites/integrations/ContextLines/noAddedLines/subject.js

@@ -0,0 +1,3 @@
+document.getElementById('script-error-btn').addEventListener('click', () => {
+  throw new Error('Error without context lines');
+});

packages/browser-integration-tests/suites/integrations/ContextLines/noAddedLines/template.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+      <button id="script-error-btn">Click me</button>
+  </body>
+  <footer>
+    Some text...
+  </foot>
+</html>

packages/browser-integration-tests/suites/integrations/ContextLines/noAddedLines/test.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequestOnUrl } from '../../../../utils/helpers';
+
+sentryTest('should not add source context lines to errors from script files', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventReqPromise = waitForErrorRequestOnUrl(page, url);
+
+  const clickPromise = page.click('#script-error-btn');
+
+  const [req] = await Promise.all([eventReqPromise, clickPromise]);
+
+  const eventData = envelopeRequestParser(req);
+
+  const exception = eventData.exception?.values?.[0];
+  const frames = exception?.stacktrace?.frames;
+  expect(frames).toHaveLength(1);
+  frames?.forEach(f => {
+    expect(f).not.toHaveProperty('pre_context');
+    expect(f).not.toHaveProperty('context_line');
+    expect(f).not.toHaveProperty('post_context');
+  });
+});

packages/browser-integration-tests/suites/integrations/ContextLines/scriptTag/template.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script>
+      function throwTestError() {
+        throw new Error('Error with context lines')
+      }
+    </script>
+  </head>
+  <body>
+      <button id="inline-error-btn" onclick="throwTestError()">Click me</button>
+  </body>
+  <footer>
+    Some text...
+  </foot>
+</html>

packages/browser-integration-tests/suites/integrations/ContextLines/scriptTag/test.ts

@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequestOnUrl } from '../../../../utils/helpers';
+
+sentryTest(
+  'should add source context lines around stack frames from errors in Html script tags',
+  async ({ getLocalTestPath, page, browserName }) => {
+    if (browserName === 'webkit') {
+      // The error we're throwing in this test is thrown as "Script error." in Webkit.
+      // We filter "Script error." out by default in `InboundFilters`.
+      // I don't think there's much value to disable InboundFilters defaults for this test,
+      // given that most of our users won't do that either.
+      // Let's skip it instead for Webkit.
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const eventReqPromise = waitForErrorRequestOnUrl(page, url);
+
+    const clickPromise = page.click('#inline-error-btn');
+
+    const [req] = await Promise.all([eventReqPromise, clickPromise]);
+
+    const eventData = envelopeRequestParser(req);
+
+    expect(eventData.exception?.values).toHaveLength(1);
+
+    const exception = eventData.exception?.values?.[0];
+
+    expect(exception).toMatchObject({
+      stacktrace: {
+        frames: [
+          {
+            lineno: 12,
+            pre_context: [
+              '    <script>',
+              '      function throwTestError() {',
+              "        throw new Error('Error with context lines')",
+              '      }',
+              '    </script>',
+              '  </head>',
+              '  <body>',
+            ],
+            context_line: '      <button id="inline-error-btn" onclick="throwTestError()">Click me</button>',
+            post_context: [
+              expect.stringContaining('<script'), // this line varies in the test based on tarball/cdn bundle (+variants)
+              '  <footer>',
+              '    Some text...',
+              '  ',
+              '',
+              '</footer></body>',
+              '</html>',
+            ],
+          },
+          {
+            lineno: 7,
+            pre_context: [
+              '<!DOCTYPE html>',
+              '<html>',
+              '<head>',
+              '    <meta charset="utf-8">',
+              '    <script>',
+              '      function throwTestError() {',
+            ],
+            context_line: "        throw new Error('Error with context lines')",
+            post_context: [
+              '      }',
+              '    </script>',
+              '  </head>',
+              '  <body>',
+              '      <button id="inline-error-btn" onclick="throwTestError()">Click me</button>',
+              expect.stringContaining('<script'), // this line varies in the test based on tarball/cdn bundle (+variants)
+              '  <footer>',
+            ],
+          },
+        ],
+      },
+    });
+  },
+);

packages/browser/src/exports.ts

@@ -26,11 +26,14 @@ export {
   captureException,
   captureEvent,
   captureMessage,
+  close,
   configureScope,
   createTransport,
+  flush,
   getHubFromCarrier,
   getCurrentHub,
   Hub,
+  lastEventId,
   makeMain,
   Scope,
   startTransaction,
@@ -60,16 +63,5 @@ export {
 } from './stack-parsers';
 export { eventFromException, eventFromMessage } from './eventbuilder';
 export { createUserFeedbackEnvelope } from './userfeedback';
-export {
-  defaultIntegrations,
-  forceLoad,
-  init,
-  lastEventId,
-  onLoad,
-  showReportDialog,
-  flush,
-  close,
-  wrap,
-  captureUserFeedback,
-} from './sdk';
+export { defaultIntegrations, forceLoad, init, onLoad, showReportDialog, wrap, captureUserFeedback } from './sdk';
 export { GlobalHandlers, TryCatch, Breadcrumbs, LinkedErrors, HttpContext, Dedupe } from './integrations';