add webpack bundle injection and unit tests to build-plugins

.github/workflows/check-links.yml

@@ -9,7 +9,7 @@ jobs:
   linkChecker:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3.6.0
+      - uses: actions/checkout@v4.2.1
 
       - name: Link Checker
         uses: lycheeverse/[email protected]

.github/workflows/ci-main.yml

@@ -11,7 +11,7 @@ jobs:
     permissions: read-all
     steps:
       - name: Checkout
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.1
       - uses: actions/[email protected]
         with:
           node-version: '18'
@@ -36,7 +36,7 @@ jobs:
         browser: [headlessChrome, headlessFirefox]
     steps:
       - name: Checkout
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.1
       - uses: actions/[email protected]
         with:
           node-version: '18'

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
     permissions: read-all
     steps:
       - name: Checkout
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.1
       - uses: actions/[email protected]
         with:
           node-version: '18'
@@ -47,7 +47,7 @@ jobs:
           accessKey: ${{ secrets.SAUCE_ACCESS_KEY }}
           tunnelName: ${{ secrets.SAUCE_TUNNEL_ID }}
       - name: Checkout
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.1
       - uses: actions/[email protected]
         with:
           node-version: '18'
@@ -69,7 +69,7 @@ jobs:
         browser: [headlessChrome, headlessFirefox]
     steps:
       - name: Checkout
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v4.2.1
       - uses: actions/[email protected]
         with:
           node-version: '18'

.gitignore

@@ -17,4 +17,3 @@ tests_output/
 
 # contains secrets
 .env
-.npmrc

.npmrc

@@ -0,0 +1 @@
+git-tag-version = false

packages/build-plugins/.mocharc.json

@@ -0,0 +1,5 @@
+{
+  "extension": ["ts"],
+  "spec": "test/**/*.test.ts",
+  "require": "ts-node/register"
+}

packages/build-plugins/.nycrc.json

@@ -0,0 +1,7 @@
+{
+  "check-coverage": true,
+  "branch": 80,
+  "lines": 80,
+  "functions": 80,
+  "statements": 80
+}

packages/build-plugins/README.md

@@ -1,3 +1,18 @@
 # Splunk Web Build Plugins
 
 > :construction: This project is currently **UNDER DEVELOPMENT**.
+
+## Usage
+
+```js
+// webpack.config.js
+
+const { ollyWebWebpackPlugin } = require('@splunk/olly-web-build-plugins');
+
+module.exports = {
+  /* ... */
+  plugins: [
+    ollyWebWebpackPlugin({ /* options */ })
+  ]
+}
+```

packages/build-plugins/package.json

@@ -6,7 +6,8 @@
   "repository": "github:signalfx/splunk-otel-js-browser",
   "scripts": {
     "compile": "npm-run-all -s compile:*",
-    "compile:tsc": "tsc --build tsconfig.cjs.json tsconfig.esm.json"
+    "compile:tsc": "tsc --build tsconfig.cjs.json tsconfig.esm.json",
+    "test:unit:ci": "env TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=tsconfig.cjs.json nyc mocha"
   },
   "author": "Splunk Observability Instrumentals Team <[email protected]>",
   "license": "Apache-2.0",
@@ -26,8 +27,22 @@
     "dist/esm/**/*.js.map",
     "dist/esm/**/*.d.ts"
   ],
+  "devDependencies": {
+    "@types/chai": "^4.3.5",
+    "@types/mocha": "^10.0.1",
+    "chai": "^4.3.7",
+    "mocha": "^10.2.0",
+    "nyc": "^15.1.0",
+    "ts-node": "^10.9.1"
+  },
   "bugs": {
     "url": "https://github.com/signalfx/splunk-otel-js-browser/issues"
   },
-  "homepage": "https://github.com/signalfx/splunk-otel-js-browser#readme"
+  "homepage": "https://github.com/signalfx/splunk-otel-js-browser#readme",
+  "dependencies": {
+    "unplugin": "^1.14.1"
+  },
+  "peerDependencies": {
+    "webpack": "^4 || ^5"
+  }
 }

packages/build-plugins/src/index.ts

@@ -14,8 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export class OllyWebWebpackPlugin {
-  public apply(): void {
-    console.log('apply OllyWebWebpackPlugin');
-  }
+import { createUnplugin, UnpluginFactory } from 'unplugin';
+
+import { BannerPlugin, WebpackPluginInstance } from 'webpack';
+import { computeSourceMapId, getCodeSnippet } from './utils';
+
+export interface OllyWebPluginOptions {
+  // define your plugin options here
 }
+
+const unpluginFactory: UnpluginFactory<OllyWebPluginOptions | undefined> = () => ({
+  name: 'OllyWebPlugin',
+  webpack(compiler) {
+    compiler.hooks.thisCompilation.tap('OllyWebPlugin', () => {
+      const bannerPlugin = new BannerPlugin({
+        banner: ({ chunk }) => {
+          if (!chunk.hash) {
+            return '';
+          }
+          const sourceMapId = computeSourceMapId(chunk.hash);
+          return getCodeSnippet(sourceMapId);
+        },
+        entryOnly: false,
+        footer: true,
+        include: /\.(js|mjs)$/,
+        raw: true,
+      });
+      bannerPlugin.apply(compiler);
+    });
+  }
+});
+
+const unplugin = createUnplugin(unpluginFactory);
+
+export const ollyWebWebpackPlugin: (options: OllyWebPluginOptions) => WebpackPluginInstance = unplugin.webpack;

packages/build-plugins/src/utils.ts

@@ -0,0 +1,45 @@
+/*
+Copyright 2024 Splunk Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+import { createHash } from 'crypto';
+
+/**
+ * Returns a standardized GUID value to use for a sourceMapId.
+ *
+ * @param content the source map file contents, or an already-computed hash of the source map (or its source files)
+ */
+export function computeSourceMapId(content: string): string {
+  const sha256 = createHash('sha256')
+    .update(content, 'utf-8')
+    .digest('hex');
+  const guid = [
+    sha256.slice(0, 8),
+    sha256.slice(8, 12),
+    sha256.slice(12, 16),
+    sha256.slice(16, 20),
+    sha256.slice(20, 32),
+  ].join('-');
+  return guid;
+}
+
+// eslint-disable-next-line quotes
+const SNIPPET_TEMPLATE = `;if (typeof window === 'object') { window.sourceMapIds = window.sourceMapIds || {}; let s = ''; try { throw new Error(); } catch (e) { s = (e.stack.match(/https?:\\/\\/[^\\s]+?(?::\\d+)?(?=:[\\d]+:[\\d]+)/) || [])[0]; } if (s) {window.sourceMapIds[s] = '__SOURCE_MAP_ID_PLACEHOLDER__';}};\n`;
+
+export function getCodeSnippet(sourceMapId: string): string {
+  return SNIPPET_TEMPLATE.replace('__SOURCE_MAP_ID_PLACEHOLDER__', sourceMapId);
+}
+

packages/build-plugins/test/utils.test.ts

@@ -0,0 +1,48 @@
+/*
+Copyright 2024 Splunk Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { expect } from 'chai';
+import { computeSourceMapId, getCodeSnippet } from '../src/utils';
+
+describe('getCodeSnippet', function () {
+  it('inserts the source map id into the snippet', function () {
+    const code = getCodeSnippet('testid123');
+    expect(code).contains('window.sourceMapIds[s] = \'testid123\'');
+  });
+
+  it('does not throw error in a node environment', function () {
+    const code = getCodeSnippet('testid123');
+    // eslint-disable-next-line no-eval
+    eval(code);
+  });
+
+  it('does not throw error when appended to code that does not end with semicolon or new line', function () {
+    const code = 'let x = 5' + getCodeSnippet('testid123');
+    // eslint-disable-next-line no-eval
+    eval(code);
+  });
+
+});
+
+describe('computeSourceMapId', function () {
+  it('returns a consistent id in GUID format', function () {
+    const id = computeSourceMapId('console.log("Hello world")');
+
+    expect(id).eq('d77ec5d8-4fb5-fbc8-1897-54b54e939bcd');
+    expect(id).eq(computeSourceMapId('console.log("Hello world")'));
+    expect(id).not.eq(computeSourceMapId('console.log("a different snippet gets a different id");'));
+  });
+});

packages/build-plugins/tsconfig.base.json

@@ -7,6 +7,7 @@
     "noEmitOnError": true,
     "pretty": true,
     "resolveJsonModule": true,
+    "skipLibCheck": true,
     "target": "ES2017",
     "types": [
       "node"
@@ -19,4 +20,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}

packages/web/karma.conf.js

@@ -106,6 +106,13 @@ module.exports = async function (config) {
     // start these browsers
     browsers: [],
 
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
+
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
     singleRun: false,

packages/web/package.json

@@ -10,7 +10,7 @@
     "compile:browser": "rollup -c",
     "compile:tsc": "tsc --build tsconfig.cjs.json tsconfig.esm.json",
     "test:unit:watch": "karma start",
-    "test:unit:ci": "nyc karma start --single-run --no-auto-watch --browsers ChromeHeadless",
+    "test:unit:ci": "nyc karma start --single-run --no-auto-watch --browsers ChromeHeadlessCI",
     "test:unit:ci-node": "env TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=tsconfig.cjs.json nyc mocha",
     "test:integration:local": "npm-run-all -s compile test:integration:local:headlessChrome:_execute",
     "test:integration:local:firefox": "npm-run-all -s compile test:integration:local:firefox:_execute",
@@ -80,7 +80,7 @@
     "body-parser": "^1.20.2",
     "chai": "^4.3.7",
     "chrome-launcher": "^1.0.0",
-    "chromedriver": "^128.0.3",
+    "chromedriver": "^129.0.4",
     "codecov": "^3.8.2",
     "compression": "^1.7.4",
     "cors": "^2.8.5",

packages/web/src/SplunkErrorInstrumentation.ts

@@ -40,7 +40,7 @@ function stringifyValue(value: unknown) {
 function parseErrorStack(stack: string): string {
   //get list of files in stack , find corresponding sourcemap id and add it to the source map id object
   const sourceMapIds = {};
-  const urlPattern = /(https?:\/\/[^\s]+\/[^\s:]+|\/[^\s:]+)/g;
+  const urlPattern = /([\w]+:\/\/[^\s/]+\/[^\s?:#]+)/g;
   const urls = stack.match(urlPattern);
   if (urls) {
     urls.forEach(url => {

packages/web/test/index.ts

@@ -31,3 +31,4 @@ import './SplunkSpanAttributesProcessor.test';
 import './SplunkOtelWeb.test';
 import './synthetics.test';
 import './socketio.test';
+import './stacktrace.test';