Add sourcemap upload feature to webpack plugin

packages/build-plugins/package.json

@@ -28,6 +28,8 @@
     "dist/esm/**/*.d.ts"
   ],
   "dependencies": {
+    "axios": "^1.7.7",
+    "form-data": "^4.0.1",
     "unplugin": "^1.14.1"
   },
   "devDependencies": {

packages/build-plugins/src/httpUtils.ts

@@ -0,0 +1,46 @@
+/*
+Copyright 2025 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 axios from 'axios';
+import { createReadStream } from 'fs';
+import * as FormData from 'form-data';
+
+interface FileUpload {
+  filePath: string;
+  fieldName: string;
+}
+
+interface UploadOptions {
+  url: string;
+  file: FileUpload;
+  parameters: { [key: string]: string | number };
+}
+
+export const uploadFile = async ({ url, file, parameters }: UploadOptions): Promise<void> => {
+  const formData = new FormData();
+
+  formData.append(file.fieldName, createReadStream(file.filePath));
+
+  for (const [ key, value ] of Object.entries(parameters)) {
+    formData.append(key, value);
+  }
+
+  await axios.put(url, formData, {
+    headers: {
+      ...formData.getHeaders(),
+    }
+  });
+};

packages/build-plugins/src/index.ts

@@ -16,17 +16,40 @@ limitations under the License.
 
 import { createUnplugin, UnpluginFactory } from 'unplugin';
 
-import { BannerPlugin, WebpackPluginInstance } from 'webpack';
-import { computeSourceMapId, getCodeSnippet } from './utils';
+import type { WebpackPluginInstance } from 'webpack';
+import {
+  computeSourceMapId,
+  getCodeSnippet, JS_FILE_REGEX,
+  PLUGIN_NAME
+} from './utils';
+import { applySourceMapsUpload } from './webpack';
 
 export interface OllyWebPluginOptions {
-  // define your plugin options here
+  /** Plugin configuration for source map ID injection and source map file uploads */
+  sourceMaps: {
+    /** the Splunk Observability realm */
+    realm: string;
+
+    /** API token used to authenticate the file upload requests.  This is not the same as the rumAccessToken used in SplunkRum.init(). */
+    token: string;
+
+    /** Optional. If provided, this should match the "applicationName" used where SplunkRum.init() is called. */
+    applicationName?: string;
+
+    /** Optional. If provided, this should match the "version" used where SplunkRum.init() is called. */
+    version?: string;
+
+    /** Optional. If true, the plugin will inject source map IDs into the final JavaScript bundles, but it will not upload any source map files. */
+    disableUpload?: boolean;
+  }
 }
 
-const unpluginFactory: UnpluginFactory<OllyWebPluginOptions | undefined> = () => ({
-  name: 'OllyWebPlugin',
+const unpluginFactory: UnpluginFactory<OllyWebPluginOptions | undefined> = (options) => ({
+  name: PLUGIN_NAME,
   webpack(compiler) {
-    compiler.hooks.thisCompilation.tap('OllyWebPlugin', () => {
+    const { webpack } = compiler;
+    const { BannerPlugin } = webpack;
+    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, () => {
       const bannerPlugin = new BannerPlugin({
         banner: ({ chunk }) => {
           if (!chunk.hash) {
@@ -37,11 +60,15 @@ const unpluginFactory: UnpluginFactory<OllyWebPluginOptions | undefined> = () =>
         },
         entryOnly: false,
         footer: true,
-        include: /\.(js|mjs)$/,
+        include: JS_FILE_REGEX,
         raw: true,
       });
       bannerPlugin.apply(compiler);
     });
+
+    if (!options.sourceMaps.disableUpload) {
+      applySourceMapsUpload(compiler, options);
+    }
   }
 });
 

packages/build-plugins/src/utils.ts

@@ -14,8 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
 import { createHash } from 'crypto';
+import { createReadStream } from 'fs';
+
+export const PLUGIN_NAME = 'OllyWebPlugin';
+
+export const JS_FILE_REGEX = /\.(js|cjs|mjs)$/;
+
+function shaToSourceMapId(sha: string) {
+  return [
+    sha.slice(0, 8),
+    sha.slice(8, 12),
+    sha.slice(12, 16),
+    sha.slice(16, 20),
+    sha.slice(20, 32),
+  ].join('-');
+}
 
 /**
  * Returns a standardized GUID value to use for a sourceMapId.
@@ -26,14 +40,19 @@ 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;
+  return shaToSourceMapId(sha256);
+}
+
+export async function computeSourceMapIdFromFile(sourceMapFilePath: string): Promise<string> {
+  const hash = createHash('sha256').setEncoding('hex');
+
+  const fileStream = createReadStream(sourceMapFilePath);
+  for await (const chunk of fileStream) {
+    hash.update(chunk);
+  }
+
+  const sha = hash.digest('hex');
+  return shaToSourceMapId(sha);
 }
 
 // eslint-disable-next-line quotes
@@ -43,3 +62,7 @@ export function getCodeSnippet(sourceMapId: string): string {
   return SNIPPET_TEMPLATE.replace('__SOURCE_MAP_ID_PLACEHOLDER__', sourceMapId);
 }
 
+export function getSourceMapUploadUrl(realm: string, idPathParam: string): string {
+  const API_BASE_URL = process.env.O11Y_API_BASE_URL || `https://api.${realm}.signalfx.com`;
+  return `${API_BASE_URL}/v1/sourcemaps/id/${idPathParam}`;
+}

packages/build-plugins/src/webpack/index.ts

@@ -0,0 +1,116 @@
+/*
+Copyright 2025 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 { computeSourceMapIdFromFile, getSourceMapUploadUrl, JS_FILE_REGEX, PLUGIN_NAME } from '../utils';
+import { join } from 'path';
+import { uploadFile } from '../httpUtils';
+import { AxiosError } from 'axios';
+import type { Compiler } from 'webpack';
+import { OllyWebPluginOptions } from '../index';
+
+/**
+ * The part of the webpack plugin responsible for uploading source maps from the output directory.
+ */
+export function applySourceMapsUpload(compiler: Compiler, options: OllyWebPluginOptions): void {
+  const logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
+
+  compiler.hooks.afterEmit.tapAsync(
+    PLUGIN_NAME,
+    async (compilation, callback) => {
+      /*
+       * find JS assets' related source map assets, and collect them to an array
+       */
+      const sourceMaps = [];
+      compilation.assetsInfo.forEach(((assetInfo, asset) => {
+        if (asset.match(JS_FILE_REGEX) && typeof assetInfo?.related?.sourceMap === 'string') {
+          sourceMaps.push(assetInfo.related.sourceMap);
+        }
+      }));
+
+      if (sourceMaps.length > 0) {
+        logger.info('Uploading %d source maps to %s', sourceMaps.length, getSourceMapUploadUrl(options.sourceMaps.realm, '{id}'));
+      } else {
+        logger.warn('No source maps found.');
+        logger.warn('Make sure that source maps are enabled to utilize the %s plugin.', PLUGIN_NAME);
+      }
+
+      const uploadResults = {
+        success: 0,
+        failed: 0,
+      };
+      const parameters = Object.fromEntries([
+        ['appName', options.sourceMaps.applicationName],
+        ['appVersion', options.sourceMaps.version],
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ].filter(([_, value]) => typeof value !== 'undefined'));
+
+      /*
+       * resolve the source map assets to a file system path, then upload the files
+       */
+      for (const sourceMap of sourceMaps) {
+        const sourceMapPath = join(compiler.outputPath, sourceMap);
+        const sourceMapId = await computeSourceMapIdFromFile(sourceMapPath);
+        const url = getSourceMapUploadUrl(options.sourceMaps.realm, sourceMapId);
+
+        logger.log('Uploading %s', sourceMap);
+        logger.debug('PUT', url);
+        try {
+          logger.status(new Array(uploadResults.success).fill('.').join(''));
+          await uploadFile({
+            file: {
+              filePath: sourceMapPath,
+              fieldName: 'file',
+            },
+            url,
+            parameters
+          });
+          uploadResults.success++;
+        } catch (e) {
+          uploadResults.failed++;
+          const ae = e as AxiosError;
+
+          const unableToUploadMessage = `Unable to upload ${sourceMapPath}`;
+          if (ae.response && ae.response.status === 413) {
+            logger.warn(ae.response.status, ae.response.statusText);
+            logger.warn(unableToUploadMessage);
+          } else if (ae.response) {
+            logger.error(ae.response.status, ae.response.statusText);
+            logger.error(ae.response.data);
+            logger.error(unableToUploadMessage);
+          } else if (ae.request) {
+            logger.error(`Response from ${url} was not received`);
+            logger.error(ae.cause);
+            logger.error(unableToUploadMessage);
+          } else {
+            logger.error(`Request to ${url} could not be sent`);
+            logger.error(e);
+            logger.error(unableToUploadMessage);
+          }
+        }
+      }
+
+      if (uploadResults.success > 0) {
+        logger.info('Successfully uploaded %d source map(s)', uploadResults.success);
+      }
+      if (uploadResults.failed > 0) {
+        logger.error('Failed to upload %d source map(s)', uploadResults.failed);
+      }
+
+      logger.status('Uploading finished\n');
+      callback();
+    }
+  );
+}