getsentry · AbhiPrasad · Jul 15, 2022 · Jul 4, 2022 · Jul 5, 2022 · Jul 5, 2022
diff --git a/src/includes/capture-error/javascript.remix.mdx 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
@@ -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 })],
+  // ...
+});
+```
+
+<Note>    
+
+Learn more about <Link to="/platforms/node/performance/database/opt-in/#prisma-orm-integration">Sentry's Prisma integration </Link>.
+
+</Note>
+
+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 (
+    <html>
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+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: <p>An error has occurred</p>
+  }
+});
+```
+
+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).
+
+
+<Note>
+
+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.
+
+</Note>
diff --git a/src/includes/getting-started-install/javascript.remix.mdx 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
@@ -0,0 +1,23 @@
+<Note>
+
+Sentry's Remix SDK enables automatic reporting of errors and exceptions, as well as the performance metrics for both client and server side operations.
+
+</Note>
+
+<Alert level="info" title="Important">
+
+This SDK is still in experimental phase and is not yet ready for production use.
+
+</Alert>
+
+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
@@ -0,0 +1,26 @@
+Add a button to a frontend component that throws an error.
+
+```typescript {filename:routes/error.tsx}
+<button
+  type="button"
+  onClick={() => {
+    throw new Error("Sentry Frontend Error");
+  }}
+>
+  Throw error
+</button>
+```
+
+<Note>
+
+Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead.
+
+</Note>
+
+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
@@ -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.
diff --git a/src/includes/sourcemaps/overview/javascript.remix.mdx 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/).
+
+<Note>
+
+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.
+
+</Note>
diff --git a/src/includes/sourcemaps/upload/primer/javascript.remix.mdx 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. 
+
+<Alert level="warning">
+
+`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/).
+
+</Alert>
+
+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
@@ -4,6 +4,7 @@ description: "Learn about best practices when integrating your source maps with
 sidebar_order: 7
 notSupported:
   - javascript.nextjs
+  - javascript.remix
 ---
 
 <PlatformContent includePath="sourcemaps/best-practices" />
diff --git 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
 ---
 
 <PlatformContent includePath="sourcemaps/upload/webpack" />
diff --git a/src/platforms/javascript/guides/remix/config.yml 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
Original file line number	Diff line number	Diff line change
		@@ -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.