hi-ogawa · hi-ogawa · May 8, 2023 · May 9, 2023 · May 9, 2023 · May 9, 2023
diff --git a/.env.example b/.env.example
@@ -16,3 +16,6 @@ APP_SESSION_SECRET=d30eed9c045e6f54377860da2a8384341d3125623b3a5fa02c88d8bc3753e
 # recaptcha (https://www.google.com/recaptcha/admin)
 APP_RECAPTCHA_CLIENT_KEY=xxx
 APP_RECAPTCHA_SERVER_KEY=xxx
+
+# sentry
+APP_SENTRY_DSN=xxx
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -2,10 +2,12 @@ import { RemixBrowser } from "@remix-run/react";
 import { hydrateRoot } from "react-dom/client";
 import { registerServiceWorker } from "./misc/register-service-worker.client";
 import { initializeConfigClient } from "./utils/config";
+import { initializeSentryBrowser } from "./utils/sentry-utils.client";
 
 function main() {
   registerServiceWorker();
   initializeConfigClient();
+  initializeSentryBrowser();
   hydrateRoot(window.document, <RemixBrowser />);
 }
 

diff --git a/app/misc/initialize-server.ts b/app/misc/initialize-server.ts
@@ -5,11 +5,13 @@ import {
   initializeDrizzleClient,
 } from "../db/drizzle-client.server";
 import { initializeConfigServer } from "../utils/config";
+import { initializeSentryServer } from "../utils/sentry-utils.server";
 import { initializeSessionStore } from "../utils/session.server";
 
 export const initializeServer = once(async () => {
   installGlobals();
   initializeConfigServer();
+  initializeSentryServer();
   initializeSessionStore();
   await initializeDrizzleClient();
 });

diff --git a/app/root.tsx b/app/root.tsx
@@ -23,8 +23,7 @@ import type { UserTable } from "./db/models";
 import { $R, R } from "./misc/routes";
 import { HideRecaptchaBadge } from "./routes/users/register";
 import { trpc } from "./trpc/client";
-import { publicConfig } from "./utils/config";
-import { ConfigPlaceholder } from "./utils/config-placeholder";
+import { CONFIG_SCRIPT_PLACEHOLDER, publicConfig } from "./utils/config";
 import { useFlashMessages } from "./utils/flash-message-hook";
 import { RootLoaderData, useRootLoaderData } from "./utils/loader-utils";
 import { makeLoader } from "./utils/loader-utils.server";
@@ -73,10 +72,19 @@ export default function DefaultComponent() {
         </title>
         <Meta />
         <Links />
-        <ConfigPlaceholder />
-        <ThemeScript />
         <HideRecaptchaBadge />
-        <script dangerouslySetInnerHTML={{ __html: `` }} />
+        <script
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: CONFIG_SCRIPT_PLACEHOLDER }}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `\
+              globalThis.__themeStorageKey = "ytsub:theme";
+              ${require("@hiogawa/utils-experimental/dist/theme-script.global.js?loader=text")}
+            `,
+          }}
+        />
       </head>
       <body className="h-full">
         {/* TODO: default position="top" is fine? */}
@@ -99,19 +107,6 @@ export default function DefaultComponent() {
   );
 }
 
-function ThemeScript() {
-  return (
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `\
-globalThis.__themeStorageKey = "ytsub:theme";
-${require("@hiogawa/utils-experimental/dist/theme-script.global.js?loader=text")}
-`,
-      }}
-    />
-  );
-}
-
 function Root() {
   const data = useRootLoaderData();
   useFlashMessages(data.flashMessages);

diff --git a/app/utils/config-placeholder.tsx b/app/utils/config-placeholder.tsx
diff --git a/app/utils/config.ts b/app/utils/config.ts
@@ -1,5 +1,5 @@
-import * as process from "process";
-import { once, tinyassert } from "@hiogawa/utils";
+import process from "process";
+import { once } from "@hiogawa/utils";
 import { z } from "zod";
 import { uninitialized } from "./misc";
 
@@ -25,16 +25,23 @@ const Z_SERVER_CONFIG = z.object({
 const Z_PUBLIC_CONFIG = z.object({
   APP_RECAPTCHA_CLIENT_KEY: z.string().default("6Lc79AcgAAAAAOdPnmAZfQqhVwL7mJngRndTyG19"),
   APP_RECAPTCHA_DISABLED: z.coerce.boolean(),
+  APP_SENTRY_DSN: z.string().optional(),
   VERCEL_ENV: z.string().optional(),
 });
 
+// prettier-ignore
+const Z_BUILD_CONFIG = z.object({
+  GIT_COMMIT_REF: z.string().optional(),
+});
+
 export let serverConfig = uninitialized as z.infer<typeof Z_SERVER_CONFIG>;
 
 export let publicConfig = uninitialized as z.infer<typeof Z_PUBLIC_CONFIG>;
 
-export const CONFIG_SCRIPT_ID = "__configScript";
+export let buildConfig = uninitialized as z.infer<typeof Z_BUILD_CONFIG>;
 
-export const CONFIG_SCRIPT_PLACEHOLDER = "@@__configScriptPlaceholder@@";
+// esbuild injects BUILD_CONFIG_DEFINE on server release build
+declare let BUILD_CONFIG_DEFINE: unknown;
 
 //
 // server
@@ -43,12 +50,25 @@ export const CONFIG_SCRIPT_PLACEHOLDER = "@@__configScriptPlaceholder@@";
 export const initializeConfigServer = once(() => {
   serverConfig = Z_SERVER_CONFIG.parse(process.env);
   publicConfig = Z_PUBLIC_CONFIG.parse(process.env);
+  buildConfig = Z_BUILD_CONFIG.parse(
+    typeof BUILD_CONFIG_DEFINE !== "undefined" ? BUILD_CONFIG_DEFINE : {}
+  );
 });
 
+// pass data to client via global script
+declare let __publicConfig: any;
+declare let __buildConfig: any;
+
+export const CONFIG_SCRIPT_PLACEHOLDER = "/*@@INJECT_CONFIG_SCRIPT@@*/";
+
 export function injectConfigScript(markup: string): string {
+  // TODO: should escape?
   return markup.replace(
     CONFIG_SCRIPT_PLACEHOLDER,
-    JSON.stringify(publicConfig)
+    `
+globalThis.__publicConfig = ${JSON.stringify(publicConfig)};
+globalThis.__buildConfig = ${JSON.stringify(buildConfig)};
+`
   );
 }
 
@@ -57,7 +77,6 @@ export function injectConfigScript(markup: string): string {
 //
 
 export const initializeConfigClient = once(() => {
-  const el = document.querySelector("#" + CONFIG_SCRIPT_ID);
-  tinyassert(el);
-  publicConfig = JSON.parse(el.innerHTML);
+  publicConfig = __publicConfig;
+  buildConfig = __buildConfig;
 });
diff --git a/app/utils/sentry-utils.client.tsx b/app/utils/sentry-utils.client.tsx
@@ -0,0 +1,13 @@
+import { init } from "@sentry/browser";
+import { buildConfig, publicConfig } from "./config";
+
+// cf. default integrations
+// https://github.com/getsentry/sentry-javascript/blob/b624bff35854ea0497f0ea07425719723a73a79b/packages/node/src/sdk.ts#L38-L57
+
+export function initializeSentryBrowser() {
+  init({
+    dsn: publicConfig.APP_SENTRY_DSN,
+    environment: `${publicConfig.VERCEL_ENV ?? "local"}-client`,
+    release: buildConfig.GIT_COMMIT_REF ?? "local",
+  });
+}
diff --git a/app/utils/sentry-utils.server.tsx b/app/utils/sentry-utils.server.tsx
@@ -0,0 +1,18 @@
+import { CaptureConsole } from "@sentry/integrations";
+import { init } from "@sentry/node";
+import { buildConfig, publicConfig } from "./config";
+
+// cf. default integration
+// https://github.com/getsentry/sentry-javascript/blob/b624bff35854ea0497f0ea07425719723a73a79b/packages/browser/src/sdk.ts#L26-L35
+
+export function initializeSentryServer() {
+  init({
+    dsn: publicConfig.APP_SENTRY_DSN,
+    environment: `${publicConfig.VERCEL_ENV ?? "local"}-server`,
+    release: buildConfig.GIT_COMMIT_REF ?? "local",
+    // auto report console.error e.g.
+    // - trpc error in app/routes/trpc/$trpc.tsx
+    // - remix loader/ssr error https://github.com/remix-run/remix/blob/410e9d8aac044b3453c1dddbeb0bcc1d53cdec68/packages/remix-server-runtime/server.ts#L169
+    integrations: [new CaptureConsole()],
+  });
+}
diff --git a/misc/build/bundle-vercel.ts b/misc/build/bundle-vercel.ts
@@ -1,5 +1,7 @@
+import { execSync } from "child_process";
 import fs from "node:fs";
 import esbuild from "esbuild";
+import type { buildConfig } from "../../app/utils/config";
 
 // used by scripts/vercel.sh to
 // - bundle server app for simpler vercel deployment
@@ -9,6 +11,14 @@ import esbuild from "esbuild";
 // - https://esbuild.github.io/plugins/
 // - https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409
 
+const GIT_COMMIT_REF = execSync("git rev-parse HEAD", {
+  encoding: "utf8",
+}).trim();
+
+const BUILD_CONFIG_DEFINE: typeof buildConfig = {
+  GIT_COMMIT_REF,
+};
+
 esbuild.build({
   logLevel: "info",
   entryPoints: ["./build/remix/production/server/index.js"],
@@ -27,6 +37,9 @@ esbuild.build({
     "pg-query-stream",
   ],
   plugins: [noSourceMapNodeModulesPlugin()],
+  define: {
+    BUILD_CONFIG_DEFINE: JSON.stringify(BUILD_CONFIG_DEFINE),
+  },
 });
 
 // https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409

diff --git a/package.json b/package.json
@@ -52,6 +52,9 @@
     "@remix-run/server-runtime": "1.15.0",
     "@remix-run/v1-route-convention": "^0.1.1",
     "@remix-run/vercel": "1.15.0",
+    "@sentry/browser": "^7.51.1",
+    "@sentry/integrations": "^7.51.2",
+    "@sentry/node": "^7.51.1",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.28.0",
     "@tanstack/react-virtual": "3.0.0-beta.54",