build: Update typescript from 3.8.3 to 4.9.5 (#8255)

This updates the TS version we use from 3.8.3 to 4.9.5. This allows us
to use newer TS features, as well as as improves compatibility with
newer @types/xxx packages that use newer features, which leads to issues
when transitive dependencies are used etc.

We use [downlevel-dts](https://www.npmjs.com/package/downlevel-dts) to
generate a 3.8 compatible types output _in addition_, so this should be
fully backwards compatible. TS provides a built-in way to tell it to use
a certain types output for a certain version, so this should work with
no breaking change.

The main changes necessary here are small tweaks to types which are
required in 4.9.x.

Author: mydea

.github/workflows/build.yml

@@ -655,7 +655,9 @@ jobs:
           yarn test:package
 
   job_node_integration_tests:
-    name: Node (${{ matrix.node }}) Integration Tests
+    name:
+      Node (${{ matrix.node }})${{ (matrix.typescript && format(' (TS {0})', matrix.typescript)) || '' }} Integration
+      Tests
     needs: [job_get_metadata, job_build]
     if: needs.job_get_metadata.outputs.changed_node == 'true' || github.event_name != 'pull_request'
     runs-on: ubuntu-20.04
@@ -664,6 +666,12 @@ jobs:
       fail-fast: false
       matrix:
         node: [10, 12, 14, 16, 18, 20]
+        typescript:
+          - false
+        include:
+          # Only check typescript for latest version (to streamline CI)
+          - node: 20
+            typescript: '3.8'
     steps:
       - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
         uses: actions/checkout@v3
@@ -677,6 +685,11 @@ jobs:
         uses: ./.github/actions/restore-cache
         env:
           DEPENDENCY_CACHE_KEY: ${{ needs.job_build.outputs.dependency_cache_key }}
+
+      - name: Overwrite typescript version
+        if: matrix.typescript
+        run: yarn add --dev --ignore-workspace-root-check typescript@${{ matrix.typescript }}
+
       - name: Run integration tests
         env:
           NODE_VERSION: ${{ matrix.node }}
@@ -717,7 +730,7 @@ jobs:
           yarn test:integration:ci
 
   job_e2e_tests:
-    name: E2E Tests (Shard ${{ matrix.shard }})
+    name: E2E (Shard ${{ matrix.shard }}) Tests
     # We only run E2E tests for non-fork PRs because the E2E tests require secrets to work and they can't be accessed from forks
     # Dependabot PRs sadly also don't have access to secrets, so we skip them as well
     if:
@@ -730,6 +743,7 @@ jobs:
       fail-fast: false
       matrix:
         shard: [1, 2, 3]
+
     steps:
       - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
         uses: actions/checkout@v3
@@ -746,6 +760,7 @@ jobs:
         uses: ./.github/actions/restore-cache
         env:
           DEPENDENCY_CACHE_KEY: ${{ needs.job_build.outputs.dependency_cache_key }}
+
       - name: Get node version
         id: versions
         run: |

nx.json

@@ -64,7 +64,9 @@
       ],
       "outputs": [
         "{projectRoot}/build/types",
-        "{projectRoot}/build/npm/types"
+        "{projectRoot}/build/types-ts3.8",
+        "{projectRoot}/build/npm/types",
+        "{projectRoot}/build/npm/types-ts3.8"
       ]
     },
     "lint:eslint": {

package.json

@@ -90,6 +90,7 @@
     "chai": "^4.1.2",
     "codecov": "^3.6.5",
     "deepmerge": "^4.2.2",
+    "downlevel-dts": "~0.11.0",
     "es-check": "7.1.0",
     "eslint": "7.32.0",
     "jest": "^27.5.1",
@@ -114,9 +115,9 @@
     "size-limit": "^4.5.5",
     "ts-jest": "^27.1.4",
     "ts-node": "10.9.1",
-    "tslib": "^2.3.1",
+    "tslib": "2.4.1",
     "typedoc": "^0.18.0",
-    "typescript": "3.8.3",
+    "typescript": "4.9.5",
     "vitest": "^0.29.2",
     "yalc": "^1.0.0-pre.53"
   },

packages/angular-ivy/package.json

@@ -24,7 +24,7 @@
     "@sentry/browser": "7.56.0",
     "@sentry/types": "7.56.0",
     "@sentry/utils": "7.56.0",
-    "tslib": "^2.3.0"
+    "tslib": "^2.4.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~12.2.18",
@@ -37,7 +37,6 @@
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
     "ng-packagr": "^12.1.1",
-    "typescript": "~4.3.5",
     "zone.js": "~0.11.4"
   },
   "scripts": {

packages/angular/package.json

@@ -24,7 +24,7 @@
     "@sentry/browser": "7.56.0",
     "@sentry/types": "7.56.0",
     "@sentry/utils": "7.56.0",
-    "tslib": "^2.0.0"
+    "tslib": "^2.4.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1002.4",
@@ -38,7 +38,7 @@
     "@angular/router": "~10.2.5",
     "ng-packagr": "^10.1.0",
     "rxjs": "6.5.5",
-    "typescript": "~4.0.2",
+    "typescript": "4.0.2",
     "zone.js": "^0.11.8"
   },
   "scripts": {

packages/angular/src/errorhandler.ts

@@ -2,7 +2,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import type { ErrorHandler as AngularErrorHandler } from '@angular/core';
 import { Inject, Injectable } from '@angular/core';
 import * as Sentry from '@sentry/browser';
-import { captureException } from '@sentry/browser';
+import type { Event, Scope } from '@sentry/types';
 import { addExceptionMechanism, isString } from '@sentry/utils';
 
 import { runOutsideAngular } from './zone';
@@ -101,7 +101,7 @@ class SentryErrorHandler implements AngularErrorHandler {
 
     // Capture handled exception and send it to Sentry.
     const eventId = runOutsideAngular(() =>
-      captureException(extractedError, scope => {
+      Sentry.captureException(extractedError, (scope: Scope) => {
         scope.addEventProcessor(event => {
           addExceptionMechanism(event, {
             type: 'angular',
@@ -126,7 +126,7 @@ class SentryErrorHandler implements AngularErrorHandler {
       const client = Sentry.getCurrentHub().getClient();
 
       if (client && client.on && !this._registeredAfterSendEventHandler) {
-        client.on('afterSendEvent', event => {
+        client.on('afterSendEvent', (event: Event) => {
           if (!event.type) {
             Sentry.showReportDialog({ ...this._options.dialogOptions, eventId: event.event_id });
           }

packages/angular/test/errorhandler.test.ts

@@ -57,7 +57,7 @@ describe('SentryErrorHandler', () => {
   describe('handleError method', () => {
     it('handleError method assigns the correct mechanism', () => {
       const addEventProcessorSpy = jest.spyOn(FakeScope, 'addEventProcessor').mockImplementationOnce(callback => {
-        void callback({}, { event_id: 'fake-event-id' });
+        void (callback as (event: any, hint: any) => void)({}, { event_id: 'fake-event-id' });
         return FakeScope;
       });
 

packages/browser-integration-tests/package.json

@@ -53,7 +53,6 @@
     "html-webpack-plugin": "^5.5.0",
     "pako": "^2.1.0",
     "playwright": "^1.31.1",
-    "typescript": "^4.5.2",
     "webpack": "^5.52.0"
   },
   "devDependencies": {

packages/browser/package.json

@@ -12,6 +12,9 @@
   "main": "build/npm/cjs/index.js",
   "module": "build/npm/esm/index.js",
   "types": "build/npm/types/index.d.ts",
+  "typesVersions": {
+    "<4.9": { "build/npm/types/index.d.ts": ["build/npm/types-ts3.8/index.d.ts"] }
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +24,7 @@
     "@sentry/replay": "7.56.0",
     "@sentry/types": "7.56.0",
     "@sentry/utils": "7.56.0",
-    "tslib": "^1.9.3"
+    "tslib": "^2.4.1 || ^1.9.3"
   },
   "devDependencies": {
     "@sentry-internal/integration-shims": "7.56.0",
@@ -53,7 +56,9 @@
     "build:bundle:es5": "JS_VERSION=es5 rollup -c rollup.bundle.config.js",
     "build:bundle:es6": "JS_VERSION=es6 rollup -c rollup.bundle.config.js",
     "build:transpile": "rollup -c rollup.npm.config.js",
-    "build:types": "tsc -p tsconfig.types.json",
+    "build:types": "run-s build:types:core build:types:downlevel",
+    "build:types:core": "tsc -p tsconfig.types.json",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
     "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
     "build:dev:watch": "yarn build:watch",
     "build:bundle:watch": "rollup -c rollup.bundle.config.js --watch",

packages/browser/src/eventbuilder.ts

@@ -208,7 +208,7 @@ export function eventFromUnknownInput(
   // https://developer.mozilla.org/en-US/docs/Web/API/DOMError
   // https://developer.mozilla.org/en-US/docs/Web/API/DOMException
   // https://webidl.spec.whatwg.org/#es-DOMException-specialness
-  if (isDOMError(exception as DOMError) || isDOMException(exception as DOMException)) {
+  if (isDOMError(exception) || isDOMException(exception as DOMException)) {
     const domException = exception as DOMException;
 
     if ('stack' in (exception as Error)) {
@@ -220,6 +220,7 @@ export function eventFromUnknownInput(
       addExceptionTypeValue(event, message);
     }
     if ('code' in domException) {
+      // eslint-disable-next-line deprecation/deprecation
       event.tags = { ...event.tags, 'DOMException.code': `${domException.code}` };
     }