From c69a8d199b2841b709d396e529bbda1aef54645d Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman Date: Tue, 7 Nov 2023 22:58:29 -0800 Subject: [PATCH 01/10] Adding Remix Documentation --- Remix_Documentation/Remix.md | 74 ++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 Remix_Documentation/Remix.md diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md new file mode 100644 index 000000000..52128ee53 --- /dev/null +++ b/Remix_Documentation/Remix.md @@ -0,0 +1,74 @@ +# Remix + +HyperDX comes with simple to use out-of-the box Remix support via out browser SDK. The browser SDK allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example [Node.js](https://www.hyperdx.io/docs/install/javascript). + +## Getting Started + +### Install + +```bash +npm install @hyperdx/browser +``` + +### Initialize HyperDX + +```js +import HyperDX from '@hyperdx/browser'; + +HyperDX.init({ + apiKey: '', + service: 'my-frontend-app', + tracePropagationTargets: [/api.myapp.domain/i], // Set to link traces from frontend to backend requests + consoleCapture: true, // Capture console logs (default false) + advancedNetworkCapture: true, // Capture full HTTP request/response headers and bodies (default false) +}); +``` + +### (Optional) Attach User Information or Metadata + +Attaching user information will allow you to search/filter sessions and events in HyperDX. This can be called at any point during the client session. The current client session and all events sent after the call will be associated with the user information. + +`userEmail`, `userName`, and `teamName` will populate the sessions UI with the corresponding values, but can be omitted. Any other additional values can be specified and used to search for events. + +```js +HyperDX.setGlobalAttributes({ + userEmail: user.email, + userName: user.name, + teamName: user.team.name, + // 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', +}); +``` + +### (Optional) Route Tracking + +To explicitly track a routes we recommend using custom actions per routes. + +Example: + +```js +HyperDX.addAction('/form-page', { + endpoint: 'form-page' +}); +``` + +### (Optional) Enable Network Capture Dynamically + +To enable or disable network capture dynamically, simply invoke the `enableAdvancedNetworkCapture` or `disableAdvancedNetworkCapture` function as needed. + +```js +HyperDX.enableAdvancedNetworkCapture(); +``` From 1049e3d20c0b15630f273dafd18188ea2e3d61fa Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman Date: Tue, 7 Nov 2023 23:09:10 -0800 Subject: [PATCH 02/10] quick wording change --- Remix_Documentation/Remix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index 52128ee53..98348ef27 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -1,6 +1,6 @@ # Remix -HyperDX comes with simple to use out-of-the box Remix support via out browser SDK. The browser SDK allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example [Node.js](https://www.hyperdx.io/docs/install/javascript). +HyperDX comes with simple to use out-of-the box Remix support via out browser SDK. The browser SDK allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example when using [Node.js](https://www.hyperdx.io/docs/install/javascript) servers like Express, Vercel, Netlify, Architect, etc. ## Getting Started From 5a668c0b06a788ce81f4721730c41e5ef178b1e1 Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman Date: Tue, 7 Nov 2023 23:48:00 -0800 Subject: [PATCH 03/10] changes after discussing with Warren --- Remix_Documentation/Remix.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index 98348ef27..e71797382 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -2,6 +2,8 @@ HyperDX comes with simple to use out-of-the box Remix support via out browser SDK. The browser SDK allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example when using [Node.js](https://www.hyperdx.io/docs/install/javascript) servers like Express, Vercel, Netlify, Architect, etc. +#### (Optional) Use [opentelemetry-instrumentation-remix](https://github.com/justindsmith/opentelemetry-instrumentations-js/tree/main/packages/instrumentation-remix) package for Node.js servers. + ## Getting Started ### Install @@ -10,7 +12,7 @@ HyperDX comes with simple to use out-of-the box Remix support via out browser SD npm install @hyperdx/browser ``` -### Initialize HyperDX +### Initialize HyperDX in root.tsx ```js import HyperDX from '@hyperdx/browser'; @@ -57,13 +59,6 @@ HyperDX.addAction('Form-Completed', { To explicitly track a routes we recommend using custom actions per routes. -Example: - -```js -HyperDX.addAction('/form-page', { - endpoint: 'form-page' -}); -``` ### (Optional) Enable Network Capture Dynamically From ff261819884b9a074f9443d9adffbfbdd9278c15 Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman Date: Wed, 8 Nov 2023 00:43:28 -0800 Subject: [PATCH 04/10] moving to just link to browser sdk --- Remix_Documentation/Remix.md | 66 +----------------------------------- 1 file changed, 1 insertion(+), 65 deletions(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index e71797382..6ab9034fd 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -1,69 +1,5 @@ # Remix -HyperDX comes with simple to use out-of-the box Remix support via out browser SDK. The browser SDK allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example when using [Node.js](https://www.hyperdx.io/docs/install/javascript) servers like Express, Vercel, Netlify, Architect, etc. +HyperDX comes with simple to use out-of-the box Remix support via out [browser SDK](https://www.hyperdx.io/docs/install/browser). The [browser SDK](https://www.hyperdx.io/docs/install/browser) allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example when using [Node.js](https://www.hyperdx.io/docs/install/javascript) servers like Express, Vercel, Netlify, Architect, etc. #### (Optional) Use [opentelemetry-instrumentation-remix](https://github.com/justindsmith/opentelemetry-instrumentations-js/tree/main/packages/instrumentation-remix) package for Node.js servers. - -## Getting Started - -### Install - -```bash -npm install @hyperdx/browser -``` - -### Initialize HyperDX in root.tsx - -```js -import HyperDX from '@hyperdx/browser'; - -HyperDX.init({ - apiKey: '', - service: 'my-frontend-app', - tracePropagationTargets: [/api.myapp.domain/i], // Set to link traces from frontend to backend requests - consoleCapture: true, // Capture console logs (default false) - advancedNetworkCapture: true, // Capture full HTTP request/response headers and bodies (default false) -}); -``` - -### (Optional) Attach User Information or Metadata - -Attaching user information will allow you to search/filter sessions and events in HyperDX. This can be called at any point during the client session. The current client session and all events sent after the call will be associated with the user information. - -`userEmail`, `userName`, and `teamName` will populate the sessions UI with the corresponding values, but can be omitted. Any other additional values can be specified and used to search for events. - -```js -HyperDX.setGlobalAttributes({ - userEmail: user.email, - userName: user.name, - teamName: user.team.name, - // 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', -}); -``` - -### (Optional) Route Tracking - -To explicitly track a routes we recommend using custom actions per routes. - - -### (Optional) Enable Network Capture Dynamically - -To enable or disable network capture dynamically, simply invoke the `enableAdvancedNetworkCapture` or `disableAdvancedNetworkCapture` function as needed. - -```js -HyperDX.enableAdvancedNetworkCapture(); -``` From 0c26c17f8004f71b6eb32a083d116981a0bcb2a1 Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman <76828502+NCHitsman@users.noreply.github.com> Date: Thu, 9 Nov 2023 19:27:43 -0800 Subject: [PATCH 05/10] Update Remix.md --- Remix_Documentation/Remix.md | 48 ++++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index 6ab9034fd..d4c81071c 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -1,5 +1,49 @@ # Remix -HyperDX comes with simple to use out-of-the box Remix support via out [browser SDK](https://www.hyperdx.io/docs/install/browser). The [browser SDK](https://www.hyperdx.io/docs/install/browser) allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example when using [Node.js](https://www.hyperdx.io/docs/install/javascript) servers like Express, Vercel, Netlify, Architect, etc. +HyperDX comes with simple to use out-of-the box Remix support via our [browser SDK](https://www.hyperdx.io/docs/install/browser). The [browser SDK](https://www.hyperdx.io/docs/install/browser) allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example when using [Node.js](https://www.hyperdx.io/docs/install/javascript) servers like Express, Vercel, Netlify, Architect, etc. -#### (Optional) Use [opentelemetry-instrumentation-remix](https://github.com/justindsmith/opentelemetry-instrumentations-js/tree/main/packages/instrumentation-remix) package for Node.js servers. +## Getting Started + +### Install + +```bash +npm install @hyperdx/browser +``` + +### Initialize HyperDX + +```js +import HyperDX from '@hyperdx/browser'; + +HyperDX.init({ + apiKey: '', + service: 'my-frontend-app', + tracePropagationTargets: [/api.myapp.domain/i], // Set to link traces from frontend to backend requests + consoleCapture: true, // Capture console logs (default false) + advancedNetworkCapture: true, // Capture full HTTP request/response headers and bodies (default false) +}); +``` + +## (Optional) Use [opentelemetry-instrumentation-remix](https://github.com/justindsmith/opentelemetry-instrumentations-js/tree/main/packages/instrumentation-remix) package for Node.js servers. + +### Install + +```bash +npm install opentelemetry-instrumentation-remix +``` + +#### Create tracing.js file in application folder + +### Initilize SDK + +```js +const { initSDK } = require('@hyperdx/node-opentelemetry'); +const { RemixInstrumentation } = require('opentelemetry-instrumentation-remix'); + + +initSDK({ + consoleCapture: true, // optional, default: true + advancedNetworkCapture: true, // optional, default: false + additionalInstrumentations: [new RemixInstrumentation()] +}); +``` From aef12e59432f3488823244bd17849adf096920e4 Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman <76828502+NCHitsman@users.noreply.github.com> Date: Thu, 9 Nov 2023 19:43:06 -0800 Subject: [PATCH 06/10] Update Remix.md --- Remix_Documentation/Remix.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index d4c81071c..493f4989f 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -34,8 +34,6 @@ npm install opentelemetry-instrumentation-remix #### Create tracing.js file in application folder -### Initilize SDK - ```js const { initSDK } = require('@hyperdx/node-opentelemetry'); const { RemixInstrumentation } = require('opentelemetry-instrumentation-remix'); @@ -47,3 +45,14 @@ initSDK({ additionalInstrumentations: [new RemixInstrumentation()] }); ``` + +### Run the Application with HyperDX + +#### Using NPX + +```bash +HYPERDX_API_KEY='' OTEL_SERVICE_NAME='' NODE_OPTIONS='-r ' remix dev +``` + + + From 03dfb18772b511246e8c5b6dd73f814d6f0f075e Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman <76828502+NCHitsman@users.noreply.github.com> Date: Thu, 9 Nov 2023 20:25:51 -0800 Subject: [PATCH 07/10] Update Remix.md --- Remix_Documentation/Remix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index 493f4989f..fa193121e 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -10,7 +10,7 @@ HyperDX comes with simple to use out-of-the box Remix support via our [browser S npm install @hyperdx/browser ``` -### Initialize HyperDX +### Initialize HyperDX in root.tsx file ```js import HyperDX from '@hyperdx/browser'; From e151cfecc76644e560f19847499b7c4c9a6ae813 Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman <76828502+NCHitsman@users.noreply.github.com> Date: Thu, 9 Nov 2023 20:32:50 -0800 Subject: [PATCH 08/10] Update Remix.md --- Remix_Documentation/Remix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index fa193121e..21fb039dd 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -32,7 +32,7 @@ HyperDX.init({ npm install opentelemetry-instrumentation-remix ``` -#### Create tracing.js file in application folder +#### Create instrument.js file in application folder ```js const { initSDK } = require('@hyperdx/node-opentelemetry'); From bf62f031270fd3ec40b0fad5de606bc749242743 Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman <76828502+NCHitsman@users.noreply.github.com> Date: Fri, 10 Nov 2023 10:12:15 -0800 Subject: [PATCH 09/10] Update Remix.md --- Remix_Documentation/Remix.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index 21fb039dd..6b6c3edac 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -1,6 +1,6 @@ # Remix -HyperDX comes with simple to use out-of-the box Remix support via our [browser SDK](https://www.hyperdx.io/docs/install/browser). The [browser SDK](https://www.hyperdx.io/docs/install/browser) allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example when using [Node.js](https://www.hyperdx.io/docs/install/javascript) servers like Express, Vercel, Netlify, Architect, etc. +HyperDX comes with simple to use out-of-the box Remix support via our [browser SDK](https://www.hyperdx.io/docs/install/browser). The browser SDK allows you to intrument your frontend application to send events, route logs, and session data to HyperDX. We also have multiple backend integrations depending on your Remix Stack, for example when using [Node.js](https://www.hyperdx.io/docs/install/javascript) servers like Express, Vercel, Netlify, Architect, etc. ## Getting Started @@ -26,6 +26,8 @@ HyperDX.init({ ## (Optional) Use [opentelemetry-instrumentation-remix](https://github.com/justindsmith/opentelemetry-instrumentations-js/tree/main/packages/instrumentation-remix) package for Node.js servers. +This will enable additional Remix specific spans. + ### Install ```bash From cfa6b90c3c773feef4455d321bdf3674a74ce5f7 Mon Sep 17 00:00:00 2001 From: Noah Carmichael-Hitsman <76828502+NCHitsman@users.noreply.github.com> Date: Sat, 11 Nov 2023 15:19:15 -0800 Subject: [PATCH 10/10] Update Remix.md --- Remix_Documentation/Remix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Remix_Documentation/Remix.md b/Remix_Documentation/Remix.md index 6b6c3edac..eff4b3bbd 100644 --- a/Remix_Documentation/Remix.md +++ b/Remix_Documentation/Remix.md @@ -26,7 +26,7 @@ HyperDX.init({ ## (Optional) Use [opentelemetry-instrumentation-remix](https://github.com/justindsmith/opentelemetry-instrumentations-js/tree/main/packages/instrumentation-remix) package for Node.js servers. -This will enable additional Remix specific spans. +This will enable additional remix.request specific spans. ### Install