track remix errors (server & browser) in sentry

.env.example

@@ -39,4 +39,7 @@ CDN_CGI_IMAGE_URL=https://example.com/cdn-cgi/image
 MAILCHIMP_SIGNUP_URL=https://example.us1.list-manage.com/subscribe/post?u=secret123&id=secret123
 
 # Sentry.io
-SENTRY_DSN=https://[email protected]/123456789
+SENTRY_DSN=https://[email protected]/123456789
+SENTRY_ORG=my-org
+SENTRY_PROJECT=my-project
+SENTRY_AUTH_TOKEN=secret123

app/components/ErrorPage/index.tsx

@@ -2,11 +2,26 @@ import React from "react";
 import { useRouteError, isRouteErrorResponse } from "@remix-run/react";
 import environment from "~/util/environment";
 import Page from "../Page";
+import {
+  captureRemixErrorBoundaryError,
+  captureException,
+} from "@sentry/remix";
 
 export const ErrorPage: React.FC = () => {
   let error = useRouteError();
   let children = null;
 
+  captureRemixErrorBoundaryError(error);
+
+  if (
+    !isRouteErrorResponse(error) ||
+    (isRouteErrorResponse(error) && error.status >= 500)
+  ) {
+    console.log("captured error with sentry");
+    captureException(error);
+    // console.error(error);
+  }
+
   if (isRouteErrorResponse(error)) {
     children = (
       <h1>

app/entry.client.tsx

@@ -1,12 +1,30 @@
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
+import { RemixBrowser, useLocation, useMatches } from "@remix-run/react";
+import { startTransition, StrictMode, useEffect } from "react";
 import { hydrateRoot } from "react-dom/client";
 import i18n from "./i18n";
 import i18next from "i18next";
 import { I18nextProvider, initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import { getInitialNamespaces } from "remix-i18next";
+import * as Sentry from "@sentry/remix";
+import environment from "./util/environment";
+
+Sentry.init({
+  dsn: environment().SENTRY_DSN,
+  tracesSampleRate: 1,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1,
+
+  integrations: [
+    Sentry.browserTracingIntegration({
+      useEffect,
+      useLocation,
+      useMatches,
+    }),
+    Sentry.replayIntegration(),
+  ],
+});
 
 async function hydrate() {
   await i18next

app/entry.server.tsx

@@ -12,6 +12,17 @@ import { I18nextProvider, initReactI18next } from "react-i18next";
 import Backend from "i18next-fs-backend";
 import i18n, { returnLanguageIfSupported } from "./i18n"; // your i18n configuration file
 import { resolve } from "node:path";
+import * as Sentry from "@sentry/remix";
+
+export function handleError(error: any, { request }: { request: Request }) {
+  Sentry.captureRemixServerException(error, "remix.server", request);
+  console.error(error);
+}
+
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  tracesSampleRate: 1,
+});
 
 const ABORT_DELAY = 5000;
 

app/root.tsx

@@ -31,6 +31,7 @@ import { getHreflangLinks } from "./util/getHreflangLinks";
 import { localizeTo } from "./components/localized-link/util/localizeTo";
 import { i18nCookie } from "./cookie";
 import { useChangeLanguage } from "remix-i18next";
+import { withSentry } from "@sentry/remix";
 
 export const ErrorBoundary = ErrorPage;
 
@@ -81,6 +82,9 @@ export async function loader({
         NODE_ENV: environment().NODE_ENV,
         MAILCHIMP_SIGNUP_URL: environment().MAILCHIMP_SIGNUP_URL,
         CDN_CGI_IMAGE_URL: environment().CDN_CGI_IMAGE_URL,
+        SENTRY_DSN: environment().SENTRY_DSN,
+        // SENTRY_ORG: environment().SENTRY_ORG,
+        // SENTRY_PROJECT: environment().SENTRY_PROJECT,
       },
     },
     {
@@ -148,7 +152,7 @@ export const handle = {
   i18n: "common", // i18n namespace
 };
 
-export default function App() {
+function App() {
   // Get the locale from the loader
   const { locale, serializedI18nCookie, publicKeys, site } =
     useLoaderData<typeof loader>();
@@ -218,3 +222,5 @@ export default function App() {
     </html>
   );
 }
+
+export default withSentry(App);

app/routes/test-sentry.tsx

@@ -0,0 +1,24 @@
+import { Form, useActionData } from "@remix-run/react";
+import Gutter from "~/components/Gutter";
+
+export const action = async () => {
+  throw new Error("this is a server error on /test-sentry");
+};
+
+export default function TestSentry() {
+  const data = useActionData<typeof action>();
+
+  const handleClick = () => {
+    throw new Error("this is a browser error on /test-sentry");
+  };
+
+  return (
+    <Gutter>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <button onClick={handleClick}>Throw a browser error</button>
+      <Form method="post">
+        <button type="submit">Throw a server error</button>
+      </Form>
+    </Gutter>
+  );
+}

env.d.ts

@@ -64,6 +64,8 @@ declare global {
     CDN_CGI_IMAGE_URL: string;
     MAILCHIMP_SIGNUP_URL: string;
     SENTRY_DSN: string;
+    SENTRY_ORG: string;
+    SENTRY_PROJECT: string;
   }
   interface Window {
     ENV: AppEnvironment;

package.json

@@ -36,6 +36,7 @@
     "@remix-run/react": "^2.11.2",
     "@sentry/node": "^7.110.1",
     "@sentry/profiling-node": "^7.110.1",
+    "@sentry/remix": "^8.27.0",
     "@types/html-escaper": "^3.0.0",
     "@types/nodemailer": "^6.4.7",
     "@types/react-router-dom": "^5.3.3",
@@ -85,6 +86,7 @@
     "@0no-co/graphqlsp": "^1.12.13",
     "@remix-run/dev": "^2.11.2",
     "@remix-run/eslint-config": "^2.11.2",
+    "@sentry/vite-plugin": "^2.22.3",
     "@types/compression": "^1.7.2",
     "@types/escape-html": "^1.0.4",
     "@types/express": "^4.17.17",