From dfbcfc3ffffd43e29ca212bb44b6e8b64d40c8e3 Mon Sep 17 00:00:00 2001
From: Tung Wu <tung@oursky.com>
Date: Wed, 18 Dec 2024 16:55:29 +0800
Subject: [PATCH 1/2] Ignore network error in portal

---
 portal/src/ReactApp.tsx  |  7 ++++++-
 portal/src/util/error.ts | 29 +++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 portal/src/util/error.ts

diff --git a/portal/src/ReactApp.tsx b/portal/src/ReactApp.tsx
index 5051d78923..2f32b5c3b7 100644
--- a/portal/src/ReactApp.tsx
+++ b/portal/src/ReactApp.tsx
@@ -8,6 +8,7 @@ import React, {
 import {
   Exception as SentryException,
   ErrorEvent as SentryErrorEvent,
+  EventHint,
   init as sentryInit,
 } from "@sentry/react";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
@@ -55,6 +56,7 @@ import {
   UnauthenticatedDialogContext,
   UnauthenticatedDialogContextValue,
 } from "./components/auth/UnauthenticatedDialogContext";
+import { isNetworkError } from "./util/error";
 
 async function loadSystemConfig(): Promise<SystemConfig> {
   const resp = await fetch("/api/system-config.json");
@@ -71,10 +73,13 @@ function isPosthogResetGroupsEvent(event: SentryErrorEvent) {
 }
 
 // DEV-1767: Unknown cause on posthog error, silence for now
-function sentryBeforeSend(event: SentryErrorEvent) {
+function sentryBeforeSend(event: SentryErrorEvent, hint: EventHint) {
   if (isPosthogResetGroupsEvent(event)) {
     return null;
   }
+  if (isNetworkError(hint)) {
+    return null;
+  }
   return event;
 }
 
diff --git a/portal/src/util/error.ts b/portal/src/util/error.ts
new file mode 100644
index 0000000000..4a60ccc2e0
--- /dev/null
+++ b/portal/src/util/error.ts
@@ -0,0 +1,29 @@
+// The original work is https://github.com/sindresorhus/is-network-error/blob/main/index.js
+// The modifications are
+// 1. Remove the error message checking for Node.js, since this code does not run on Node.js.
+// 2. The original work also check error.stack === undefined on Safari >= 17, but in our observation,
+//    error.stack IS NOT undefined, so we removed that checking.
+// 3. The original work call Object.prototype.toString on error, and check if the string is "[object Error]",
+//    we just use instanceof to check if it is an error.
+const errorMessages = new Set([
+  "network error", // Chrome
+  "Failed to fetch", // Chrome
+  "NetworkError when attempting to fetch resource.", // Firefox
+  "The Internet connection appears to be offline.", // Safari 16
+  "Load failed", // Safari 17+
+  "Network request failed", // `cross-fetch`
+]);
+
+export function isNetworkError(error: unknown): boolean {
+  const isValid =
+    error &&
+    error instanceof Error &&
+    error.name === "TypeError" &&
+    typeof error.message === "string";
+
+  if (!isValid) {
+    return false;
+  }
+
+  return errorMessages.has(error.message);
+}

From 37613192079a4e95ae3b4d6ca63460a99868c45e Mon Sep 17 00:00:00 2001
From: Tung Wu <tung@oursky.com>
Date: Wed, 18 Dec 2024 17:49:33 +0800
Subject: [PATCH 2/2] Pass original exception to check if it is network error

---
 portal/src/ReactApp.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/portal/src/ReactApp.tsx b/portal/src/ReactApp.tsx
index 2f32b5c3b7..c26276b9a5 100644
--- a/portal/src/ReactApp.tsx
+++ b/portal/src/ReactApp.tsx
@@ -77,7 +77,7 @@ function sentryBeforeSend(event: SentryErrorEvent, hint: EventHint) {
   if (isPosthogResetGroupsEvent(event)) {
     return null;
   }
-  if (isNetworkError(hint)) {
+  if (isNetworkError(hint.originalException)) {
     return null;
   }
   return event;