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 get it captured as 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 stacktrace.
+
+```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,120 @@
+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 })],
+  // ...
+});
+```
+
+Also, wrap your Remix root, with Sentry's `ErrorBoundary` component to catch React component errors, and `withSentryRouteTracing` to get parameterized router transactions.
+
+```typescript {filename: root.tsx}
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+import { ErrorBoundary, withSentryRouteTracing } from "@sentry/remix";
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <html>
+        <head>
+          <Meta />
+          <Links />
+        </head>
+        <body>
+          <Outlet />
+          <ScrollRestoration />
+          <Scripts />
+          <LiveReload />
+        </body>
+      </html>
+    </ErrorBoundary>
+  );
+}
+
+export default withSentryRouteTracing(App);
+```
+
+Once you're 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).
+
+## Using Sentry DSN from environment variables
+
+To use Sentry DSN from environment variables on Remix client, you need to add it as a global in your `root` loader.
+
+```typescript {filename: root.tsx}
+// ...
+
+type LoaderData = {
+  GLOBALS: string;
+};
+
+export const loader: LoaderFunction = async ({ request }) => {
+  return json<LoaderData>({
+    GLOBALS: JSON.stringify({
+      SENTRY_DSN: process.env.SENTRY_DSN,
+    }),
+  });
+};
+
+function App() {
+  const { GLOBALS } = useLoaderData() as LoaderData;
+
+  return (
+    // ...
+  );
+}
+```
+
+Then, use it as a global in your `entry.client.tsx` file.
+
+```typescript {filename: entry.client.tsx}
+// ...
+
+Sentry.init({
+    dsn: window.GLOBALS.SENTRY_DSN,
+    // ...
+});
+
+declare global {
+    interface Window {
+        GLOBALS: Record<string, string | undefined>;
+    }
+}
+```
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.4.0`.
+
+Features:
+
+- [Error Tracking](/product/issues/) with source maps for both JavaScript and TypeScript
+- Events [enriched](/platforms/javascript/enriching-events/context/) with device data
+- [Breadcrumbs](/platforms/javascript/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>
+
+And 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 by Remix CLI. Learn more about how to generate sourcemaps with Remix [here](./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 [here](./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 stacktrace. 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 `sentry-upload-sourcemaps` to upload source maps and create a release. 
+
+<Alert level="warning">
+
+`sentry-upload-sourcemaps` requires a valid `.sentryclirc` file to pick up your project ID, organization ID and token. You can create `.sentryclirc` file with necessary configuration, as documented on this [page](https://docs.sentry.io/product/cli/configuration/).
+
+</Alert>
+
+To see more details on how to use the command, call `sentry-upload-sourcemaps --help`.
+
+For more advanced configuration, [directly use `sentry-cli` 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.