Skip to content

Commit af0494e

Browse files
e11sye11sy
authored
Merge pull request #45 from codex-team/improve-example
Imp(example): new example that allows send events with hawk javascript catcher
2 parents 82706f6 + 89c1672 commit af0494e

File tree

11 files changed

+2889
-1815
lines changed

11 files changed

+2889
-1815
lines changed

‎example/README.md‎

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,58 @@ HAWK_TOKEN = ""
99

1010
Then, get it in node process through the [dotenv](https://github.com/motdotla/dotenv) package.
1111

12-
```js
13-
// webpack.config.js
14-
const HawkWebpackPlugin = require('@hawk.so/webpack-plugin');
15-
const dotenv = require('dotenv');
12+
```cjs
13+
// webpack.config.cjs
1614

17-
dotenv.config()
15+
const path = require("path");
16+
const webpack = require("webpack");
17+
const TerserPlugin = require("terser-webpack-plugin");
18+
const HawkWebpackPlugin = require("@hawk.so/webpack-plugin");
19+
20+
/**
21+
* Add ability to use .env file in webpack.config.cjs
22+
* It is used to get HAWK_TOKEN from env variables
23+
*/
24+
require('dotenv').config();
25+
26+
/**
27+
* Create a random release key that will be used in HawkWebpackPlugin and in HawkCatcher
28+
*/
29+
const releaseKey = [...Array(10)].map(() => Math.random().toString(36)[2]).join('');
1830

1931
module.exports = {
32+
mode: "production",
33+
entry: "./src/index.js",
34+
output: {
35+
filename: "bundle.js",
36+
path: path.resolve(__dirname, "dist"),
37+
clean: true,
38+
},
2039
plugins: [
2140
new HawkWebpackPlugin({
22-
integrationToken: process.env.HAWK_TOKEN
23-
})
41+
integrationToken: process.env.HAWK_TOKEN,
42+
release: releaseKey,
43+
}),
44+
45+
/**
46+
* Replace HAWK_TOKEN and RELEASE with actual values
47+
* It is used for cathcer to get hawk token and release key
48+
*/
49+
new webpack.DefinePlugin({
50+
'HAWK_TOKEN': JSON.stringify(process.env.HAWK_TOKEN),
51+
'RELEASE': JSON.stringify(releaseKey),
52+
}),
2453
],
25-
devtool: 'hidden-source-map',
26-
}
54+
optimization: {
55+
minimize: true,
56+
minimizer: [new TerserPlugin()],
57+
},
58+
devtool: "hidden-source-map",
59+
};
60+
2761
```
2862

29-
The release id is not specified manually, so the plugin will use webpack compilation hash.
30-
We'll access it through the `release.json` file, that will be created at the output directory.
63+
In this example we pass the manually created release key to the HawkWebpackPlugin.
64+
65+
If the release id is not specified manually, then the plugin will use webpack compilation hash.
66+
We'll could access it through the `release.json` file, that will be created at the output directory.

‎example/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Webpack App</title>
7+
</head>
8+
<body>
9+
<button id="myButton">Click me</button>
10+
<script src="./bundle.js"></script>
11+
</body>
12+
</html>

‎example/package.json‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
{
2-
"name": "@hawk/wepack-plugin-example",
2+
"name": "@hawk/webpack-plugin-example",
33
"version": "0.0.1",
44
"description": "This package demonstrates how to connect and use the Hawk Webpack Plugin",
55
"main": "src/index.js",
66
"author": "CodeX <[email protected]>",
77
"license": "MIT",
88
"private": false,
99
"scripts": {
10-
"build": "webpack"
10+
"build": "webpack",
11+
"serve": "serve -s dist"
1112
},
1213
"dependencies": {
13-
"webpack": "^4.41.4",
14-
"webpack-cli": "^3.3.10"
14+
"@hawk.so/javascript": "^3.2.0"
1515
},
1616
"devDependencies": {
17-
"dotenv": "^8.2.0"
17+
"@hawk.so/webpack-plugin": "^1.0.3",
18+
"dotenv": "^16.3.1",
19+
"dotenv-webpack": "^8.1.0",
20+
"html-webpack-plugin": "^5.6.3",
21+
"serve": "^14.2.4",
22+
"terser-webpack-plugin": "^5.3.11",
23+
"webpack": "^5.98.0",
24+
"webpack-cli": "^6.0.1",
25+
"webpack-dev-server": "^5.2.0"
1826
}
1927
}

‎example/src/hawkInstance.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import HawkCatcher from '@hawk.so/javascript';
2+
3+
export const hawk = new HawkCatcher({
4+
/**
5+
* Token and release would be replaced with actual values by webpack.definePlugin
6+
*/
7+
token: HAWK_TOKEN,
8+
release: RELEASE,
9+
});

‎example/src/index.js‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,13 @@
22
* This is an example of js-application
33
* that will be bundled by Webpack with source map creation
44
*/
5-
import ModuleA from './moduleA';
6-
import ModuleB from './moduleB';
5+
import ErrorTrigger from './modules/ErrorTrigger';
6+
7+
const errorTrigger = new ErrorTrigger();
78

89
/**
9-
* Sample class constructor
10+
* Example of a simple js application, that triggers console and hawk message on button click
1011
*/
11-
export default class SampleApplication {
12-
/**
13-
* Sample app constructor
14-
*/
15-
constructor() {
16-
this.moduleA = new ModuleA();
17-
this.moduleB = new ModuleB();
18-
}
19-
}
12+
document.addEventListener("DOMContentLoaded", () => {
13+
document.getElementById("myButton").addEventListener("click", errorTrigger.trigger);
14+
});

‎example/src/moduleA.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎example/src/moduleB.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎example/src/modules/ErrorTrigger.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { hawk } from '../hawkInstance';
2+
3+
/**
4+
* This functions is an example of sending a message with hawk cather
5+
*/
6+
export default class ErrorTrigger {
7+
/**
8+
* This is function that triggers an error
9+
*/
10+
trigger() {
11+
throw new Error('This is a test error');
12+
}
13+
}

‎example/webpack.config.cjs‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
const HtmlWebpackPlugin = require("html-webpack-plugin");
4+
const TerserPlugin = require("terser-webpack-plugin");
5+
const HawkWebpackPlugin = require("@hawk.so/webpack-plugin");
6+
require('dotenv').config();
7+
8+
const releaseKey = [...Array(10)].map(() => Math.random().toString(36)[2]).join('');
9+
10+
module.exports = {
11+
mode: "production",
12+
entry: "./src/index.js",
13+
output: {
14+
filename: "bundle.js",
15+
path: path.resolve(__dirname, "dist"),
16+
clean: true,
17+
},
18+
plugins: [
19+
new HtmlWebpackPlugin({
20+
template: "./index.html",
21+
}),
22+
new HawkWebpackPlugin({
23+
integrationToken: process.env.HAWK_TOKEN,
24+
release: releaseKey,
25+
}),
26+
new webpack.DefinePlugin({
27+
'HAWK_TOKEN': JSON.stringify(process.env.HAWK_TOKEN),
28+
'RELEASE': JSON.stringify(releaseKey),
29+
}),
30+
],
31+
resolve: {
32+
fallback: {
33+
"fs": false,
34+
"process": false
35+
}
36+
},
37+
optimization: {
38+
minimize: true,
39+
minimizer: [new TerserPlugin()],
40+
},
41+
devServer: {
42+
static: path.resolve(__dirname, "dist"),
43+
compress: true,
44+
port: 9000,
45+
},
46+
devtool: "hidden-source-map",
47+
};

‎example/webpack.config.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)