test: Add browser based scenarios (#4100)

Author: AbhiPrasad

.eslintrc.js

@@ -31,5 +31,14 @@ module.exports = {
         'jsdoc/require-jsdoc': 'off',
       },
     },
+    {
+      files: ["scenarios/**"],
+      parserOptions: {
+        sourceType: "module",
+      },
+      rules: {
+        "no-console": "off",
+      },
+    },
   ],
 };

.gitignore

@@ -11,6 +11,7 @@ coverage/
 scratch/
 *.pyc
 *.tsbuildinfo
+scenarios/*/dist/
 
 # logs
 yarn-error.log

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

@@ -186,6 +186,13 @@ module.exports = {
         ecmaVersion: 2018,
       },
     },
+    {
+      // Configuration for jsx and tsx files
+      files: ['*.tsx', '*.jsx', '*.test.tsx', '*.test.jsx'],
+      parserOptions: {
+        jsx: true,
+      },
+    },
   ],
 
   rules: {

scenarios/browser/basic-capture-exception/index.js

@@ -0,0 +1,7 @@
+import { init, captureException } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+});
+
+captureException(new Error("error here!"));

scenarios/browser/basic-capture-exception/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-capture-exception",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-capture-message/index.js

@@ -0,0 +1,7 @@
+import { init, captureMessage } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+});
+
+captureMessage("this is a message");

scenarios/browser/basic-capture-message/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-capture-message",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-custom-integration/index.js

@@ -0,0 +1,23 @@
+import { init } from "@sentry/browser";
+
+class CustomIntegration {
+  static id = 'CustomIntegration';
+
+  name = CustomIntegration.id;
+  options = undefined;
+
+  constructor(options) {
+    this.options = options;
+  }
+
+  setupOnce(addGlobalEventProcessor, getCurrentHub) {
+    addGlobalEventProcessor(event => event);
+    const hub = getCurrentHub();
+    hub.captureMessage(options.name);
+  }
+}
+
+init({
+  dsn: "https://[email protected]/0000000",
+  integrations: [new CustomIntegration()],
+});

scenarios/browser/basic-custom-integration/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-custom-integration",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-custom-transport/index.js

@@ -0,0 +1,22 @@
+import { init, Transports } from "@sentry/browser";
+
+class CustomTransport extends Transports.BaseTransport {
+  constructor(options) {
+    super(options);
+  }
+
+  sendEvent(event) {
+    console.log("Sending Event");
+    return super.sendEvent(event);
+  }
+
+  sendSession(session) {
+    console.log("Sending Session");
+    return super.sendSession(session);
+  }
+}
+
+init({
+  dsn: "https://[email protected]/0000000",
+  transport: CustomTransport
+});

scenarios/browser/basic-custom-transport/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-custom-transport",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-no-client-reports/index.js

@@ -0,0 +1,6 @@
+import { init } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+  sendClientReports: false,
+});

scenarios/browser/basic-no-client-reports/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-no-client-reports",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-no-default-integrations/index.js

@@ -0,0 +1,6 @@
+import { init } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+  defaultIntegrations: false,
+});

scenarios/browser/basic-no-default-integrations/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-no-default-integrations",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-no-dsn/index.js

@@ -0,0 +1,3 @@
+import { init } from "@sentry/browser";
+
+init();

scenarios/browser/basic-no-dsn/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-no-dsn",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-no-sessions/index.js

@@ -0,0 +1,7 @@
+import { init } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+  release: "[email protected]",
+  autoSessionTracking: false,
+});

scenarios/browser/basic-no-sessions/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-no-sessions",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-with-debug/index.js

@@ -0,0 +1,6 @@
+import { init } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+  debug: true,
+});

scenarios/browser/basic-with-debug/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-with-debug",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-with-sessions/index.js

@@ -0,0 +1,6 @@
+import { init } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+  release: "[email protected]",
+});

scenarios/browser/basic-with-sessions/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-with-sessions",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic-with-tunnel/index.js

@@ -0,0 +1,6 @@
+import { init } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+  tunnel: "/errors",
+});

scenarios/browser/basic-with-tunnel/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic-with-tunnel",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/basic/index.js

@@ -0,0 +1,5 @@
+import { init } from "@sentry/browser";
+
+init({
+  dsn: "https://[email protected]/0000000",
+});

scenarios/browser/basic/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/nextjs-client/index.js

@@ -0,0 +1,5 @@
+import { init } from "@sentry/nextjs/esm/index.client";
+
+init({
+  dsn: "https://[email protected]/0000000",
+});

scenarios/browser/nextjs-client/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "nextjs-client",
+  "private": true,
+  "version": "0.0.0",
+  "dependencies": {
+    "next": "12"
+  }
+}

scenarios/browser/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "scenarios-browser",
+  "main": "webpack.js",
+  "private": true,
+  "version": "0.0.0",
+  "devDependencies": {
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.62.1",
+    "webpack-bundle-analyzer": "^4.5.0"
+  }
+}

scenarios/browser/perf-auto/index.js

@@ -0,0 +1,8 @@
+import { init } from "@sentry/browser";
+import { Integrations } from "@sentry/tracing";
+
+init({
+  dsn: "https://[email protected]/0000000",
+  integrations: [new Integrations.BrowserTracing()],
+  tracesSampleRate: 1.0,
+});

scenarios/browser/perf-auto/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "perf-auto",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/perf-manual/index.js

@@ -0,0 +1,13 @@
+import { init, startTransaction } from "@sentry/browser";
+import "@sentry/tracing";
+
+init({
+  dsn: "https://[email protected]/0000000",
+  tracesSampleRate: 1.0,
+});
+
+const transaction = startTransaction({ op: "task", name: "Important Stuff" });
+
+setTimeout(() => {
+  transaction.finish();
+}, 1000);

scenarios/browser/perf-manual/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "perf-manual",
+  "private": true,
+  "version": "0.0.0"
+}

scenarios/browser/react/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom"
+import { init } from "@sentry/react";
+
+init({
+  dsn: "https://[email protected]/0000000",
+});
+
+class Hello extends React.Component {
+  render() {
+    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
+  }
+}
+
+ReactDOM.render(
+  React.createElement(Hello, { toWhat: 'World' }, null),
+  // eslint-disable-next-line no-undef
+  document.getElementById('root')
+);

scenarios/browser/react/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "react",
+  "private": true,
+  "version": "0.0.0",
+  "dependencies": {
+    "react": "17",
+    "react-dom": "17"
+  }
+}

scenarios/browser/webpack.js

@@ -0,0 +1,69 @@
+const path = require('path');
+const { promises } = require('fs');
+
+const webpack = require('webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+async function init(scenario) {
+  if (!hasCurrentScenario(scenario)) {
+    throw new Error(`Scenario "${scenario}" does not exist`);
+  }
+
+  console.log(`Bundling scenario: ${scenario}`);
+
+  await runWebpack(scenario);
+}
+
+async function runWebpack(scenario) {
+  const alias = await generateAlias();
+
+  webpack(
+    {
+      mode: 'production',
+      entry: path.resolve(__dirname, scenario),
+      output: {
+        filename: 'main.js',
+        path: path.resolve(__dirname, 'dist', scenario),
+      },
+      plugins: [new BundleAnalyzerPlugin({ analyzerMode: 'static' }), new HtmlWebpackPlugin()],
+      resolve: {
+        alias,
+      },
+    },
+    (err, stats) => {
+      if (err || stats.hasErrors()) {
+        console.log(err);
+      }
+      console.log('DONE', stats);
+    },
+  );
+}
+
+const PACKAGE_PATH = '../../packages';
+
+/**
+ * Generate webpack aliases based on packages in monorepo
+ * Example of an alias: '@sentry/serverless': 'path/to/sentry-javascript/packages/serverless',
+ */
+async function generateAlias() {
+  const dirents = await promises.readdir(PACKAGE_PATH);
+
+  return Object.fromEntries(
+    await Promise.all(
+      dirents.map(async d => {
+        const packageJSON = JSON.parse(await promises.readFile(path.resolve(PACKAGE_PATH, d, 'package.json')));
+        return [packageJSON['name'], path.resolve(PACKAGE_PATH, d)];
+      }),
+    ),
+  );
+}
+
+async function hasCurrentScenario(scenario) {
+  const dirents = await promises.readdir(__dirname, { withFileTypes: true });
+  return dirents.filter(dir => dir.isDirectory()).find(dir => dir.name === scenario);
+}
+
+const CURRENT_SCENARIO = 'basic';
+
+init(CURRENT_SCENARIO);