add sentry

app/entry.client.tsx

@@ -1,13 +1,8 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
-import { RemixBrowser } from '@remix-run/react'
 import { startTransition, StrictMode, useEffect } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import posthog from 'posthog-js'
+import { useLocation, useMatches, RemixBrowser } from '@remix-run/react'
+import * as Sentry from '@sentry/remix'
 
 function PosthogInit() {
   useEffect(() => {
@@ -20,6 +15,32 @@ function PosthogInit() {
 
   return null
 }
+Sentry.init({
+  dsn: import.meta.env.VITE_ENV_SENTRY_DSN,
+  integrations: [
+    Sentry.browserTracingIntegration({
+      useEffect,
+      useLocation,
+      useMatches,
+    }),
+    // Replay is only available in the client
+    Sentry.replayIntegration(),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for tracing.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+})
+
 startTransition(() => {
   hydrateRoot(
     document,

app/entry.server.tsx

@@ -4,16 +4,16 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-import { PassThrough } from "node:stream";
-
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import { isbot } from "isbot";
-import { renderToPipeableStream } from "react-dom/server";
-
-const ABORT_DELAY = 5_000;
-
+import { PassThrough } from 'node:stream'
+import './instrument.server.mjs'
+import type { AppLoadContext, EntryContext } from '@remix-run/node'
+import { createReadableStreamFromReadable } from '@remix-run/node'
+import { RemixServer } from '@remix-run/react'
+import { isbot } from 'isbot'
+import { renderToPipeableStream } from 'react-dom/server'
+import * as Sentry from '@sentry/remix'
+const ABORT_DELAY = 5_000
+export const handleError = Sentry.sentryHandleError
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
@@ -24,19 +24,9 @@ export default function handleRequest(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   loadContext: AppLoadContext
 ) {
-  return isbot(request.headers.get("user-agent") || "")
-    ? handleBotRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext
-      )
-    : handleBrowserRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext
-      );
+  return isbot(request.headers.get('user-agent') || '')
+    ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
+    : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext)
 }
 
 function handleBotRequest(
@@ -46,47 +36,43 @@ function handleBotRequest(
   remixContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
-    let shellRendered = false;
+    let shellRendered = false
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
       {
         onAllReady() {
-          shellRendered = true;
-          const body = new PassThrough();
-          const stream = createReadableStreamFromReadable(body);
+          shellRendered = true
+          const body = new PassThrough()
+          const stream = createReadableStreamFromReadable(body)
 
-          responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set('Content-Type', 'text/html')
 
           resolve(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             })
-          );
+          )
 
-          pipe(body);
+          pipe(body)
         },
         onShellError(error: unknown) {
-          reject(error);
+          reject(error)
         },
         onError(error: unknown) {
-          responseStatusCode = 500;
+          responseStatusCode = 500
           // Log streaming rendering errors from inside the shell.  Don't log
           // errors encountered during initial shell rendering since they'll
           // reject and get logged in handleDocumentRequest.
           if (shellRendered) {
-            console.error(error);
+            console.error(error)
           }
         },
       }
-    );
+    )
 
-    setTimeout(abort, ABORT_DELAY);
-  });
+    setTimeout(abort, ABORT_DELAY)
+  })
 }
 
 function handleBrowserRequest(
@@ -96,45 +82,41 @@ function handleBrowserRequest(
   remixContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
-    let shellRendered = false;
+    let shellRendered = false
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
       {
         onShellReady() {
-          shellRendered = true;
-          const body = new PassThrough();
-          const stream = createReadableStreamFromReadable(body);
+          shellRendered = true
+          const body = new PassThrough()
+          const stream = createReadableStreamFromReadable(body)
 
-          responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set('Content-Type', 'text/html')
 
           resolve(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             })
-          );
+          )
 
-          pipe(body);
+          pipe(body)
         },
         onShellError(error: unknown) {
-          reject(error);
+          reject(error)
         },
         onError(error: unknown) {
-          responseStatusCode = 500;
+          responseStatusCode = 500
           // Log streaming rendering errors from inside the shell.  Don't log
           // errors encountered during initial shell rendering since they'll
           // reject and get logged in handleDocumentRequest.
           if (shellRendered) {
-            console.error(error);
+            console.error(error)
           }
         },
       }
-    );
+    )
 
-    setTimeout(abort, ABORT_DELAY);
-  });
+    setTimeout(abort, ABORT_DELAY)
+  })
 }

app/instrument.server.mjs

@@ -0,0 +1,22 @@
+import * as Sentry from "@sentry/remix";
+
+Sentry.init({
+    dsn: process.env.VITE_ENV_SENTRY_DSN,
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for tracing.
+    // We recommend adjusting this value in production
+    tracesSampleRate: 1.0,
+
+    // To use Sentry OpenTelemetry auto-instrumentation
+    // default: false
+    autoInstrumentRemix: true,
+
+    // Optionally capture action formData attributes with errors.
+    // This requires `sendDefaultPii` set to true as well.
+    captureActionFormDataKeys: {
+        key_x: true,
+        key_y: true,
+    },
+    // To capture action formData attributes.
+    sendDefaultPii: true
+});

app/root.tsx

@@ -7,11 +7,20 @@ import {
   Scripts,
   ScrollRestoration,
   useLocation,
+  useRouteError,
 } from '@remix-run/react'
 import stylesheet from '~/tailwind.css?url'
 import { PropsWithChildren, useEffect } from 'react'
 import posthog from 'posthog-js'
+import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix'
 
+export const ErrorBoundary = () => {
+  const error = useRouteError()
+
+  captureRemixErrorBoundaryError(error)
+
+  return <div>Something went wrong. Please try again later.</div>
+}
 export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
 
 export function Layout({ children }: PropsWithChildren) {
@@ -43,7 +52,7 @@ export function Layout({ children }: PropsWithChildren) {
   )
 }
 
-export default function App() {
+function App() {
   return (
     <>
       <CapturePageView />
@@ -52,6 +61,8 @@ export default function App() {
   )
 }
 
+export default withSentry(App)
+
 function CapturePageView() {
   const location = useLocation()
   useEffect(() => {

app/services/vacancies/vacancies.service.ts

@@ -32,7 +32,10 @@ export class VacanciesService {
   }
 
   async getKeywords(): Promise<KeywordsResponse> {
-    return await fetch(`${this.baseUrl}/vacancies/keywords`).then(res => res.json())
+    return await fetch(`${this.baseUrl}/vacancies/keywords`).then(res => {
+      if (!res.ok) throw new Error('Failed to fetch keywords')
+      return res.json()
+    })
   }
 
   private formatDateOnData(data: VacancyData): VacancyData {

package.json

@@ -18,6 +18,7 @@
     "@remix-run/react": "^2.9.2",
     "@remix-run/serve": "^2.9.2",
     "@remixicon/react": "^4.2.0",
+    "@sentry/remix": "^8.30.0",
     "@tremor/react": "^3.17.2",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -32,6 +33,7 @@
     "@it-incubator/prettier-config": "^0.1.2",
     "@remix-run/dev": "^2.9.2",
     "@tailwindcss/forms": "^0.5.7",
+    "@types/node": "^22.5.4",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",