update to latest epic stack

epicweb-dev/epic-stack@ae5f305

Author: kentcdodds

.env.example

@@ -4,9 +4,11 @@ DATABASE_URL="file:./data.db?connection_limit=1"
 CACHE_DATABASE_PATH="./other/cache.db"
 SESSION_SECRET="super-duper-s3cret"
 HONEYPOT_SECRET="super-duper-s3cret"
-INTERNAL_COMMAND_TOKEN="some-made-up-token"
 SENTRY_DSN="your-dsn"
 
+# this is set to a random value in the Dockerfile
+INTERNAL_COMMAND_TOKEN="some-made-up-token"
+
 # set this to false to prevent search engines from indexing the website
 # default to allow indexing for seo safety
 ALLOW_INDEXING="true"

app/components/progress-bar.tsx

@@ -22,7 +22,7 @@ function EpicProgress() {
 			.getAnimations()
 			.map(({ finished }) => finished)
 
-		Promise.allSettled(animationPromises).then(() => {
+		void Promise.allSettled(animationPromises).then(() => {
 			if (!delayedPending) setAnimationComplete(true)
 		})
 	}, [delayedPending])

app/entry.client.tsx

@@ -3,7 +3,7 @@ import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
-	import('./utils/monitoring.client.tsx').then(({ init }) => init())
+	void import('./utils/monitoring.client.tsx').then(({ init }) => init())
 }
 
 startTransition(() => {

app/entry.server.tsx

@@ -23,10 +23,6 @@ global.ENV = getEnv()
 
 initCron()
 
-if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
-	import('./utils/monitoring.server.ts').then(({ init }) => init())
-}
-
 type DocRequestArgs = Parameters<HandleDocumentRequestFunction>
 
 export default async function handleRequest(...args: DocRequestArgs) {
@@ -43,11 +39,15 @@ export default async function handleRequest(...args: DocRequestArgs) {
 	responseHeaders.set('fly-primary-instance', primaryInstance)
 	responseHeaders.set('fly-instance', currentInstance)
 
+	if (process.env.NODE_ENV === 'production' && process.env.SENTRY_DSN) {
+		responseHeaders.append('Document-Policy', 'js-profiling')
+	}
+
 	const callbackName = isbot(request.headers.get('user-agent'))
 		? 'onAllReady'
 		: 'onShellReady'
 
-	const nonce = String(loadContext.cspNonce) ?? undefined
+	const nonce = loadContext.cspNonce?.toString() ?? ''
 	return new Promise(async (resolve, reject) => {
 		let didError = false
 		// NOTE: this timing will only include things that are rendered in the shell
@@ -106,7 +106,12 @@ export function handleError(
 	}
 	if (error instanceof Error) {
 		console.error(chalk.red(error.stack))
-		Sentry.captureRemixServerException(error, 'remix.server', request)
+		void Sentry.captureRemixServerException(
+			error,
+			'remix.server',
+			request,
+			true,
+		)
 	} else {
 		console.error(chalk.red(error))
 		Sentry.captureException(error)

app/root.tsx

@@ -38,7 +38,6 @@ export const links: LinksFunction = () => {
 	return [
 		// Preload svg sprite as a resource to avoid render blocking
 		{ rel: 'preload', href: iconsHref, as: 'image' },
-		// Preload CSS as a resource to avoid render blocking
 		{ rel: 'mask-icon', href: '/favicons/mask-icon.svg' },
 		{
 			rel: 'alternate icon',
@@ -51,7 +50,6 @@ export const links: LinksFunction = () => {
 			href: '/site.webmanifest',
 			crossOrigin: 'use-credentials',
 		} as const, // necessary to make typescript happy
-		//These should match the css preloads above to avoid css as render blocking resource
 		{ rel: 'icon', type: 'image/svg+xml', href: '/favicons/favicon.svg' },
 		{ rel: 'stylesheet', href: tailwindStyleSheetUrl },
 	].filter(Boolean)

app/routes/_app+/_auth+/verify.server.ts

@@ -6,7 +6,6 @@ import { handleVerification as handleChangePhoneNumberVerification } from '#app/
 import { twoFAVerificationType } from '#app/routes/_app+/settings.profile+/two-factor.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
-import { ensurePrimary } from '#app/utils/litefs.server.ts'
 import { getDomainUrl } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { generateTOTP, verifyTOTP } from '#app/utils/totp.server.ts'
@@ -172,10 +171,6 @@ export async function validateRequest(
 		)
 	}
 
-	// this code path could be part of a loader (GET request), so we need to make
-	// sure we're running on primary because we're about to make writes.
-	await ensurePrimary()
-
 	const { value: submissionValue } = submission
 
 	async function deleteVerification() {

app/routes/_app+/_auth+/verify.tsx

@@ -121,6 +121,7 @@ export default function VerifyRoute() {
 								inputProps={{
 									...getInputProps(fields[codeQueryParam], { type: 'text' }),
 									autoComplete: 'one-time-code',
+									autoFocus: true,
 								}}
 								errors={fields[codeQueryParam].errors}
 							/>

app/routes/_app+/admin+/cache_.sqlite.server.ts

@@ -1,3 +1,6 @@
+import { json, redirect, type ActionFunctionArgs } from '@remix-run/node'
+import { z } from 'zod'
+import { cache } from '#app/utils/cache.server.ts'
 import {
 	getInstanceInfo,
 	getInternalInstanceDomain,
@@ -27,3 +30,29 @@ export async function updatePrimaryCacheValue({
 		body: JSON.stringify({ key, cacheValue }),
 	})
 }
+
+export async function action({ request }: ActionFunctionArgs) {
+	const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
+	if (!currentIsPrimary) {
+		throw new Error(
+			`${request.url} should only be called on the primary instance (${primaryInstance})}`,
+		)
+	}
+	const token = process.env.INTERNAL_COMMAND_TOKEN
+	const isAuthorized =
+		request.headers.get('Authorization') === `Bearer ${token}`
+	if (!isAuthorized) {
+		// nah, you can't be here...
+		return redirect('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
+	}
+	const { key, cacheValue } = z
+		.object({ key: z.string(), cacheValue: z.unknown().optional() })
+		.parse(await request.json())
+	if (cacheValue === undefined) {
+		await cache.delete(key)
+	} else {
+		// @ts-expect-error - we don't reliably know the type of cacheValue
+		await cache.set(key, cacheValue)
+	}
+	return json({ success: true })
+}

app/routes/_app+/admin+/cache_.sqlite.tsx

@@ -1,30 +1 @@
-import { json, redirect, type ActionFunctionArgs } from '@remix-run/node'
-import { z } from 'zod'
-import { cache } from '#app/utils/cache.server.ts'
-import { getInstanceInfo } from '#app/utils/litefs.server'
-
-export async function action({ request }: ActionFunctionArgs) {
-	const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
-	if (!currentIsPrimary) {
-		throw new Error(
-			`${request.url} should only be called on the primary instance (${primaryInstance})}`,
-		)
-	}
-	const token = process.env.INTERNAL_COMMAND_TOKEN
-	const isAuthorized =
-		request.headers.get('Authorization') === `Bearer ${token}`
-	if (!isAuthorized) {
-		// nah, you can't be here...
-		return redirect('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
-	}
-	const { key, cacheValue } = z
-		.object({ key: z.string(), cacheValue: z.unknown().optional() })
-		.parse(await request.json())
-	if (cacheValue === undefined) {
-		await cache.delete(key)
-	} else {
-		// @ts-expect-error - we don't reliably know the type of cacheValue
-		await cache.set(key, cacheValue)
-	}
-	return json({ success: true })
-}
+export { action } from './cache_.sqlite.server.ts'

app/utils/db.server.ts

@@ -16,7 +16,7 @@ export const prisma = remember('prisma', () => {
 			{ level: 'warn', emit: 'stdout' },
 		],
 	})
-	client.$on('query', async e => {
+	client.$on('query', async (e) => {
 		if (e.duration < logThreshold) return
 		const color =
 			e.duration < logThreshold * 1.1
@@ -31,6 +31,6 @@ export const prisma = remember('prisma', () => {
 		const dur = chalk[color](`${e.duration}ms`)
 		console.info(`prisma:query - ${dur} - ${e.query}`)
 	})
-	client.$connect()
+	void client.$connect()
 	return client
 })