feat(webpack): rely on plugin-core (#1211)

honeybadger-io · Oct 23, 2023 · 6730df8 · 6730df8
1 parent eaa786c
commit 6730df8
Show file tree

Hide file tree

Showing 17 changed files with 370 additions and 1,090 deletions.
diff --git a/packages/plugin-core/test/sourcemaps.test.ts b/packages/plugin-core/test/sourcemaps.test.ts
@@ -3,7 +3,7 @@ import FormData from 'form-data'
 import { Buffer } from 'buffer'
 import { Response, FetchError } from 'node-fetch'
 
-describe('hbUtils', () => {
+describe('sourcemaps', () => {
   const fetchMock = td.func()  
   const hbOptions = {
     endpoint: 'https://honeybadger.io/api/sourcemaps/test',

diff --git a/packages/webpack/example/README.md b/packages/webpack/example/README.md
@@ -5,7 +5,11 @@ Webpack project based [Webpack's example project](https://webpack.js.org/guides/
 Note that currently this project is just used to test the upload of sourcemaps and deploy notifications -- the sourcemaps are not expected to be correctly applied to errors from this project since we didn't set up the revision and assetsUrl. 
 
 ## Setup
-Your API key should be in an environment variable `HONEYBADGER_API_KEY`. You can do this with [direnv](https://direnv.net/) or however you like. 
+Two environment variables are required:
+1. `HONEYBADGER_API_KEY`: Your project's API key
+2. `HONEYBADGER_REVISION`: A unique string. This needs to match between your Honeybadger.configure() and the sourcemap plugin for sourcemaps to be applied. 
+
+You can manage environment variables with [direnv](https://direnv.net/) or however you like. 
 
 ## Testing
 Run `npm run build` to run webpack. You should see a sourcemap and a deploy notification uploaded to Honeybadger.
diff --git a/packages/webpack/example/index.html b/packages/webpack/example/index.html
@@ -5,6 +5,6 @@
     <title>Getting Started</title>
   </head>
   <body>
-    <script src="./dist/index.js"></script>
+    <script src="./dist/index.bundle.js"></script>
   </body>
 </html>
diff --git a/packages/webpack/example/package-lock.json b/packages/webpack/example/package-lock.json
diff --git a/packages/webpack/example/src/hb.js b/packages/webpack/example/src/hb.js
@@ -0,0 +1,8 @@
+const Honeybadger = require('@honeybadger-io/js');
+
+Honeybadger.configure({
+  apiKey: process.env.HONEYBADGER_API_KEY,
+  revision: process.env.HONEYBADGER_REVISION,
+})
+
+export default Honeybadger
diff --git a/packages/webpack/example/src/index.js b/packages/webpack/example/src/index.js
@@ -1,8 +1,4 @@
-const Honeybadger = require('@honeybadger-io/js');
-
-Honeybadger.configure({
-  apiKey: (prompt('Enter the API key for your Honeybadger project:')),
-})
+import Honeybadger from './hb'
 
 function notifyButton() {
   const button = document.createElement('button');

diff --git a/packages/webpack/example/webpack.config.js b/packages/webpack/example/webpack.config.js
@@ -1,18 +1,35 @@
-const path = require('path');
+const path = require('path')
 const HoneybadgerSourceMapPlugin = require('@honeybadger-io/webpack')
+const { EnvironmentPlugin } = require('webpack')
 
 module.exports = {
-  entry: './src/index.js',
+  // Entry here would normally just be the `index.js` file, however
+  // adding multiple entry points generates multiple output files,
+  // allowing us to test multiple source map uploads
+  entry: {
+    index: './src/index.js',
+    hb: './src/hb.js',
+  },
   mode: 'production',
   output: {
-    filename: 'index.js',
+    filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   devtool: 'source-map',
-  plugins: [new HoneybadgerSourceMapPlugin({
-    apiKey: process.env.HONEYBADGER_API_KEY,
-    assetsUrl: 'https://cdn.example.com/assets',
-    revision: 'main',
-    deploy: true
-  })]
+  plugins: [
+    new HoneybadgerSourceMapPlugin({
+      apiKey: process.env.HONEYBADGER_API_KEY,
+      // assetsUrl would normally be a url where your assets are hosted
+      // This is just to test locally, so it's a folder path instead
+      assetsUrl: '*/dist',
+      revision: process.env.HONEYBADGER_REVISION,
+      deploy: {
+        environment: 'test', 
+        localUsername: 'hbTestUser',
+      }
+    }), 
+    // Be aware that if you use EnvironmentPlugin, the values of those env variables
+    // get bundled into your code as strings. 
+    new EnvironmentPlugin(['HONEYBADGER_API_KEY', 'HONEYBADGER_REVISION'])
+  ]
 };