diff --git a/packages/remix/README.md b/packages/remix/README.md index ddb0c643a869..826159aa47c9 100644 --- a/packages/remix/README.md +++ b/packages/remix/README.md @@ -10,125 +10,14 @@ [](https://www.npmjs.com/package/@sentry/remix) [](https://www.npmjs.com/package/@sentry/remix) -## General +The official Sentry SDK for monitoring Remix applications. -This package is a wrapper around `@sentry/node` for the server and `@sentry/react` for the client, with added -functionality related to Remix. +## Documentation -To use this SDK, initialize Sentry in your Remix entry points for both the client and server. +- [Getting started](https://docs.sentry.io/platforms/javascript/guides/remix/) +- [Configuration](https://docs.sentry.io/platforms/javascript/guides/remix/configuration/) -```ts -// entry.client.tsx +## Support -import { useLocation, useMatches } from '@remix-run/react'; -import * as Sentry from '@sentry/remix'; -import { useEffect } from 'react'; - -Sentry.init({ - dsn: '__DSN__', - tracesSampleRate: 1, - integrations: [ - Sentry.browserTracingIntegration({ - useEffect, - useLocation, - useMatches, - }), - ], - // ... -}); -``` - -```ts -// entry.server.tsx - -import { prisma } from '~/db.server'; - -import * as Sentry from '@sentry/remix'; - -Sentry.init({ - dsn: '__DSN__', - tracesSampleRate: 1, - integrations: [Sentry.prismaIntegration()], - // ... -}); -``` - -Also, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router -transactions. - -```ts -// root.tsx - -import { - Links, - LiveReload, - Meta, - Outlet, - Scripts, - ScrollRestoration, -} from "@remix-run/react"; - -import { withSentry } from "@sentry/remix"; - -function App() { - return ( - -
- -