Merge pull request #101 from goodeats/100-vite-sentry-setup

vite sentry setup

.github/workflows/deploy.yml

@@ -178,5 +178,6 @@ jobs:
   #       if: ${{ github.ref == 'refs/heads/main' }}
   #       run:
   #         flyctl deploy --remote-only --build-arg COMMIT_SHA=${{ github.sha }}
+  #         --build-secret SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
   #       env:
   #         FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

app/entry.server.tsx

@@ -7,6 +7,7 @@ import {
 } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import * as Sentry from '@sentry/remix'
+import chalk from 'chalk'
 import isbot from 'isbot'
 import { renderToPipeableStream } from 'react-dom/server'
 import { getEnv, init } from './utils/env.server.ts'
@@ -70,10 +71,8 @@ export default async function handleRequest(...args: DocRequestArgs) {
 				onShellError: (err: unknown) => {
 					reject(err)
 				},
-				onError: (error: unknown) => {
+				onError: () => {
 					didError = true
-
-					console.error(error)
 				},
 				nonce,
 			},
@@ -97,9 +96,16 @@ export function handleError(
 	error: unknown,
 	{ request }: LoaderFunctionArgs | ActionFunctionArgs,
 ): void {
+	// Skip capturing if the request is aborted as Remix docs suggest
+	// Ref: https://remix.run/docs/en/main/file-conventions/entry.server#handleerror
+	if (request.signal.aborted) {
+		return
+	}
 	if (error instanceof Error) {
+		console.error(chalk.red(error.stack))
 		Sentry.captureRemixServerException(error, 'remix.server', request)
 	} else {
+		console.error(chalk.red(error))
 		Sentry.captureException(error)
 	}
 }

app/models/user/user.server.ts

@@ -1,4 +1,4 @@
-import { type User } from '@sentry/remix'
+import { type User } from '@prisma/client'
 import { type DateOrString } from '#app/definitions/prisma-helper'
 
 // Omitting 'createdAt' and 'updatedAt' from the User interface

app/services/design-type/update-fill.service.ts

@@ -1,4 +1,3 @@
-import { type User } from '@sentry/remix'
 import { type IDesign } from '#app/models/design/design.server'
 import { type IFill } from '#app/models/design-type/fill/fill.server'
 import {
@@ -7,14 +6,15 @@ import {
 	updateDesignTypeFillValue,
 	updateDesignTypeFillStyle,
 } from '#app/models/design-type/fill/fill.update.server'
+import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeFillValueService = async ({
 	userId,
 	id,
 	designId,
 	value,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IFill['id']
 	designId: IDesign['id']
 	value: number
@@ -44,7 +44,7 @@ export const updateDesignTypeFillBasisService = async ({
 	designId,
 	basis,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IFill['id']
 	designId: IDesign['id']
 	basis: string
@@ -74,7 +74,7 @@ export const updateDesignTypeFillStyleService = async ({
 	designId,
 	style,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IFill['id']
 	designId: IDesign['id']
 	style: string

app/services/design-type/update-layout.service.ts

@@ -1,4 +1,3 @@
-import { type User } from '@sentry/remix'
 import { type IDesign } from '#app/models/design/design.server'
 import { type ILayout } from '#app/models/design-type/layout/layout.server'
 import {
@@ -8,14 +7,15 @@ import {
 	updateDesignTypeLayoutColumns,
 	updateDesignTypeLayoutStyle,
 } from '#app/models/design-type/layout/layout.update.server'
+import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeLayoutCountService = async ({
 	userId,
 	id,
 	designId,
 	count,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ILayout['id']
 	designId: IDesign['id']
 	count: number
@@ -45,7 +45,7 @@ export const updateDesignTypeLayoutRowsService = async ({
 	designId,
 	rows,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ILayout['id']
 	designId: IDesign['id']
 	rows: number
@@ -75,7 +75,7 @@ export const updateDesignTypeLayoutColumnsService = async ({
 	designId,
 	columns,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ILayout['id']
 	designId: IDesign['id']
 	columns: number
@@ -105,7 +105,7 @@ export const updateDesignTypeLayoutStyleService = async ({
 	designId,
 	style,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ILayout['id']
 	designId: IDesign['id']
 	style: number

app/services/design-type/update-line.service.ts

@@ -1,4 +1,3 @@
-import { type User } from '@sentry/remix'
 import { type IDesign } from '#app/models/design/design.server'
 import { type ILine } from '#app/models/design-type/line/line.server'
 import {
@@ -7,14 +6,15 @@ import {
 	updateDesignTypeLineBasis,
 	updateDesignTypeLineFormat,
 } from '#app/models/design-type/line/line.update.server'
+import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeLineWidthService = async ({
 	userId,
 	id,
 	designId,
 	width,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ILine['id']
 	designId: IDesign['id']
 	width: number
@@ -44,7 +44,7 @@ export const updateDesignTypeLineBasisService = async ({
 	designId,
 	basis,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ILine['id']
 	designId: IDesign['id']
 	basis: string
@@ -74,7 +74,7 @@ export const updateDesignTypeLineFormatService = async ({
 	designId,
 	format,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ILine['id']
 	designId: IDesign['id']
 	format: string

app/services/design-type/update-palette.service.ts

@@ -1,18 +1,18 @@
-import { type User } from '@sentry/remix'
 import { type IDesign } from '#app/models/design/design.server'
 import { type IPalette } from '#app/models/design-type/palette/palette.server'
 import {
 	type IDesignTypePaletteUpdatedResponse,
 	updateDesignTypePaletteValue,
 } from '#app/models/design-type/palette/palette.update.server'
+import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypePaletteValueService = async ({
 	userId,
 	id,
 	designId,
 	value,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IPalette['id']
 	designId: IDesign['id']
 	value: number

app/services/design-type/update-rotate.service.ts

@@ -1,19 +1,19 @@
-import { type User } from '@sentry/remix'
 import { type IDesign } from '#app/models/design/design.server'
 import { type IRotate } from '#app/models/design-type/rotate/rotate.server'
 import {
 	type IDesignTypeRotateUpdatedResponse,
 	updateDesignTypeRotateValue,
 	updateDesignTypeRotateBasis,
 } from '#app/models/design-type/rotate/rotate.update.server'
+import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeRotateValueService = async ({
 	userId,
 	id,
 	designId,
 	value,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IRotate['id']
 	designId: IDesign['id']
 	value: number
@@ -43,7 +43,7 @@ export const updateDesignTypeRotateBasisService = async ({
 	designId,
 	basis,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IRotate['id']
 	designId: IDesign['id']
 	basis: string

app/services/design-type/update-size.service.ts

@@ -1,4 +1,3 @@
-import { type User } from '@sentry/remix'
 import { type IDesign } from '#app/models/design/design.server'
 import { type ISize } from '#app/models/design-type/size/size.server'
 import {
@@ -7,14 +6,15 @@ import {
 	updateDesignTypeSizeBasis,
 	updateDesignTypeSizeFormat,
 } from '#app/models/design-type/size/size.update.server'
+import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeSizeValueService = async ({
 	userId,
 	id,
 	designId,
 	value,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ISize['id']
 	designId: IDesign['id']
 	value: number
@@ -44,7 +44,7 @@ export const updateDesignTypeSizeBasisService = async ({
 	designId,
 	basis,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ISize['id']
 	designId: IDesign['id']
 	basis: string
@@ -74,7 +74,7 @@ export const updateDesignTypeSizeFormatService = async ({
 	designId,
 	format,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: ISize['id']
 	designId: IDesign['id']
 	format: string

app/services/design-type/update-stroke.service.ts

@@ -1,4 +1,3 @@
-import { type User } from '@sentry/remix'
 import { type IDesign } from '#app/models/design/design.server'
 import { type IStroke } from '#app/models/design-type/stroke/stroke.server'
 import {
@@ -7,14 +6,15 @@ import {
 	updateDesignTypeStrokeStyle,
 	updateDesignTypeStrokeValue,
 } from '#app/models/design-type/stroke/stroke.update.server'
+import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeStrokeValueService = async ({
 	userId,
 	id,
 	designId,
 	value,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IStroke['id']
 	designId: IDesign['id']
 	value: number
@@ -44,7 +44,7 @@ export const updateDesignTypeStrokeBasisService = async ({
 	designId,
 	basis,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IStroke['id']
 	designId: IDesign['id']
 	basis: string
@@ -74,7 +74,7 @@ export const updateDesignTypeStrokeStyleService = async ({
 	designId,
 	style,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IStroke['id']
 	designId: IDesign['id']
 	style: string

app/services/design-type/update-template.service.ts

@@ -1,4 +1,3 @@
-import { type User } from '@sentry/remix'
 import { type IDesign } from '#app/models/design/design.server'
 import { type IFill } from '#app/models/design-type/fill/fill.server'
 import {
@@ -7,14 +6,15 @@ import {
 	updateDesignTypeFillValue,
 	updateDesignTypeFillStyle,
 } from '#app/models/design-type/fill/fill.update.server'
+import { type IUser } from '#app/models/user/user.server'
 
 export const updateDesignTypeFillValueService = async ({
 	userId,
 	id,
 	designId,
 	value,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IFill['id']
 	designId: IDesign['id']
 	value: number
@@ -44,7 +44,7 @@ export const updateDesignTypeFillBasisService = async ({
 	designId,
 	basis,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IFill['id']
 	designId: IDesign['id']
 	basis: string
@@ -74,7 +74,7 @@ export const updateDesignTypeFillStyleService = async ({
 	designId,
 	style,
 }: {
-	userId: User['id']
+	userId: IUser['id']
 	id: IFill['id']
 	designId: IDesign['id']
 	style: string

app/utils/monitoring.client.tsx

@@ -6,6 +6,19 @@ export function init() {
 	Sentry.init({
 		dsn: ENV.SENTRY_DSN,
 		environment: ENV.MODE,
+		beforeSend(event) {
+			if (event.request?.url) {
+				const url = new URL(event.request.url)
+				if (
+					url.protocol === 'chrome-extension:' ||
+					url.protocol === 'moz-extension:'
+				) {
+					// This error is from a browser extension, ignore it
+					return null
+				}
+			}
+			return event
+		},
 		integrations: [
 			new Sentry.BrowserTracing({
 				routingInstrumentation: Sentry.remixRouterInstrumentation(

fly.toml

@@ -12,9 +12,6 @@ auto_rollback = true
 source = "data"
 destination = "/data"
 
-[deploy]
-release_command = "node ./other/sentry-create-release"
-
 [[services]]
 internal_port = 8080
 processes = [ "app" ]