build(cdn): Ensure ES5 bundles do not use non-ES5 code (#7550)

Author: mydea

.github/workflows/build.yml

@@ -321,8 +321,10 @@ jobs:
         uses: ./.github/actions/restore-cache
         env:
           DEPENDENCY_CACHE_KEY: ${{ needs.job_build.outputs.dependency_cache_key }}
-      - name: Run linter
+      - name: Lint source files
         run: yarn lint
+      - name: Validate ES5 builds
+        run: yarn validate:es5
 
   job_circular_dep_check:
     name: Circular Dependency Check

package.json

@@ -23,6 +23,7 @@
     "link:yarn": "lerna exec yarn link",
     "lint": "lerna run lint",
     "lint:eslint": "lerna run lint:eslint",
+    "validate:es5": "lerna run validate:es5",
     "postpublish": "lerna run --stream --concurrency 1 postpublish",
     "test": "lerna run --ignore @sentry-internal/* test",
     "test:unit": "lerna run --ignore @sentry-internal/* test:unit",
@@ -89,6 +90,7 @@
     "chai": "^4.1.2",
     "codecov": "^3.6.5",
     "deepmerge": "^4.2.2",
+    "es-check": "7.1.0",
     "eslint": "7.32.0",
     "jest": "^27.5.1",
     "jest-environment-node": "^27.5.1",

packages/browser/package.json

@@ -66,6 +66,7 @@
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --format stylish",
     "lint:prettier": "prettier --check \"{src,test,scripts}/**/**.ts\"",
+    "validate:es5": "es-check es5 build/bundles/bundle.es5.js",
     "size:check": "run-p size:check:es5 size:check:es6",
     "size:check:es5": "cat build/bundles/bundle.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES5: \",$1,\"kB\";}'",
     "size:check:es6": "cat build/bundles/bundle.es6.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES6: \",$1,\"kB\";}'",

packages/eslint-config-sdk/src/index.js

@@ -161,6 +161,9 @@ module.exports = {
 
         // All imports should be accounted for
         'import/no-extraneous-dependencies': 'error',
+
+        // Do not allow usage of functions we do not polyfill for ES5
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'error',
       },
     },
     {

packages/eslint-plugin-sdk/src/index.js

@@ -13,5 +13,6 @@ module.exports = {
     'no-optional-chaining': require('./rules/no-optional-chaining'),
     'no-nullish-coalescing': require('./rules/no-nullish-coalescing'),
     'no-eq-empty': require('./rules/no-eq-empty'),
+    'no-unsupported-es6-methods': require('./rules/no-unsupported-es6-methods'),
   },
 };

packages/eslint-plugin-sdk/src/rules/no-unsupported-es6-methods.js

@@ -0,0 +1,35 @@
+'use strict';
+
+/**
+ * Taken and adapted from https://github.com/nkt/eslint-plugin-es5/blob/master/src/rules/no-es6-methods.js
+ */
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Forbid methods added in ES6 which are not polyfilled by Sentry.',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (!node.callee || !node.callee.property) {
+          return;
+        }
+        const functionName = node.callee.property.name;
+
+        const es6ArrayFunctions = ['copyWithin', 'values', 'fill'];
+        const es6StringFunctions = ['repeat'];
+
+        const es6Functions = [].concat(es6ArrayFunctions, es6StringFunctions);
+        if (es6Functions.indexOf(functionName) > -1) {
+          context.report({
+            node: node.callee.property,
+            message: `ES6 methods not allowed: ${functionName}`,
+          });
+        }
+      },
+    };
+  },
+};

packages/node/.eslintrc.js

@@ -6,5 +6,6 @@ module.exports = {
   rules: {
     '@sentry-internal/sdk/no-optional-chaining': 'off',
     '@sentry-internal/sdk/no-nullish-coalescing': 'off',
+    '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
   },
 };

packages/overhead-metrics/.eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = {
         'import/no-unresolved': 'off',
         '@sentry-internal/sdk/no-optional-chaining': 'off',
         '@sentry-internal/sdk/no-nullish-coalescing': 'off',
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
         'jsdoc/require-jsdoc': 'off',
       },
     },

packages/replay/.eslintrc.js

@@ -7,21 +7,8 @@ module.exports = {
   extends: ['../../.eslintrc.js'],
   overrides: [
     {
-      files: ['worker/**/*.ts'],
-      parserOptions: {
-        // TODO: figure out if we need a worker-specific tsconfig
-        project: ['tsconfig.worker.json'],
-      },
-      rules: {
-        // We cannot use backticks, as that conflicts with the stringified worker
-        'prefer-template': 'off',
-      },
-    },
-    {
-      files: ['src/worker/**/*.js'],
-      parserOptions: {
-        sourceType: 'module',
-      },
+      files: ['src/**/*.ts'],
+      rules: {},
     },
     {
       files: ['jest.setup.ts', 'jest.config.ts'],

packages/svelte/.eslintrc.js

@@ -3,4 +3,7 @@ module.exports = {
     browser: true,
   },
   extends: ['../../.eslintrc.js'],
+  rules: {
+    '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
+  },
 };

packages/tracing/package.json

@@ -46,6 +46,7 @@
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --format stylish",
     "lint:prettier": "prettier --check \"{src,test,scripts}/**/**.ts\"",
+    "validate:es5": "es-check es5 build/bundles/bundle.tracing.es5.js",
     "test:unit": "jest",
     "test": "jest",
     "test:watch": "jest --watch",

packages/vue/src/components.ts

@@ -9,6 +9,7 @@ const ANONYMOUS_COMPONENT_NAME = '<Anonymous>';
 
 const repeat = (str: string, n: number): string => {
   // string.repeat() is not supported by IE11, we fall back to just using the string in that case
+  // eslint-disable-next-line @sentry-internal/sdk/no-unsupported-es6-methods
   return str.repeat ? str.repeat(n) : str;
 };
 

rollup/bundleHelpers.js

@@ -17,6 +17,7 @@ import {
   makeTerserPlugin,
   makeTSPlugin,
   makeSetSDKSourcePlugin,
+  getEs5Polyfills,
 } from './plugins/index.js';
 import { mergePlugins } from './utils';
 
@@ -25,6 +26,8 @@ const BUNDLE_VARIANTS = ['.js', '.min.js', '.debug.min.js'];
 export function makeBaseBundleConfig(options) {
   const { bundleType, entrypoints, jsVersion, licenseTitle, outputFileBase, packageSpecificConfig } = options;
 
+  const isEs5 = jsVersion.toLowerCase() === 'es5';
+
   const nodeResolvePlugin = makeNodeResolvePlugin();
   const sucrasePlugin = makeSucrasePlugin();
   const cleanupPlugin = makeCleanupPlugin();
@@ -42,6 +45,10 @@ export function makeBaseBundleConfig(options) {
     output: {
       format: 'iife',
       name: 'Sentry',
+      outro: () => {
+        // Add polyfills for ES6 array/string methods at the end of the bundle
+        return isEs5 ? getEs5Polyfills() : '';
+      },
     },
     context: 'window',
     plugins: [markAsBrowserBuildPlugin],
@@ -101,10 +108,9 @@ export function makeBaseBundleConfig(options) {
       strict: false,
       esModule: false,
     },
-    plugins:
-      jsVersion === 'es5'
-        ? [tsPlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin]
-        : [sucrasePlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin],
+    plugins: isEs5
+      ? [tsPlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin]
+      : [sucrasePlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin],
     treeshake: 'smallest',
   };
 

rollup/plugins/bundlePlugins.js

@@ -8,6 +8,9 @@
  * Typescript plugin docs: https://github.com/ezolenko/rollup-plugin-typescript2
  */
 
+import * as fs from 'fs';
+import * as path from 'path';
+
 import commonjs from '@rollup/plugin-commonjs';
 import deepMerge from 'deepmerge';
 import license from 'rollup-plugin-license';
@@ -38,6 +41,11 @@ export function makeLicensePlugin(title) {
   return plugin;
 }
 
+export function getEs5Polyfills() {
+  // Note: __dirname resolves to e.g. packages/browser or packages/tracing
+  return fs.readFileSync(path.join(__dirname, '../../rollup/polyfills/es5.js'), 'utf-8');
+}
+
 /**
  * Create a plugin to set the value of the `__SENTRY_DEBUG__` magic string.
  *

rollup/polyfills/es5.js

@@ -0,0 +1,41 @@
+// Sentry ES5 polyfills
+if (!('includes' in Array.prototype)) {
+  Array.prototype.includes = function (searchElement) {
+    return this.indexOf(searchElement) > -1;
+  };
+}
+if (!('find' in Array.prototype)) {
+  Array.prototype.find = function (callback) {
+    for (var i = 0; i < this.length; i++) {
+      if (callback(this[i])) {
+        return this[i];
+      }
+    }
+  };
+}
+if (!('findIndex' in Array.prototype)) {
+  Array.prototype.findIndex = function (callback) {
+    for (var i = 0; i < this.length; i++) {
+      if (callback(this[i])) {
+        return i;
+      }
+    }
+    return -1;
+  };
+}
+if (!('includes' in String.prototype)) {
+  String.prototype.includes = function (searchElement) {
+    return this.indexOf(searchElement) > -1;
+  };
+}
+if (!('startsWith' in String.prototype)) {
+  String.prototype.startsWith = function (searchElement) {
+    return this.indexOf(searchElement) === 0;
+  };
+}
+if (!('endsWith' in String.prototype)) {
+  String.prototype.endsWith = function (searchElement) {
+    var i = this.indexOf(searchElement);
+    return i > -1 && i === this.length - searchElement.length;
+  };
+}