Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 14 commits into from
Oct 23, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/plugin-core/test/sourcemaps.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 5 additions & 1 deletion packages/webpack/example/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion packages/webpack/example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
18 changes: 4 additions & 14 deletions packages/webpack/example/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions packages/webpack/example/src/hb.js
Original file line number Diff line number Diff line change
@@ -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
6 changes: 1 addition & 5 deletions packages/webpack/example/src/index.js
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
35 changes: 26 additions & 9 deletions packages/webpack/example/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

// get bundled into your code as strings.
new EnvironmentPlugin(['HONEYBADGER_API_KEY', 'HONEYBADGER_REVISION'])
]
};
Loading