Sentry WIP

Author: ericallam

apps/webapp/app/entry.server.tsx

@@ -16,6 +16,7 @@ import {
 } from "./components/primitives/OperatingSystemProvider";
 import { singleton } from "./utils/singleton";
 import { bootstrap } from "./bootstrap";
+import { wrapHandleErrorWithSentry } from "@sentry/remix";
 
 const ABORT_DELAY = 30000;
 
@@ -170,9 +171,21 @@ function handleBrowserRequest(
   });
 }
 
-export function handleError(error: unknown, { request, params, context }: DataFunctionArgs) {
-  logError(error, request);
-}
+export const handleError = wrapHandleErrorWithSentry((error, { request }) => {
+  if (request instanceof Request) {
+    logger.error("Error in handleError", {
+      error,
+      request: {
+        url: request.url,
+        method: request.method,
+      },
+    });
+  } else {
+    logger.error("Error in handleError", {
+      error,
+    });
+  }
+});
 
 Worker.init().catch((error) => {
   logError(error);

apps/webapp/app/routes/admin.api.v1.simulate-error.ts

@@ -0,0 +1,12 @@
+import { type DataFunctionArgs } from "@remix-run/node";
+import { requireUser } from "~/services/session.server";
+
+export async function loader({ request }: DataFunctionArgs) {
+  const user = await requireUser(request);
+
+  if (!user.admin) {
+    throw new Response("You must be an admin to perform this action", { status: 403 });
+  }
+
+  throw new Error("Test error");
+}

apps/webapp/app/services/logger.server.ts

@@ -3,13 +3,20 @@ import { Logger } from "@trigger.dev/core/logger";
 import { sensitiveDataReplacer } from "./sensitiveDataReplacer";
 import { AsyncLocalStorage } from "async_hooks";
 import { getHttpContext } from "./httpAsyncStorage.server";
+import { captureMessage } from "@sentry/remix";
 
 const currentFieldsStore = new AsyncLocalStorage<Record<string, unknown>>();
 
 export function trace<T>(fields: Record<string, unknown>, fn: () => T): T {
   return currentFieldsStore.run(fields, fn);
 }
 
+Logger.onError = (message, ...args) => {
+  captureMessage(message, {
+    level: "error",
+  });
+};
+
 export const logger = new Logger(
   "webapp",
   (process.env.APP_LOG_LEVEL ?? "debug") as LogLevel,

apps/webapp/instrument.server.ts

@@ -0,0 +1,27 @@
+import * as Sentry from "@sentry/remix";
+import { eventLoopBlockIntegration } from "@sentry/node-native";
+
+if (process.env.SENTRY_DSN) {
+  console.log("🔭 Initializing Sentry");
+
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    release: process.env.BUILD_GIT_SHA,
+
+    // Adds request headers and IP for users, for more info visit: and captures action formData attributes
+    // https://docs.sentry.io/platforms/javascript/guides/remix/configuration/options/#sendDefaultPii
+    sendDefaultPii: false,
+
+    skipOpenTelemetrySetup: true,
+    registerEsmLoaderHooks: false,
+    disableInstrumentationWarnings: true,
+
+    maxBreadcrumbs: 0,
+    shutdownTimeout: 10,
+
+    serverName: process.env.SERVICE_NAME,
+    environment: process.env.NODE_ENV,
+
+    integrations: [eventLoopBlockIntegration({ threshold: 1000 })],
+  });
+}

apps/webapp/package.json

@@ -4,10 +4,11 @@
   "version": "1.0.0",
   "sideEffects": false,
   "scripts": {
-    "build": "run-s build:**",
+    "build": "run-s build:** && pnpm run upload:sourcemaps",
     "build:db:seed": "esbuild --platform=node --bundle --minify --format=cjs ./prisma/seed.ts --outdir=prisma",
     "build:remix": "remix build",
-    "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build",
+    "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build --sourcemap",
+    "build:instrument": "esbuild --platform=node --format=cjs ./instrument.server.ts --outdir=build --sourcemap",
     "dev": "cross-env PORT=3030 remix dev -c \"node ./build/server.js\"",
     "dev:worker": "cross-env NODE_PATH=../../node_modules/.pnpm/node_modules node ./build/server.js",
     "format": "prettier --write .",
@@ -19,10 +20,7 @@
     "db:seed:local": "ts-node prisma/seed.ts",
     "build:db:populate": "esbuild --platform=node --bundle --minify --format=cjs ./prisma/populate.ts --outdir=prisma",
     "db:populate": "node prisma/populate.js --",
-    "generate:sourcemaps": "remix build --sourcemap",
-    "clean:sourcemaps": "run-s clean:sourcemaps:*",
-    "clean:sourcemaps:public": "rimraf ./build/**/*.map",
-    "clean:sourcemaps:build": "rimraf ./public/build/**/*.map",
+    "upload:sourcemaps": "bash ./upload-sourcemaps.sh",
     "test": "vitest --no-file-parallelism",
     "eval:dev": "evalite watch"
   },
@@ -103,6 +101,8 @@
     "@remix-run/serve": "2.1.0",
     "@remix-run/server-runtime": "2.1.0",
     "@remix-run/v1-meta": "^0.1.3",
+    "@sentry/node-native": "^9.40.0",
+    "@sentry/remix": "^9.40.0",
     "@slack/web-api": "7.9.1",
     "@socket.io/redis-adapter": "^8.3.0",
     "@splinetool/react-spline": "^2.2.6",
@@ -142,7 +142,6 @@
     "express": "4.20.0",
     "framer-motion": "^10.12.11",
     "graphile-worker": "0.16.6",
-    "highlight.run": "^7.3.4",
     "humanize-duration": "^3.27.3",
     "input-otp": "^1.4.2",
     "intl-parse-accept-language": "^1.0.0",

apps/webapp/server.ts

@@ -1,3 +1,5 @@
+import "./instrument.server";
+
 import { createRequestHandler } from "@remix-run/express";
 import { broadcastDevReady, logDevReady } from "@remix-run/server-runtime";
 import compression from "compression";

apps/webapp/upload-sourcemaps.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+if [ -n "$SENTRY_ORG" ] && [ -n "$SENTRY_PROJECT" ] && [ -n "$SENTRY_AUTH_TOKEN" ]; then
+  sentry-upload-sourcemaps --org $SENTRY_ORG --project $SENTRY_PROJECT --buildPath ./build
+else
+  echo "Skipping sourcemap upload: Missing required environment variables"
+  echo "Required: SENTRY_ORG, SENTRY_PROJECT, SENTRY_AUTH_TOKEN"
+fi

packages/core/src/logger.ts

@@ -23,6 +23,9 @@ export class Logger {
   #jsonReplacer?: (key: string, value: unknown) => unknown;
   #additionalFields: () => Record<string, unknown>;
 
+  // Add a static "onError" method that will be called when an error is logged
+  static onError: (message: string, ...args: Array<Record<string, unknown> | undefined>) => void;
+
   constructor(
     name: string,
     level: LogLevel = "info",
@@ -67,6 +70,10 @@ export class Logger {
     if (this.#level < 1) return;
 
     this.#structuredLog(console.error, message, "error", ...args);
+
+    if (Logger.onError) {
+      Logger.onError(message, ...args);
+    }
   }
 
   warn(message: string, ...args: Array<Record<string, unknown> | undefined>) {