-
Notifications
You must be signed in to change notification settings - Fork 229
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
Adding Remix documentation #86
base: main
Are you sure you want to change the base?
Changes from 9 commits
c69a8d1
1049e3d
5a668c0
ff26181
0c26c17
aef12e5
03dfb18
e151cfe
bf62f03
cfa6b90
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
# 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 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 | ||
|
||
### Install | ||
|
||
```bash | ||
npm install @hyperdx/browser | ||
``` | ||
|
||
### Initialize HyperDX in root.tsx file | ||
|
||
```js | ||
import HyperDX from '@hyperdx/browser'; | ||
|
||
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 | ||
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. | ||
|
||
This will enable additional Remix specific spans. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is it possible to expand on what kind of spans (ex. what is being instrumented and/or what class of problems would that isntrumentation solve?). The statement as is, is a bit vague and wouldn't give me much info to make a decision whether this step is worth doing. I think if it's possible for us to have a concise example of some benefits of enabling it, that'd be awesome. Or at the minimum perhaps just linking out to the event types in the docs. |
||
|
||
### Install | ||
MikeShi42 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```bash | ||
npm install opentelemetry-instrumentation-remix | ||
``` | ||
|
||
#### Create instrument.js file in application folder | ||
|
||
```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()] | ||
}); | ||
``` | ||
|
||
### Run the Application with HyperDX | ||
|
||
#### Using NPX | ||
|
||
```bash | ||
HYPERDX_API_KEY='<YOUR_HYPERDX_API_KEY>' OTEL_SERVICE_NAME='<YOUR_APP_NAME>' NODE_OPTIONS='-r <REALATIVE_TRACKING.JS_PATH>' remix dev | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We also want to make sure this works with the command in prod env There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. does this assume users have 'remix' cli installed ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not sure if you guys already discussed this, but I'm wondering if it's better to just bundle remix into the default SDK setup so Remix users get a first-class experience as well? |
||
``` | ||
|
||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would this be more appropriate in
entry.client.tsx
?