feat: add main-thread blocking detection (Long Tasks + LoAF + web Vitals)

packages/javascript/README.md

@@ -11,6 +11,9 @@ Error tracking for JavaScript/TypeScript applications.
 - 🛡️ Sensitive data filtering
 - 🌟 Source maps consuming
 - 💬 Console logs tracking
+- 🧊 Main-thread blocking detection (Long Tasks + LoAF, Chromium-only)
+- 📊 Web Vitals issues monitoring
+- ⚙️ Unified `issues` configuration (errors + performance detectors)
 - <img src="https://cdn.svglogos.dev/logos/vue.svg" width="16" height="16"> &nbsp;Vue support
 - <img src="https://cdn.svglogos.dev/logos/react.svg" width="16" height="16">  &nbsp;React support
 
@@ -85,11 +88,11 @@ Initialization settings:
 | `user`                        | {id: string, name?: string, image?: string, url?: string} | optional     | Current authenticated user                                                          |
 | `context`                     | object                                                    | optional     | Any data you want to pass with every message. Has limitation of length.             |
 | `vue`                         | Vue constructor                                           | optional     | Pass Vue constructor to set up the [Vue integration](#integrate-to-vue-application) |
-| `disableGlobalErrorsHandling` | boolean                                                   | optional     | Do not initialize global errors handling                                            |
 | `disableVueErrorHandler`      | boolean                                                   | optional     | Do not initialize Vue errors handling                                               |
 | `consoleTracking`             | boolean                                                   | optional     | Initialize console logs tracking                                                    |
 | `breadcrumbs`                 | false or BreadcrumbsOptions object                        | optional     | Configure breadcrumbs tracking (see below)                                          |
 | `beforeSend`                  | function(event) => event \| false \| void                 | optional     | Filter data before sending. Return modified event, `false` to drop the event.       |
+| `issues`                      | IssuesOptions object                                      | optional     | Issues config. See [Issues configuration](#issues-configuration). |
 
 Other available [initial settings](types/hawk-initial-settings.d.ts) are described at the type definition.
 
@@ -232,6 +235,104 @@ const breadcrumbs = hawk.breadcrumbs.get();
 hawk.breadcrumbs.clear();
 ```
 
+## Issues configuration
+
+The `issues` option configures automatic performance and error tracking.
+
+| detector | key | default threshold | what it reports |
+|---|---|---|---|
+| **Errors** | `issues.errors` | — | Global runtime errors (`window.onerror`, `unhandledrejection`) |
+| **Web Vitals** | `issues.webVitals` | custom `reportPoorAbove` per metric | Core Web Vitals that pass Hawk report thresholds (`LCP`, `FCP`, `TTFB`, `INP`, `CLS`) |
+| **Long Tasks** | `issues.longTasks` | `100 ms` | Tasks with identifiable container (`containerSrc`, `containerId`, or `containerName`) |
+| **Long Animation Frames** | `issues.longAnimationFrames` | `300 ms` | Frames where at least one script attribution has `sourceURL`, `sourceFunctionName`, or `invoker` |
+
+All detectors are enabled by default.
+If the browser does not support a specific Performance API (`longtask`, `long-animation-frame`), the corresponding detector is silently skipped.
+
+Performance data is transmitted in the event **addons** (keys: `Long Task`, `Long Animation Frame`, `Web Vitals`).
+
+### Web Vitals
+
+When `issues.webVitals` is enabled, Hawk subscribes to Core Web Vitals via the `web-vitals` library and sends one issue per metric name per page load when metric value exceeds the configured `reportPoorAbove` threshold.
+
+Default `reportPoorAbove` values:
+
+| metric | default `reportPoorAbove` |
+|---|---|
+| `CLS` | `0.35` |
+| `INP` | `700` |
+| `LCP` | `5000` |
+| `FCP` | `4000` |
+| `TTFB` | `2500` |
+
+You can override them:
+
+```js
+const hawk = new HawkCatcher({
+  token: 'INTEGRATION_TOKEN',
+  issues: {
+    webVitals: {
+      reportPoorAbove: {
+        CLS: 0.3,
+        INP: 600,
+        LCP: 4500,
+        FCP: 3500,
+        TTFB: 2200,
+      }
+    }
+  }
+});
+```
+
+`web-vitals` is included in the SDK dependencies — no extra installation required.
+
+### Disabling
+
+Disable **all** automatic issue tracking (errors, Web Vitals, Long Tasks, LoAF).
+Manual sending via `hawk.send()` still works:
+
+```js
+const hawk = new HawkCatcher({
+  token: 'INTEGRATION_TOKEN',
+  issues: false
+});
+```
+
+Disable only global errors handling:
+
+```js
+const hawk = new HawkCatcher({
+  token: 'INTEGRATION_TOKEN',
+  issues: {
+    errors: false
+  }
+});
+```
+
+### Selective Configuration
+
+Enable or disable individual detectors, optionally overriding thresholds (minimum `50 ms`):
+
+```js
+const hawk = new HawkCatcher({
+  token: 'INTEGRATION_TOKEN',
+  issues: {
+    errors: true,
+    webVitals: {
+      reportPoorAbove: {
+        INP: 600
+      }
+    },
+    longTasks: {
+      thresholdMs: 70
+    },
+    longAnimationFrames: {
+      thresholdMs: 200
+    }
+  }
+});
+```
+
 ## Source maps consuming
 
 If your bundle is minified, it is useful to pass source-map files to the Hawk. After that you will see beautiful

packages/javascript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hawk.so/javascript",
-  "version": "3.2.18",
+  "version": "3.3.0",
   "description": "JavaScript errors tracking for Hawk.so",
   "files": [
     "dist"
@@ -39,7 +39,8 @@
   },
   "homepage": "https://github.com/codex-team/hawk.javascript#readme",
   "dependencies": {
-    "error-stack-parser": "^2.1.4"
+    "error-stack-parser": "^2.1.4",
+    "web-vitals": "^5.1.0"
   },
   "devDependencies": {
     "@hawk.so/types": "0.5.8",