chore(sentry): drop the tab-close case from the request failure comment

frontend/src/AppRoutes/__tests__/sentryFilters.test.ts

@@ -1,7 +1,9 @@
 import type { ErrorEvent, StackFrame } from '@sentry/react';
+import { AxiosError, AxiosHeaders } from 'axios';
 
 import {
 	hasNoAppFrames,
+	isExpectedRequestFailure,
 	isExternalIntegrationError,
 	SENTRY_IGNORE_ERRORS,
 } from '../sentryFilters';
@@ -138,3 +140,36 @@ describe('SENTRY_IGNORE_ERRORS', () => {
 		).toBe(true);
 	});
 });
+
+describe('isExpectedRequestFailure', () => {
+	function axiosErrorWithStatus(status: number): AxiosError {
+		const config = { headers: new AxiosHeaders() };
+		return new AxiosError(
+			`Request failed with status code ${status}`,
+			AxiosError.ERR_BAD_REQUEST,
+			config,
+			undefined,
+			{ status, statusText: '', headers: {}, config, data: {} },
+		);
+	}
+
+	it.each([401, 403])('drops a %i response', (status) => {
+		expect(isExpectedRequestFailure(axiosErrorWithStatus(status))).toBe(true);
+	});
+
+	it('drops a network error', () => {
+		expect(
+			isExpectedRequestFailure(
+				new AxiosError('Network Error', AxiosError.ERR_NETWORK),
+			),
+		).toBe(true);
+	});
+
+	it.each([400, 404, 500, 503])('keeps a %i response', (status) => {
+		expect(isExpectedRequestFailure(axiosErrorWithStatus(status))).toBe(false);
+	});
+
+	it('keeps an error that is not from axios', () => {
+		expect(isExpectedRequestFailure(new Error('Network Error'))).toBe(false);
+	});
+});

frontend/src/AppRoutes/index.tsx

@@ -40,6 +40,7 @@ import defaultRoutes, {
 } from './routes';
 import {
 	hasNoAppFrames,
+	isExpectedRequestFailure,
 	isExternalIntegrationError,
 	SENTRY_IGNORE_ERRORS,
 } from './sentryFilters';
@@ -341,6 +342,9 @@ function App(): JSX.Element {
 						if (error?.name === 'AbortError') {
 							return null;
 						}
+						if (isExpectedRequestFailure(hint?.originalException)) {
+							return null;
+						}
 						// Ignore benign Monaco cancellation errors (name 'Canceled').
 						if (error?.name === 'Canceled') {
 							return null;

frontend/src/AppRoutes/sentryFilters.ts

@@ -1,4 +1,5 @@
 import type { ErrorEvent } from '@sentry/react';
+import { AxiosError, isAxiosError } from 'axios';
 
 export const SENTRY_IGNORE_ERRORS = [
 	// A tab that outlived a deploy requests hashed assets the new build no longer
@@ -14,6 +15,18 @@ export const SENTRY_IGNORE_ERRORS = [
 	/Called on script loaded before session recording is available/,
 ];
 
+// Not UI bugs: 401/403 come from the session or role, ERR_NETWORK from a
+// dropped connection.
+export function isExpectedRequestFailure(error: unknown): boolean {
+	if (!isAxiosError(error)) {
+		return false;
+	}
+	const status = error.response?.status;
+	return (
+		error.code === AxiosError.ERR_NETWORK || status === 401 || status === 403
+	);
+}
+
 const APP_ASSETS_PATH = '/assets/';
 
 // Frames without a position are `[native code]`, which says nothing about the