From cb0ce9b20f680fc0d9d59abf184165fd30c86ace Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Wed, 25 Oct 2023 10:32:46 -0400
Subject: [PATCH] (core) Avoid reporting unhelpful ResizeObserver error

Summary: The error appears to be benign and not caused by any of our code.

Test Plan:
Reproducing was tricky.

On the Access Rules page, changing the browser's zoom level caused the error to surface. Weirdly enough, it only happened when connected to a larger, external monitor, and not on my laptop's internal monitor.

In any case, manual testing was done to confirm the error is no longer reported to the user after this change.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D4095
---
 app/client/aclui/AccessRules.ts | 11 ++++++++--
 app/client/models/errors.ts     | 36 ++++++++++++++++++++++++---------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/client/aclui/AccessRules.ts b/app/client/aclui/AccessRules.ts
index e205bce1..afe04df5 100644
--- a/app/client/aclui/AccessRules.ts
+++ b/app/client/aclui/AccessRules.ts
@@ -1322,7 +1322,7 @@ class SpecialSchemaObsRuleSet extends SpecialObsRuleSet {
   protected _buildDomWarning(): DomContents {
     return dom.maybe(
       (use) => use(this._body).every(rule => rule.isBuiltInOrEmpty(use)),
-      () => cssConditionError({style: 'margin-left: 56px; margin-bottom: 8px;'},
+      () => cssError(
         t("This default should be changed if editors' access is to be limited. "),
         dom('a', {style: 'color: inherit; text-decoration: underline'},
           'Dismiss', dom.on('click', () => this._allowEditors('confirm'))),
@@ -1969,10 +1969,17 @@ const cssInput = styled(textInput, `
   }
 `);
 
+const cssError = styled('div', `
+  color: ${theme.errorText};
+  margin-left: 56px;
+  margin-bottom: 8px;
+  margin-top: 4px;
+`);
+
 const cssConditionError = styled('div', `
+  color: ${theme.errorText};
   margin-top: 4px;
   width: 100%;
-  color: ${theme.errorText};
 `);
 
 /**
diff --git a/app/client/models/errors.ts b/app/client/models/errors.ts
index ad39f368..7ca826a4 100644
--- a/app/client/models/errors.ts
+++ b/app/client/models/errors.ts
@@ -70,17 +70,32 @@ export function reportSuccess(msg: MessageType, options?: Partial<INotifyOptions
   return reportMessage(msg, {level: 'success', ...options});
 }
 
-// Errors from cross-origin scripts, and some add-ons, show up as unhelpful sanitized "Script
-// error." messages. We want to know if they occur, but they are useless to the user, and useless
-// to report multiple times. We report them just once to the server.
-//
-// In particular, this addresses a bug on iOS version of Firefox, which produces uncaught
-// sanitized errors on load AND on attempts to report them, leading to a loop that hangs the
-// browser. Reporting just once is a sufficient workaround.
 function isUnhelpful(ev: ErrorEvent) {
-  return !ev.filename && !ev.lineno && ev.message?.toLowerCase().includes('script error');
+  if (ev.message === 'ResizeObserver loop completed with undelivered notifications.') {
+    // Sometimes on Chrome, changing the browser zoom level causes this benign error to
+    // be thrown. It seems to only appear on the Access Rules page, and may have something
+    // to do with Ace. In any case, the error seems harmless and it isn't particularly helpful,
+    // so we don't report it more than once. A quick Google search for the error message
+    // produces many reports, although at the time of this comment, none seem to be related
+    // to Ace, so there's a chance something else is amiss.
+    return true;
+  }
+
+  if (!ev.filename && !ev.lineno && ev.message?.toLowerCase().includes('script error')) {
+    // Errors from cross-origin scripts, and some add-ons, show up as unhelpful sanitized "Script
+    // error." messages. We want to know if they occur, but they are useless to the user, and useless
+    // to report multiple times. We report them just once to the server.
+    //
+    // In particular, this addresses a bug on iOS version of Firefox, which produces uncaught
+    // sanitized errors on load AND on attempts to report them, leading to a loop that hangs the
+    // browser. Reporting just once is a sufficient workaround.
+    return true;
+  }
+
+  return false;
 }
-let unhelpfulErrors = 0;
+
+const unhelpfulErrors = new Set<string>();
 
 /**
  * Report an error to the user using the global Notifier instance. If the argument is a UserError
@@ -99,8 +114,9 @@ export function reportError(err: Error|string, ev?: ErrorEvent): void {
   if (ev && isUnhelpful(ev)) {
     // Report just once to the server. There is little point reporting subsequent such errors once
     // we know they happen, since each individual error has no useful information.
-    if (++unhelpfulErrors <= 1) {
+    if (!unhelpfulErrors.has(ev.message)) {
       logError(err);
+      unhelpfulErrors.add(ev.message);
     }
     return;
   }