|
10 | 10 | [](https://www.npmjs.com/package/@sentry/remix) |
11 | 11 | [](https://www.npmjs.com/package/@sentry/remix) |
12 | 12 |
|
13 | | -## General |
14 | | - |
15 | 13 | This package is a wrapper around `@sentry/node` for the server and `@sentry/react` for the client, with added |
16 | 14 | functionality related to Remix. |
17 | 15 |
|
18 | | -To use this SDK, initialize Sentry in your Remix entry points for both the client and server. |
19 | | - |
20 | | -```ts |
21 | | -// entry.client.tsx |
22 | | - |
23 | | -import { useLocation, useMatches } from '@remix-run/react'; |
24 | | -import * as Sentry from '@sentry/remix'; |
25 | | -import { useEffect } from 'react'; |
26 | | - |
27 | | -Sentry.init({ |
28 | | - dsn: '__DSN__', |
29 | | - tracesSampleRate: 1, |
30 | | - integrations: [ |
31 | | - Sentry.browserTracingIntegration({ |
32 | | - useEffect, |
33 | | - useLocation, |
34 | | - useMatches, |
35 | | - }), |
36 | | - ], |
37 | | - // ... |
38 | | -}); |
39 | | -``` |
| 16 | +## Compatibility |
40 | 17 |
|
41 | | -```ts |
42 | | -// entry.server.tsx |
| 18 | +Currently, the minimum supported version of Remix is `1.0.0`. |
43 | 19 |
|
44 | | -import { prisma } from '~/db.server'; |
| 20 | +## Installation |
45 | 21 |
|
46 | | -import * as Sentry from '@sentry/remix'; |
| 22 | +To get started installing the SDK, use the Sentry Remix Wizard by running the following command in your terminal or |
| 23 | +read the [Getting Started Docs](https://docs.sentry.io/platforms/javascript/guides/remix/): |
47 | 24 |
|
48 | | -Sentry.init({ |
49 | | - dsn: '__DSN__', |
50 | | - tracesSampleRate: 1, |
51 | | - integrations: [new Sentry.Integrations.Prisma({ client: prisma })], |
52 | | - // ... |
53 | | -}); |
| 25 | +```sh |
| 26 | +npx @sentry/wizard@latest -i remix |
54 | 27 | ``` |
55 | 28 |
|
56 | | -Also, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router |
57 | | -transactions. |
58 | | - |
59 | | -```ts |
60 | | -// root.tsx |
61 | | - |
62 | | -import { |
63 | | - Links, |
64 | | - LiveReload, |
65 | | - Meta, |
66 | | - Outlet, |
67 | | - Scripts, |
68 | | - ScrollRestoration, |
69 | | -} from "@remix-run/react"; |
| 29 | +The wizard will prompt you to log in to Sentry. After the wizard setup is completed, the SDK will automatically capture |
| 30 | +unhandled errors, and monitor performance. |
70 | 31 |
|
71 | | -import { withSentry } from "@sentry/remix"; |
| 32 | +## Custom Usage |
72 | 33 |
|
73 | | -function App() { |
74 | | - return ( |
75 | | - <html> |
76 | | - <head> |
77 | | - <Meta /> |
78 | | - <Links /> |
79 | | - </head> |
80 | | - <body> |
81 | | - <Outlet /> |
82 | | - <ScrollRestoration /> |
83 | | - <Scripts /> |
84 | | - <LiveReload /> |
85 | | - </body> |
86 | | - </html> |
87 | | - ); |
88 | | -} |
89 | | - |
90 | | -export default withSentry(App); |
91 | | -``` |
92 | | - |
93 | | -You can disable or configure `ErrorBoundary` using a second parameter to `withSentry`. |
| 34 | +To set context information or to send manual events, you can use `@sentry/remix` as follows: |
94 | 35 |
|
95 | 36 | ```ts |
96 | | - |
97 | | -withSentry(App, { |
98 | | - wrapWithErrorBoundary: false |
99 | | -}); |
100 | | - |
101 | | -// or |
102 | | - |
103 | | -withSentry(App, { |
104 | | - errorBoundaryOptions: { |
105 | | - fallback: <p>An error has occurred</p> |
106 | | - } |
107 | | -}); |
108 | | -``` |
109 | | - |
110 | | -To set context information or send manual events, use the exported functions of `@sentry/remix`. |
111 | | - |
112 | | -```ts |
113 | | -import * as Sentry from '@sentry/remix'; |
| 37 | +import * as Sentry from '@sentry/nextjs'; |
114 | 38 |
|
115 | 39 | // Set user information, as well as tags and further extras |
116 | | -Sentry.setExtra('battery', 0.7); |
117 | 40 | Sentry.setTag('user_mode', 'admin'); |
118 | 41 | Sentry.setUser({ id: '4711' }); |
| 42 | +Sentry.setContext('application_area', { location: 'checkout' }); |
119 | 43 |
|
120 | 44 | // Add a breadcrumb for future events |
121 | 45 | Sentry.addBreadcrumb({ |
122 | | - message: 'My Breadcrumb', |
| 46 | + message: '"Add to cart" clicked', |
123 | 47 | // ... |
124 | 48 | }); |
125 | 49 |
|
126 | | -// Capture exceptions, messages or manual events |
| 50 | +// Capture exceptions or messages |
| 51 | +Sentry.captureException(new Error('Oh no.')); |
127 | 52 | Sentry.captureMessage('Hello, world!'); |
128 | | -Sentry.captureException(new Error('Good bye')); |
129 | | -Sentry.captureEvent({ |
130 | | - message: 'Manual', |
131 | | - stacktrace: [ |
132 | | - // ... |
133 | | - ], |
134 | | -}); |
135 | 53 | ``` |
136 | | - |
137 | | -## Sourcemaps and Releases |
138 | | - |
139 | | -The Remix SDK provides a script that automatically creates a release and uploads sourcemaps. To generate sourcemaps with |
140 | | -Remix, you need to call `remix build` with the `--sourcemap` option. |
141 | | - |
142 | | -On release, call `sentry-upload-sourcemaps` to upload source maps and create a release. To see more details on how to |
143 | | -use the command, call `sentry-upload-sourcemaps --help`. |
144 | | - |
145 | | -For more advanced configuration, |
146 | | -[directly use `sentry-cli` to upload source maps.](https://github.com/getsentry/sentry-cli). |
0 commit comments