feat: enable page visibility + console instrumentation (#30)

* chore: bump @hyperdx/otel-web + otel-web-session-recorder to v0.16.2-1 * feat: captureConsole flag * chore: lock versions * feat: expose addAction method * fix: typo * style: attributes type * docs: captureConsole flag * docs: send custom actions * Update README.md * chore: bump pkgs * docs: add changeset --------- Co-authored-by: Mike Shi <[email protected]>
hyperdxio · Aug 7, 2023 · 9e5d1c2 · 9e5d1c2
1 parent a56eba7
commit 9e5d1c2
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 10 deletions.
diff --git a/.changeset/good-gifts-glow.md b/.changeset/good-gifts-glow.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/browser': minor
+---
+
+feat: enable page visibility + console instrumentation
diff --git a/packages/browser/README.md b/packages/browser/README.md
@@ -15,6 +15,7 @@ HyperDX.init({
   apiKey: '<YOUR_API_KEY_HERE>',
   service: 'my-frontend-app',
   tracePropagationTargets: [/api.myapp.domain/i], // Set to link traces from frontend to backend requests
+  captureConsole: true, // Capture console logs (default false)
 });
 ```
 
@@ -32,3 +33,17 @@ HyperDX.setGlobalAttributes({
   // Other custom properties...
 });
 ```
+
+### (Optional) Send Custom Actions
+
+To explicitly track a specific application event (ex. sign up, submission, etc.), you can call the `addAction` function with an event name and optional event metadata.
+
+Example:
+
+```js
+HyperDX.addAction('Form-Completed', {
+  formId: 'signup-form',
+  formName: 'Signup Form',
+  formType: 'signup',
+});
+```
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -5,8 +5,8 @@
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "dependencies": {
-    "@hyperdx/otel-web": "0.16.2-0",
-    "@hyperdx/otel-web-session-recorder": "0.16.2-0"
+    "@hyperdx/otel-web": "0.16.2-2",
+    "@hyperdx/otel-web-session-recorder": "0.16.2-2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.1.0",

diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
@@ -25,6 +25,7 @@ class Browser {
     instrumentations = {},
     disableReplay = false,
     disableIntercom = false,
+    captureConsole = false,
     blockClass,
     ignoreClass,
     maskClass,
@@ -38,6 +39,7 @@ class Browser {
     instrumentations?: Instrumentations;
     disableReplay?: boolean;
     disableIntercom?: boolean;
+    captureConsole?: boolean;
     blockClass?: string;
     ignoreClass?: string;
     maskClass?: string;
@@ -54,6 +56,8 @@ class Browser {
       apiKey,
       app: service,
       instrumentations: {
+        visibility: true,
+        console: captureConsole,
         fetch: {
           ...(tracePropagationTargets != null
             ? {
@@ -116,6 +120,14 @@ class Browser {
     }
   }
 
+  addAction(name: string, attributes?: Record<string, any>) {
+    if (!hasWindow()) {
+      return;
+    }
+
+    Rum.addAction(name, attributes);
+  }
+
   setGlobalAttributes(
     attributes: Record<
       'userEmail' | 'userName' | 'teamName' | 'teamId' | string,

diff --git a/yarn.lock b/yarn.lock
@@ -682,10 +682,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@hyperdx/[email protected]0":
-  version "0.16.2-0"
-  resolved "https://registry.yarnpkg.com/@hyperdx/otel-web-session-recorder/-/otel-web-session-recorder-0.16.2-0.tgz#9ce817eddea92dc1adc459d86cd0291ceba1aeaf"
-  integrity sha512-uCc1xFYWCN1102G3XoyW6uTuFMgL10Re9GcR95GPovi9E2hj9Yvn0M4E4LmxFU1BSZ1yDXvIxo/NFqy+mMnmDA==
+"@hyperdx/[email protected]2":
+  version "0.16.2-2"
+  resolved "https://registry.yarnpkg.com/@hyperdx/otel-web-session-recorder/-/otel-web-session-recorder-0.16.2-2.tgz#f8f9b042abb7b3141ed3864c25bb2fc7283ebe96"
+  integrity sha512-dawZ5dDqWRdhxwe2ijjC2iuxXoSpoiRbzBbzsZldh840Awu5JhXsq1Y27wL7fH8ZRjiwfAJ7v24CljsvsZPpzg==
   dependencies:
     "@babel/runtime" "~7.18.3"
     "@opentelemetry/api" "^1.4.1"
@@ -696,10 +696,10 @@
     rrweb "^1.1.3"
     type-fest "^3.7.2"
 
-"@hyperdx/[email protected]0":
-  version "0.16.2-0"
-  resolved "https://registry.yarnpkg.com/@hyperdx/otel-web/-/otel-web-0.16.2-0.tgz#dda04e699bfebbdc8737fcdb97f9af60c10132aa"
-  integrity sha512-tRLlGc1exoWliBSlaZYWXcdce7G5CEA4OIqRN1YoNqzbnLEQv6J1Xs1r5DSdjtFPb7lOritLNtAOtUjulwv1FA==
+"@hyperdx/[email protected]2":
+  version "0.16.2-2"
+  resolved "https://registry.yarnpkg.com/@hyperdx/otel-web/-/otel-web-0.16.2-2.tgz#ed954647b3c0819a70d2cee7824b9dbe5741b4e8"
+  integrity sha512-vaKqupon63XV+alEx++JHpuCXgsTiI7cCWHERMNPjkuow7nzIGAYklVU4gtSEp+79W16zahEBiWsykxYjdJbkQ==
   dependencies:
     "@babel/runtime" "^7.21.0"
     "@opentelemetry/api" "^1.4.1"
@@ -715,6 +715,8 @@
     "@opentelemetry/sdk-trace-base" "^1.14.0"
     "@opentelemetry/sdk-trace-web" "^1.14.0"
     "@opentelemetry/semantic-conventions" "^1.14.0"
+    json-stringify-safe "^5.0.1"
+    lodash "^4.17.21"
     shimmer "^1.2.1"
     web-vitals "^3.3.2"