-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
feat(remix): Enable Remix SDK #5327
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
Changes from 3 commits
c2c4a05
30ee9e1
bddcab0
e476973
8da97db
0e027e8
a06ae4c
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 |
---|---|---|
|
@@ -6,4 +6,90 @@ | |
|
||
# Official Sentry SDK for Remix | ||
|
||
This SDK is work in progress, and should not be used before officially released. | ||
[](https://www.npmjs.com/package/@sentry/remix) | ||
[](https://www.npmjs.com/package/@sentry/remix) | ||
[](https://www.npmjs.com/package/@sentry/remix) | ||
[](http://getsentry.github.io/sentry-javascript/) | ||
|
||
This SDK is considering experimental and in an alpha state. It may experience breaking changes. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns. | ||
## General | ||
|
||
This package is a wrapper around `@sentry/node` for the server and `@sentry/react` for the client, with added functionality related to Next.js. | ||
|
||
To use this SDK, init Sentry in your remix entry points for both the client and server. | ||
AbhiPrasad marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```javascript | ||
AbhiPrasad marked this conversation as resolved.
Show resolved
Hide resolved
|
||
// entry.client.tsx | ||
|
||
import { useLocation, useMatches } from "@remix-run/react"; | ||
import * as Sentry from "@sentry/remix"; | ||
import { useEffect } from "react"; | ||
|
||
Sentry.init({ | ||
dsn: "__DSN__", | ||
tracesSampleRate: 1, | ||
integrations: [ | ||
new Sentry.BrowserTracing({ | ||
routingInstrumentation: Sentry.remixRouterInstrumentation( | ||
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. nit: Why don't we set these properties for the user inside of 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. Because dependency injection means that we don’t have to deal with importing the functions ourselves, which means we minimize versioning conflicts. also init is usually only done once, so it’s not like folks have to come back and touch this code again, so just letting them pass in the imports is fine. we’ve done this for the rest of our routing instrumentation and never gotten negative feedback. |
||
useEffect, | ||
useLocation, | ||
useMatches, | ||
), | ||
}), | ||
], | ||
// ... | ||
}); | ||
``` | ||
|
||
AbhiPrasad marked this conversation as resolved.
Show resolved
Hide resolved
|
||
```javascript | ||
AbhiPrasad marked this conversation as resolved.
Show resolved
Hide resolved
|
||
// entry.server.tsx | ||
|
||
import { prisma } from "~/db.server"; | ||
|
||
import * as Sentry from "@sentry/remix"; | ||
|
||
Sentry.init({ | ||
dsn: "__DSN__", | ||
tracesSampleRate: 1, | ||
integrations: [new Sentry.Integrations.Prisma({ client: prisma })], | ||
// ... | ||
}); | ||
``` | ||
|
||
To set context information or send manual events, use the exported functions of `@sentry/remix`. | ||
|
||
```javascript | ||
import * as Sentry from '@sentry/remix'; | ||
|
||
// Set user information, as well as tags and further extras | ||
Sentry.configureScope(scope => { | ||
scope.setExtra('battery', 0.7); | ||
scope.setTag('user_mode', 'admin'); | ||
scope.setUser({ id: '4711' }); | ||
// scope.clear(); | ||
}); | ||
|
||
// Add a breadcrumb for future events | ||
Sentry.addBreadcrumb({ | ||
message: 'My Breadcrumb', | ||
// ... | ||
}); | ||
|
||
// Capture exceptions, messages or manual events | ||
Sentry.captureMessage('Hello, world!'); | ||
Sentry.captureException(new Error('Good bye')); | ||
Sentry.captureEvent({ | ||
message: 'Manual', | ||
stacktrace: [ | ||
// ... | ||
], | ||
}); | ||
``` | ||
|
||
## Sourcemaps and Releases | ||
|
||
The Remix SDK provides a script that automatically creates a release and uploads sourcemaps. | ||
|
||
AbhiPrasad marked this conversation as resolved.
Show resolved
Hide resolved
|
||
On release, call `sentry-upload-sourcemaps` to upload source maps and create a release. To see more details on how to use the command, call `sentry-upload-sourcemaps --help`. | ||
|
||
For more advanced configuration, [directly use `sentry-cli` to upload source maps.](https://github.com/getsentry/sentry-cli). |
Uh oh!
There was an error while loading. Please reload this page.