diff --git a/src/includes/capture-error/javascript.remix.mdx b/src/includes/capture-error/javascript.remix.mdx new file mode 100644 index 0000000000000..ec8e409c5fa44 --- /dev/null +++ b/src/includes/capture-error/javascript.remix.mdx @@ -0,0 +1,11 @@ +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. + +```typescript +import * as Sentry from "@sentry/remix"; + +try { + aFunctionThatMightFail(); +} catch (err) { + Sentry.captureException(err); +} +``` diff --git a/src/includes/getting-started-config/javascript.remix.mdx b/src/includes/getting-started-config/javascript.remix.mdx new file mode 100644 index 0000000000000..d77c2eefe8b1a --- /dev/null +++ b/src/includes/getting-started-config/javascript.remix.mdx @@ -0,0 +1,102 @@ +To use this SDK, initialize Sentry in your Remix entry points for both the client and server. + +```typescript {filename: 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, + ), + }), + ], + // ... +}); +``` + +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. + +```typescript {filename: 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 })], + // ... +}); +``` + + + +Learn more about Sentry's Prisma integration . + + + +Also, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router transactions. + +```typescript {filename: root.tsx} +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from "@remix-run/react"; + +import { withSentry } from "@sentry/remix"; + +function App() { + return ( + + + + + + + + + + + + + ); +} + +export default withSentry(App); +``` + +You can disable or configure `ErrorBoundary` using a second parameter to `withSentry`. + +```ts +withSentry(App, { + wrapWithErrorBoundary: false +}); + +// or + +withSentry(App, { + errorBoundaryOptions: { + fallback:

An error has occurred

+ } +}); +``` + +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). + + + + +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. + + \ No newline at end of file diff --git a/src/includes/getting-started-install/javascript.remix.mdx b/src/includes/getting-started-install/javascript.remix.mdx new file mode 100644 index 0000000000000..83b359837a2f6 --- /dev/null +++ b/src/includes/getting-started-install/javascript.remix.mdx @@ -0,0 +1,7 @@ +```bash {tabTitle:npm} +npm install --save @sentry/remix +``` + +```bash {tabTitle:yarn} +yarn add @sentry/remix +``` diff --git a/src/includes/getting-started-primer/javascript.remix.mdx b/src/includes/getting-started-primer/javascript.remix.mdx new file mode 100644 index 0000000000000..0f2799f2db8a2 --- /dev/null +++ b/src/includes/getting-started-primer/javascript.remix.mdx @@ -0,0 +1,23 @@ + + +Sentry's Remix SDK enables automatic reporting of errors and exceptions, as well as the performance metrics for both client and server side operations. + + + + + +This SDK is still in experimental phase and is not yet ready for production use. + + + +Sentry's Remix SDK is introduced in version `7.7.0`. + +Features: + +- [Error Tracking](/product/issues/) with source maps for both JavaScript and TypeScript +- Events [enriched](/platforms/javascript/guides/remix/enriching-events/context/) with device data +- [Breadcrumbs](/platforms/javascript/guides/remix/enriching-events/breadcrumbs/) created for outgoing HTTP request with XHR and Fetch, and console logs +- [Release health](/product/releases/health/) for tracking crash-free users and sessions +- [Performance Monitoring](/product/performance/) for both the client and server + +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. diff --git a/src/includes/getting-started-verify/javascript.remix.mdx b/src/includes/getting-started-verify/javascript.remix.mdx new file mode 100644 index 0000000000000..21f8a141d6acb --- /dev/null +++ b/src/includes/getting-started-verify/javascript.remix.mdx @@ -0,0 +1,26 @@ +Add a button to a frontend component that throws an error. + +```typescript {filename:routes/error.tsx} + +``` + + + +Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead. + + + +Then, throw an error in a `loader` or `action`. + +```typescript {filename:routes/error.tsx} +export const action: ActionFunction = async ({ request }) => { + throw new Error("Sentry Error"); +}; +``` diff --git a/src/includes/sourcemaps/generate/javascript.remix.mdx b/src/includes/sourcemaps/generate/javascript.remix.mdx new file mode 100644 index 0000000000000..05ed267f66bee --- /dev/null +++ b/src/includes/sourcemaps/generate/javascript.remix.mdx @@ -0,0 +1,3 @@ +To generate source maps with your Remix project, you need to call `remix build` with the `--sourcemap` option. + +Please refer to the [Remix CLI docs](https://remix.run/docs/en/v1/other-api/dev#remix-cli) for more information. \ No newline at end of file diff --git a/src/includes/sourcemaps/overview/javascript.remix.mdx b/src/includes/sourcemaps/overview/javascript.remix.mdx new file mode 100644 index 0000000000000..4ceef8341fb49 --- /dev/null +++ b/src/includes/sourcemaps/overview/javascript.remix.mdx @@ -0,0 +1,15 @@ +Integrate your Remix project's source maps with Sentry using these steps: + +### 1: Generate Source Maps + +Remix can be configured to output source maps using Remix CLI. Learn more about [how to generate source maps with Remix](./generating/). + +### 2: Provide Source Maps to Sentry + +Source maps can be uploaded to Sentry by creating a release. Learn more about [how to upload source maps] (./uploading/). + + + +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. + + diff --git a/src/includes/sourcemaps/upload/primer/javascript.remix.mdx b/src/includes/sourcemaps/upload/primer/javascript.remix.mdx new file mode 100644 index 0000000000000..69811124da04a --- /dev/null +++ b/src/includes/sourcemaps/upload/primer/javascript.remix.mdx @@ -0,0 +1,11 @@ +On release, call `yarn sentry-upload-sourcemaps` to upload source maps and create a release. + + + +`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/). + + + +To see more details on how to use the command, call `yarn sentry-upload-sourcemaps --help`. + +For more advanced configuration, [use `sentry-cli` directly to upload source maps.](https://github.com/getsentry/sentry-cli). diff --git a/src/platforms/javascript/common/sourcemaps/best-practices.mdx b/src/platforms/javascript/common/sourcemaps/best-practices.mdx index 1c2e74ef73155..165208268326e 100644 --- a/src/platforms/javascript/common/sourcemaps/best-practices.mdx +++ b/src/platforms/javascript/common/sourcemaps/best-practices.mdx @@ -4,6 +4,7 @@ description: "Learn about best practices when integrating your source maps with sidebar_order: 7 notSupported: - javascript.nextjs + - javascript.remix --- diff --git a/src/platforms/javascript/common/sourcemaps/uploading/webpack.mdx b/src/platforms/javascript/common/sourcemaps/uploading/webpack.mdx index 58fc6667490e0..6500ad7e0dd37 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/webpack.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/webpack.mdx @@ -2,6 +2,8 @@ title: Webpack description: "Upload your source maps to Sentry with our Webpack plugin." sidebar_order: 1 +notSupported: + - javascript.remix --- diff --git a/src/platforms/javascript/guides/remix/config.yml b/src/platforms/javascript/guides/remix/config.yml new file mode 100644 index 0000000000000..efa13a5f47dd2 --- /dev/null +++ b/src/platforms/javascript/guides/remix/config.yml @@ -0,0 +1,8 @@ +title: Remix +sdk: sentry.javascript.remix +fallbackPlatform: javascript +caseStyle: camelCase +supportLevel: production +categories: + - browser + - server