Uh oh!
There was an error while loading. Please reload this page.
feat(remix): Enable Remix SDK#5327
Uh oh!
There was an error while loading. Please reload this page.
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -6,4 +6,128 @@ | ||||||
| # Official Sentry SDK for Remix | ||||||
| [](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 Remix. | ||||||
| To use this SDK, initialize Sentry in your Remix entry points for both the client and server. | ||||||
| ```ts | ||||||
| // 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( | ||||||
| useEffect, | ||||||
| useLocation, | ||||||
| useMatches, | ||||||
| ), | ||||||
| }), | ||||||
| ], | ||||||
| // ... | ||||||
| }); | ||||||
| ``` | ||||||
AbhiPrasad marked this conversation as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||||||
| ```ts | ||||||
| // 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 })], | ||||||
| // ... | ||||||
| }); | ||||||
| ``` | ||||||
| Also, wrap your Remix root, with Sentry's `ErrorBoundary` component to catch React component errors, and `withSentryRouteTracing` to get parameterized router transactions. | ||||||
| ```ts | ||||||
| // root.tsx | ||||||
| import { | ||||||
| Links, | ||||||
| LiveReload, | ||||||
| Meta, | ||||||
| Outlet, | ||||||
| Scripts | ||||||
| ScrollRestoration, | ||||||
| } from "@remix-run/react"; | ||||||
| import { ErrorBoundary, withSentryRouteTracing } from "@sentry/remix"; | ||||||
| function App() { | ||||||
| return ( | ||||||
| <ErrorBoundary> | ||||||
| <html> | ||||||
| <head> | ||||||
| <Meta /> | ||||||
| <Links /> | ||||||
| </head> | ||||||
| <body> | ||||||
| <Outlet /> | ||||||
| <ScrollRestoration /> | ||||||
| <Scripts /> | ||||||
| <LiveReload /> | ||||||
| </body> | ||||||
| </html> | ||||||
| </ErrorBoundary> | ||||||
| ); | ||||||
| } | ||||||
| export default withSentryRouteTracing(App); | ||||||
| ``` | ||||||
| To set context information or send manual events, use the exported functions of `@sentry/remix`. | ||||||
| ```ts | ||||||
| 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. To generate sourcemaps with Remix, you need to call `remix build` with `--sourcemap` option. | ||||||
Contributor There was a problem hiding this comment.
Suggested change
| ||||||
AbhiPrasad marked this conversation as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||||||
| 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). | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
nit: Why don't we set these properties for the user inside of
remixRouterInstrumentationinstead of asking them to do this?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.
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.