Clean up Sentry noise

packages/workshop-app/app/routes/$.tsx

@@ -26,6 +26,10 @@ export async function loader({ params }: Route.LoaderArgs) {
 	throw new Response('Not found', { status: 404 })
 }
 
+export function action() {
+	return new Response('Not found', { status: 404 })
+}
+
 export default function NotFound() {
 	// due to the loader, this component will never be rendered, but we'll return
 	// the error boundary just in case.

packages/workshop-app/app/utils/monitoring.client.ts

@@ -5,6 +5,7 @@ import {
 	useLocation,
 	useNavigationType,
 } from 'react-router'
+import { isProcessingPictureInPictureRequest } from './sentry-filters.ts'
 
 // Dynamic import of Sentry with error handling
 const Sentry = await import('@sentry/react-router').catch((error) => {
@@ -104,6 +105,8 @@ export function init() {
 			"Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement'",
 		],
 		beforeSend(event) {
+			if (isProcessingPictureInPictureRequest(event)) return null
+
 			// Don't send errors to Sentry for bot requests
 			if (typeof navigator !== 'undefined' && navigator.userAgent) {
 				// Basic bot detection for client-side - check for common bot indicators

packages/workshop-app/app/utils/sentry-filters.ts

@@ -0,0 +1,25 @@
+type SentryExceptionValue = {
+	type?: string
+	value?: string
+}
+
+type SentryEventWithException = {
+	exception?: {
+		values?: Array<SentryExceptionValue>
+	}
+}
+
+export const processingPictureInPictureRequestMessage =
+	'The video element is processing a Picture-in-Picture request.'
+
+export function isProcessingPictureInPictureRequest(
+	event: SentryEventWithException,
+) {
+	return (
+		event.exception?.values?.some(
+			(value) =>
+				value.type === 'NotAllowedError' &&
+				value.value === processingPictureInPictureRequestMessage,
+		) ?? false
+	)
+}

packages/workshop-app/tests/catchall-route.test.ts

@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest'
+import { action } from '../app/routes/$.tsx'
+
+test('returns a plain 404 for scanner POSTs to catch-all paths', async () => {
+	const response = action()
+
+	expect(response.status).toBe(404)
+	await expect(response.text()).resolves.toBe('Not found')
+})

packages/workshop-app/tests/sentry-filters.test.ts

@@ -0,0 +1,50 @@
+import { expect, test } from 'vitest'
+import {
+	isProcessingPictureInPictureRequest,
+	processingPictureInPictureRequestMessage,
+} from '../app/utils/sentry-filters.ts'
+
+test('matches the Picture-in-Picture processing DOMException exactly', () => {
+	expect(
+		isProcessingPictureInPictureRequest({
+			exception: {
+				values: [
+					{
+						type: 'NotAllowedError',
+						value: processingPictureInPictureRequestMessage,
+					},
+				],
+			},
+		}),
+	).toBe(true)
+})
+
+test('does not match unrelated NotAllowedError exceptions', () => {
+	expect(
+		isProcessingPictureInPictureRequest({
+			exception: {
+				values: [
+					{
+						type: 'NotAllowedError',
+						value: 'Permission denied.',
+					},
+				],
+			},
+		}),
+	).toBe(false)
+})
+
+test('does not match the same message on a different exception type', () => {
+	expect(
+		isProcessingPictureInPictureRequest({
+			exception: {
+				values: [
+					{
+						type: 'SecurityError',
+						value: processingPictureInPictureRequestMessage,
+					},
+				],
+			},
+		}),
+	).toBe(false)
+})

packages/workshop-app/vitest.sentry-noise.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+	test: {
+		name: 'app-sentry-noise',
+		include: ['tests/catchall-route.test.ts', 'tests/sentry-filters.test.ts'],
+		setupFiles: ['../../tests/vitest-setup.ts'],
+		mockReset: true,
+	},
+})

vitest.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
 	test: {
 		projects: [
+			'./packages/workshop-app/vitest.sentry-noise.config.ts',
 			'./packages/workshop-app',
 			'./packages/workshop-utils',
 			'./packages/workshop-presence',