Skip to content

Commit eec1fb3

Browse files
onurtemizkanimatwawanaAbhiPrasad
authored
Add Remix SDK docs (#5247)
Adds documentation for Remix SDK https://github.com/getsentry/sentry-javascript/tree/master/packages/remix Co-authored-by: Isabel <[email protected]> Co-authored-by: Abhijeet Prasad <[email protected]>
1 parent 13f398b commit eec1fb3

File tree

11 files changed

+209
-0
lines changed

11 files changed

+209
-0
lines changed

‎src/includes/capture-error/javascript.remix.mdx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
You can pass an `Error` object to `captureException()` to have it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace.
2+
3+
```typescript
4+
import * as Sentry from "@sentry/remix";
5+
6+
try {
7+
aFunctionThatMightFail();
8+
} catch (err) {
9+
Sentry.captureException(err);
10+
}
11+
```

‎src/includes/getting-started-config/javascript.remix.mdx

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
To use this SDK, initialize Sentry in your Remix entry points for both the client and server.
2+
3+
```typescript {filename: entry.client.tsx}
4+
import { useLocation, useMatches } from "@remix-run/react";
5+
import * as Sentry from "@sentry/remix";
6+
import { useEffect } from "react";
7+
8+
Sentry.init({
9+
dsn: "__DSN__",
10+
tracesSampleRate: 1,
11+
integrations: [
12+
new Sentry.BrowserTracing({
13+
routingInstrumentation: Sentry.remixRouterInstrumentation(
14+
useEffect,
15+
useLocation,
16+
useMatches,
17+
),
18+
}),
19+
],
20+
// ...
21+
});
22+
```
23+
24+
Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/v1/api/conventions#action) and [`loader`](https://remix.run/docs/en/v1/api/conventions#loader) functions. You can also initialize Sentry's database integrations, such as Prisma, to get spans for your database calls.
25+
26+
```typescript {filename: entry.server.tsx}
27+
import { prisma } from "~/db.server";
28+
29+
import * as Sentry from "@sentry/remix";
30+
31+
Sentry.init({
32+
dsn: "__DSN__",
33+
tracesSampleRate: 1,
34+
integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
35+
// ...
36+
});
37+
```
38+
39+
<Note>
40+
41+
Learn more about <Link to="/platforms/node/performance/database/opt-in/#prisma-orm-integration">Sentry's Prisma integration </Link>.
42+
43+
</Note>
44+
45+
Also, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router transactions.
46+
47+
```typescript {filename: root.tsx}
48+
import {
49+
Links,
50+
LiveReload,
51+
Meta,
52+
Outlet,
53+
Scripts,
54+
ScrollRestoration,
55+
} from "@remix-run/react";
56+
57+
import { withSentry } from "@sentry/remix";
58+
59+
function App() {
60+
return (
61+
<html>
62+
<head>
63+
<Meta />
64+
<Links />
65+
</head>
66+
<body>
67+
<Outlet />
68+
<ScrollRestoration />
69+
<Scripts />
70+
<LiveReload />
71+
</body>
72+
</html>
73+
);
74+
}
75+
76+
export default withSentry(App);
77+
```
78+
79+
You can disable or configure `ErrorBoundary` using a second parameter to `withSentry`.
80+
81+
```ts
82+
withSentry(App, {
83+
wrapWithErrorBoundary: false
84+
});
85+
86+
// or
87+
88+
withSentry(App, {
89+
errorBoundaryOptions: {
90+
fallback: <p>An error has occurred</p>
91+
}
92+
});
93+
```
94+
95+
Once you've done this set up, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/remix/usage).
96+
97+
98+
<Note>
99+
100+
You can refer to [Remix Docs](https://remix.run/docs/en/v1/guides/envvars#browser-environment-variables) to learn how to use your Sentry DSN from environment variables.
101+
102+
</Note>

‎src/includes/getting-started-install/javascript.remix.mdx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```bash {tabTitle:npm}
2+
npm install --save @sentry/remix
3+
```
4+
5+
```bash {tabTitle:yarn}
6+
yarn add @sentry/remix
7+
```

‎src/includes/getting-started-primer/javascript.remix.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<Note>
2+
3+
Sentry's Remix SDK enables automatic reporting of errors and exceptions, as well as the performance metrics for both client and server side operations.
4+
5+
</Note>
6+
7+
<Alert level="info" title="Important">
8+
9+
This SDK is still in experimental phase and is not yet ready for production use.
10+
11+
</Alert>
12+
13+
Sentry's Remix SDK is introduced in version `7.7.0`.
14+
15+
Features:
16+
17+
- [Error Tracking](/product/issues/) with source maps for both JavaScript and TypeScript
18+
- Events [enriched](/platforms/javascript/guides/remix/enriching-events/context/) with device data
19+
- [Breadcrumbs](/platforms/javascript/guides/remix/enriching-events/breadcrumbs/) created for outgoing HTTP request with XHR and Fetch, and console logs
20+
- [Release health](/product/releases/health/) for tracking crash-free users and sessions
21+
- [Performance Monitoring](/product/performance/) for both the client and server
22+
23+
Under the hood, Remix SDK relies on our [React SDK](/platforms/javascript/guides/react/) on the frontend and [Node SDK](/platforms/node) on the backend, which makes all features available in those SDKs also available in this SDK.

‎src/includes/getting-started-verify/javascript.remix.mdx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
Add a button to a frontend component that throws an error.
2+
3+
```typescript {filename:routes/error.tsx}
4+
<button
5+
type="button"
6+
onClick={() => {
7+
throw new Error("Sentry Frontend Error");
8+
}}
9+
>
10+
Throw error
11+
</button>
12+
```
13+
14+
<Note>
15+
16+
Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead.
17+
18+
</Note>
19+
20+
Then, throw an error in a `loader` or `action`.
21+
22+
```typescript {filename:routes/error.tsx}
23+
export const action: ActionFunction = async ({ request }) => {
24+
throw new Error("Sentry Error");
25+
};
26+
```

‎src/includes/sourcemaps/generate/javascript.remix.mdx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
To generate source maps with your Remix project, you need to call `remix build` with the `--sourcemap` option.
2+
3+
Please refer to the [Remix CLI docs](https://remix.run/docs/en/v1/other-api/dev#remix-cli) for more information.

‎src/includes/sourcemaps/overview/javascript.remix.mdx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Integrate your Remix project's source maps with Sentry using these steps:
2+
3+
### 1: Generate Source Maps
4+
5+
Remix can be configured to output source maps using Remix CLI. Learn more about [how to generate source maps with Remix](./generating/).
6+
7+
### 2: Provide Source Maps to Sentry
8+
9+
Source maps can be uploaded to Sentry by creating a release. Learn more about [how to upload source maps] (./uploading/).
10+
11+
<Note>
12+
13+
By default, if Sentry can't find the uploaded files it needs, it will attempt to download them from the URLs in the stack trace. To disable this, turn off "Enable JavaScript source fetching" in either your organization's "Security & Privacy" settings or your project's general settings.
14+
15+
</Note>

‎src/includes/sourcemaps/upload/primer/javascript.remix.mdx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
On release, call `yarn sentry-upload-sourcemaps` to upload source maps and create a release.
2+
3+
<Alert level="warning">
4+
5+
`sentry-upload-sourcemaps` requires either [`env` variables](/product/cli/configuration/#configuration-values) or a valid `.sentryclirc` file to pick up your project ID, organization ID, and token. You can create the `.sentryclirc` file with necessary configuration, as documented on this [page](/product/cli/configuration/).
6+
7+
</Alert>
8+
9+
To see more details on how to use the command, call `yarn sentry-upload-sourcemaps --help`.
10+
11+
For more advanced configuration, [use `sentry-cli` directly to upload source maps.](https://github.com/getsentry/sentry-cli).

‎src/platforms/javascript/common/sourcemaps/best-practices.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ description: "Learn about best practices when integrating your source maps with
44
sidebar_order: 7
55
notSupported:
66
- javascript.nextjs
7+
- javascript.remix
78
---
89

910
<PlatformContent includePath="sourcemaps/best-practices" />

‎src/platforms/javascript/common/sourcemaps/uploading/webpack.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: Webpack
33
description: "Upload your source maps to Sentry with our Webpack plugin."
44
sidebar_order: 1
5+
notSupported:
6+
- javascript.remix
57
---
68

79
<PlatformContent includePath="sourcemaps/upload/webpack" />

‎src/platforms/javascript/guides/remix/config.yml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
title: Remix
2+
sdk: sentry.javascript.remix
3+
fallbackPlatform: javascript
4+
caseStyle: camelCase
5+
supportLevel: production
6+
categories:
7+
- browser
8+
- server

0 commit comments

Comments
 (0)