Rename reportError to logError to avoid new global type

pimterry · pimterry · commit eb515ca5455f · 2023-07-17T15:53:42.000+02:00
There's a relatively recent addition to the DOM global types, due to a
real method available for web workers, which means it's very very easy
to accidentally call reportError without importing it, which fails
everywhere except web workers, where it merely does completely the wrong
thing.

logError is exactly the same, but without that problem.
diff --git a/src/components/common/copy-button.tsx b/src/components/common/copy-button.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Icon } from "../../icons";
 import { styled } from '../../styles';
-import { reportError } from '../../errors';
+import { logError } from '../../errors';
 
 import { clickOnEnter } from '../component-utils';
 import { PillButton } from './pill';
@@ -92,6 +92,6 @@ async function copyToClipboard(content: string) {
         await navigator.clipboard!.writeText(content);
     } catch (e) {
         console.log('Failed to copy to the clipboard');
-        reportError(e);
+        logError(e);
     }
 }
diff --git a/src/components/editor/base-editor.tsx b/src/components/editor/base-editor.tsx
@@ -8,7 +8,7 @@ import type { SchemaObject } from 'openapi-directory';
 import type * as monacoTypes from 'monaco-editor';
 import type { default as _MonacoEditor, MonacoEditorProps } from 'react-monaco-editor';
 
-import { reportError } from '../../errors';
+import { logError } from '../../errors';
 import { delay } from '../../util/promise';
 import { asError } from '../../util/error';
 import { Omit } from '../../types';
@@ -358,7 +358,7 @@ export class BaseEditor extends React.Component<EditorProps> {
 
     render() {
         if (!this.monacoEditorLoaded || !MonacoEditor) {
-            reportError('Monaco editor failed to load');
+            logError('Monaco editor failed to load');
             return null;
         }
 
diff --git a/src/components/intercept/config/android-device-config.tsx b/src/components/intercept/config/android-device-config.tsx
@@ -10,7 +10,7 @@ import {
 
 import { styled } from '../../../styles';
 import { stringToBuffer } from '../../../util';
-import { reportError } from '../../../errors';
+import { logError } from '../../../errors';
 
 import { Interceptor } from '../../../model/interception/interceptors';
 import { ProxyStore } from '../../../model/proxy-store';
@@ -149,7 +149,7 @@ class AndroidConfig extends React.Component<{
                     "\n\n" +
                     "Please open an issue at github.com/httptoolkit/httptoolkit"
                 );
-                reportError("Android QR activation failed - no network addresses");
+                logError("Android QR activation failed - no network addresses");
                 this.props.closeSelf();
             }
         });
diff --git a/src/components/intercept/config/electron-config.tsx b/src/components/intercept/config/electron-config.tsx
@@ -4,7 +4,7 @@ import { observer, inject } from 'mobx-react';
 
 import { styled } from '../../../styles';
 import { Icon } from '../../../icons';
-import { reportError } from '../../../errors';
+import { logError } from '../../../errors';
 
 import { Interceptor } from '../../../model/interception/interceptors';
 import { UiStore } from '../../../model/ui-store';
@@ -176,7 +176,7 @@ class ElectronConfig extends React.Component<{
             reportSuccess();
         }).catch((e) => {
             this.props.uiStore!.forgetElectronPath(pathToApplication);
-            reportError(e);
+            logError(e);
         });
     }
 
diff --git a/src/components/intercept/intercept-option.tsx b/src/components/intercept/intercept-option.tsx
@@ -6,7 +6,7 @@ import { observer, inject } from 'mobx-react';
 import { NARROW_LAYOUT_BREAKPOINT, styled } from '../../styles';
 import { Icon } from '../../icons';
 import { trackEvent } from '../../metrics';
-import { reportError } from '../../errors';
+import { logError } from '../../errors';
 import { windowSize } from '../../util/ui';
 
 import { Interceptor } from '../../model/interception/interceptors';
@@ -324,7 +324,7 @@ export class InterceptOption extends React.Component<InterceptOptionProps> {
             onActivationStarted();
             activateInterceptor(interceptor.activationOptions)
             .then(() => onActivationSuccessful())
-            .catch((e) => reportError(e));
+            .catch((e) => logError(e));
         }
     }
 
diff --git a/src/components/mock/mock-page.tsx b/src/components/mock/mock-page.tsx
@@ -7,7 +7,7 @@ import * as dateFns from 'date-fns';
 import { styled } from '../../styles';
 import { WithInjected } from '../../types';
 import { Icon } from '../../icons';
-import { reportError } from '../../errors';
+import { logError } from '../../errors';
 import { uploadFile, saveFile } from '../../util/ui';
 
 import { RulesStore } from '../../model/rules/rules-store';
@@ -332,7 +332,7 @@ class MockPage extends React.Component<MockPageProps> {
                     JSON.parse(uploadedFile)
                 );
             } catch (e) {
-                reportError(e);
+                logError(e);
                 alert(`Rules could not be imported: ${e}`);
             }
         }
diff --git a/src/components/view/http/http-details-pane.tsx b/src/components/view/http/http-details-pane.tsx
@@ -6,7 +6,7 @@ import * as portals from 'react-reverse-portal';
 
 import { CollectedEvent, HtkResponse, HttpExchange } from '../../../types';
 import { styled } from '../../../styles';
-import { reportError } from '../../../errors';
+import { logError } from '../../../errors';
 
 import { UiStore } from '../../../model/ui-store';
 import { RulesStore } from '../../../model/rules/rules-store';
@@ -229,7 +229,7 @@ export class HttpDetailsPane extends React.Component<{
         ) {
             return this.renderWebSocketMessages(exchange);
         } else {
-            reportError(`Expanded ${expandedCard}, but can't show anything`);
+            logError(`Expanded ${expandedCard}, but can't show anything`);
             return null; // Shouldn't ever happen, unless we get into a funky broken state
         }
     }
diff --git a/src/components/view/http/http-error-header.tsx b/src/components/view/http/http-error-header.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as semver from 'semver';
 
 import { WarningIcon } from '../../../icons';
-import { reportError } from '../../../errors';
+import { logError } from '../../../errors';
 
 import { desktopVersion, versionSatisfies, DESKTOP_HEADER_LIMIT_CONFIGURABLE } from '../../../services/service-versions';
 
@@ -110,7 +110,7 @@ export function tagsToErrorType(tags: string[]): ErrorType | undefined {
         tags.filter(t => t.startsWith("passthrough-error:")).length > 0 ||
         tags.filter(t => t.startsWith("client-error:")).length > 0
     ) {
-        reportError(`Unrecognized error tag ${JSON.stringify(tags)}`);
+        logError(`Unrecognized error tag ${JSON.stringify(tags)}`);
         return 'unknown';
     }
 }
diff --git a/src/components/view/http/http-export-card.tsx b/src/components/view/http/http-export-card.tsx
@@ -10,7 +10,7 @@ import { Omit, HttpExchange } from '../../../types';
 import { styled } from '../../../styles';
 import { Icon } from '../../../icons';
 import { saveFile } from '../../../util/ui';
-import { reportError } from '../../../errors';
+import { logError } from '../../../errors';
 
 import { AccountStore } from '../../../model/account/account-store';
 import { UiStore } from '../../../model/ui-store';
@@ -142,7 +142,7 @@ const ExportSnippetEditor = observer((p: {
         snippet = new HTTPSnippet(harSnippetBase).convert(target, client);
     } catch (e) {
         console.log(`Failed to export request for ${target}--${client}`);
-        reportError(e);
+        logError(e);
         snippet = dedent`
             Could not generate a snippet for this request
 
diff --git a/src/components/view/view-event-list-buttons.tsx b/src/components/view/view-event-list-buttons.tsx
@@ -10,7 +10,7 @@ import { saveFile, uploadFile, Ctrl } from '../../util/ui';
 import { AccountStore } from '../../model/account/account-store';
 import { EventsStore } from '../../model/events/events-store';
 import { generateHar } from '../../model/http/har';
-import { reportError } from '../../errors';
+import { logError } from '../../errors';
 import { formatAjvError } from '../../util/json-schema';
 
 import { IconButton } from '../common/icon-button';
@@ -83,7 +83,7 @@ export const ImportHarButton = inject('eventsStore', 'accountStore')(
                         data = JSON.parse(uploadedFile);
                         await props.eventsStore!.loadFromHar(data);
                     } catch (error: any) {
-                        reportError(error);
+                        logError(error);
 
                         if (error.name === 'HARError' && error.errors) {
                             alert(dedent`
diff --git a/src/errors.ts b/src/errors.ts
@@ -50,7 +50,7 @@ export function initSentry(dsn: string | undefined) {
     }
 }
 
-export function reportErrorsAsUser(email: string | undefined) {
+export function logErrorsAsUser(email: string | undefined) {
     if (!sentryInitialized) return;
 
     Sentry.configureScope((scope) => {
@@ -66,7 +66,7 @@ function addErrorTag(key: string, value: string) {
     });
 }
 
-export function reportError(error: Error | string | unknown, metadata: object = {}) {
+export function logError(error: Error | string | unknown, metadata: object = {}) {
     console.log('Reporting error:', error, metadata);
     if (!sentryInitialized) return;
 
diff --git a/src/index.tsx b/src/index.tsx
@@ -7,7 +7,7 @@ const urlParams = new URLSearchParams(window.location.search);
 const authToken = urlParams.get('authToken');
 localForage.setItem('latest-auth-token', authToken);
 
-import { initSentry, reportError } from './errors';
+import { initSentry, logError } from './errors';
 initSentry(process.env.SENTRY_DSN);
 
 import * as _ from 'lodash';
@@ -155,12 +155,12 @@ Promise.race([
         { error: e }
     );
     document.dispatchEvent(failureEvent);
-    reportError(e);
+    logError(e);
 
     appStartupPromise.then(() => {
         serverVersion.then(async (currentVersion) => {
             console.log('Server version was', await lastServerVersion, 'now started late with', currentVersion);
-            reportError('Successfully initialized application, but after timeout');
+            logError('Successfully initialized application, but after timeout');
         });
     });
 });
diff --git a/src/model/account/account-store.ts b/src/model/account/account-store.ts
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import { observable, action, flow, computed, when } from 'mobx';
 
-import { reportError, reportErrorsAsUser } from '../../errors';
+import { logError, logErrorsAsUser } from '../../errors';
 import { trackEvent } from '../../metrics';
 import { delay } from '../../util/promise';
 import { ObservablePromise, lazyObservablePromise, observablePromise } from '../../util/observable';
@@ -34,7 +34,7 @@ export class AccountStore {
     readonly initialized = lazyObservablePromise(async () => {
         // All async auth-related errors at any stage (bad tokens, invalid subscription data,
         // misc failures) will come through here, so we can log & debug later.
-        loginEvents.on('app_error', reportError);
+        loginEvents.on('app_error', logError);
 
         initializeAuthUi({
             // Proper indefinitely persistent session via refreshable token please
@@ -105,7 +105,7 @@ export class AccountStore {
 
         // Include the user email in error reports whilst they're logged in.
         // Useful generally, but especially for checkout/subscription issues.
-        reportErrorsAsUser(this.user.email);
+        logErrorsAsUser(this.user.email);
 
         if (this.user.banned) {
             alert('Your account has been blocked for abuse. Please contact help@httptoolkit.com.');
@@ -203,7 +203,7 @@ export class AccountStore {
             // It's checkout time, and the rest is in the hands of Paddle/PayPro
             yield this.purchasePlan(this.user.email!, selectedPlan);
         } catch (error: any) {
-            reportError(error);
+            logError(error);
             alert(`${
                 error.message || error.code || 'Error'
             }\n\nPlease check your email for details.\nIf you need help, get in touch at billing@httptoolkit.com.`);
@@ -346,7 +346,7 @@ export class AccountStore {
             console.log('Subscription cancellation confirmed');
         } catch (e: any) {
             console.log(e);
-            reportError(`Subscription cancellation failed: ${e.message || e}`);
+            logError(`Subscription cancellation failed: ${e.message || e}`);
             throw e;
         } finally {
             this.isAccountUpdateInProcess = false;
diff --git a/src/model/api/api-store.ts b/src/model/api/api-store.ts
@@ -5,7 +5,7 @@ import * as serializr from 'serializr';
 import { findApi as findPublicOpenApi } from 'openapi-directory';
 
 import { HtkRequest } from '../../types';
-import { reportError } from '../../errors';
+import { logError } from '../../errors';
 import { lazyObservablePromise } from "../../util/observable";
 import { hydrate, persist } from "../../util/mobx-persist/persist";
 
@@ -168,7 +168,7 @@ export class ApiStore {
                 .then(buildApiMetadataAsync)
                 .catch((e) => {
                     console.log(`Failed to build API ${specId}`);
-                    reportError(e, {
+                    logError(e, {
                         apiSpecId: specId
                     });
                     throw e;
@@ -238,7 +238,7 @@ export function findBestMatchingApi(
     // could be this one request. Does exist right now (e.g. AWS RDS vs DocumentDB)
 
     // Report this so we can try to improve & avoid in future.
-    reportError('Overlapping APIs', matchingApis);
+    logError('Overlapping APIs', matchingApis);
 
     // Return our guess of the most popular service, from the matching services only
     return _.maxBy(matchingApis, a => Object.keys(a.spec.paths).length)!;
diff --git a/src/model/events/events-store.ts b/src/model/events/events-store.ts
@@ -31,7 +31,7 @@ import {
 } from '../../types';
 
 import { lazyObservablePromise } from '../../util/observable';
-import { reportError } from '../../errors';
+import { logError } from '../../errors';
 
 import { ProxyStore } from "../proxy-store";
 import { ApiStore } from '../api/api-store';
@@ -285,7 +285,7 @@ export class EventsStore {
         } catch (e) {
             // It's possible we might fail to parse an input event. This shouldn't happen, but if it
             // does it's better to drop that one event and continue instead of breaking completely.
-            reportError(e);
+            logError(e);
         }
     }
 
diff --git a/src/model/http/editable-body.ts b/src/model/http/editable-body.ts
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import { computed, observable, action, runInAction, reaction } from 'mobx';
 
 import { BreakpointBody } from '../../types';
-import { reportError } from "../../errors";
+import { logError } from "../../errors";
 import { asHeaderArray } from "../../util";
 import { observablePromise, ObservablePromise } from '../../util/observable';
 
@@ -54,7 +54,7 @@ export class EditableBody implements BreakpointBody {
 
             const encodedBody = await encodeBody(this._decodedBody, encodings)
                 .catch((e) => {
-                    reportError(e, { encodings });
+                    logError(e, { encodings });
                     return this._decodedBody; // If encoding fails, we send raw data instead
                 });
 
diff --git a/src/model/http/exchange-breakpoint.ts b/src/model/http/exchange-breakpoint.ts
@@ -14,7 +14,7 @@ import {
 } from "../../types";
 import { asHeaderArray, stringToBuffer } from "../../util";
 import { getDeferred, Deferred } from "../../util/promise";
-import { reportError } from "../../errors";
+import { logError } from "../../errors";
 
 import {
     RAW_BODY_SUPPORTED,
@@ -30,7 +30,7 @@ function getBody(message: MockttpBreakpointedRequest | MockttpBreakpointedRespon
         message.body.buffer,
         asHeaderArray(message.headers['content-encoding'])
     ).catch((e) => {
-        reportError(e);
+        logError(e);
         const error = dedent`
             HTTP TOOLKIT ERROR: Could not decode body, \
             check content-encoding
diff --git a/src/model/http/exchange.ts b/src/model/http/exchange.ts
@@ -26,7 +26,7 @@ import {
 import { UnreachableCheck } from '../../util/error';
 import { lazyObservablePromise, ObservablePromise, observablePromise } from "../../util/observable";
 
-import { reportError } from '../../errors';
+import { logError } from '../../errors';
 
 import { parseSource } from './sources';
 import { getContentType } from '../events/content-types';
@@ -145,7 +145,7 @@ export class HttpBody implements MessageBody {
             this._encoded = encoded;
             return decoded;
         } catch (e: any) {
-            reportError(e);
+            logError(e);
 
             // In most cases, we get the encoded data back regardless, so recapture it here:
             if (e.inputBuffer) {
@@ -382,7 +382,7 @@ export class HttpExchange extends HTKEventBase {
                     throw new UnreachableCheck(apiMetadata, m => m.type);
                 }
             } catch (e) {
-                reportError(e);
+                logError(e);
                 throw e;
             }
         } else {
diff --git a/src/model/network.ts b/src/model/network.ts
@@ -1,5 +1,5 @@
 import * as ipaddr from 'ipaddr.js';
-import { reportError } from '../errors';
+import { logError } from '../errors';
 
 export function isValidPort(port: number): boolean {
     return port > 0 && port <= 65535;
@@ -31,7 +31,7 @@ export function getReadableIP(ip: string) {
     try {
         parsedIp = ipaddr.parse(ip);
     } catch (e) {
-        reportError('Failed to parse IP', { ip: ip });
+        logError('Failed to parse IP', { ip: ip });
         return ip;
     }
 
diff --git a/src/model/proxy-store.ts b/src/model/proxy-store.ts
diff --git a/src/model/rules/rules-store.ts b/src/model/rules/rules-store.ts
diff --git a/src/services/update-worker.ts b/src/services/update-worker.ts
diff --git a/src/util/ui.ts b/src/util/ui.ts

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import * as React from 'react';`
`2`	`2`
`3`	`3`	`import { Icon } from "../../icons";`
`4`	`4`	`import { styled } from '../../styles';`
`5`		`-import { reportError } from '../../errors';`
	`5`	`+import { logError } from '../../errors';`
`6`	`6`
`7`	`7`	`import { clickOnEnter } from '../component-utils';`
`8`	`8`	`import { PillButton } from './pill';`
`@@ -92,6 +92,6 @@ async function copyToClipboard(content: string) {`
`92`	`92`	`await navigator.clipboard!.writeText(content);`
`93`	`93`	`} catch (e) {`
`94`	`94`	`console.log('Failed to copy to the clipboard');`
`95`		`- reportError(e);`
	`95`	`+ logError(e);`
`96`	`96`	`}`
`97`	`97`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import * as React from 'react';`
`2`	`2`	`import * as semver from 'semver';`
`3`	`3`
`4`	`4`	`import { WarningIcon } from '../../../icons';`
`5`		`-import { reportError } from '../../../errors';`
	`5`	`+import { logError } from '../../../errors';`
`6`	`6`
`7`	`7`	`import { desktopVersion, versionSatisfies, DESKTOP_HEADER_LIMIT_CONFIGURABLE } from '../../../services/service-versions';`
`8`	`8`
`@@ -110,7 +110,7 @@ export function tagsToErrorType(tags: string[]): ErrorType \| undefined {`
`110`	`110`	`tags.filter(t => t.startsWith("passthrough-error:")).length > 0 \|\|`
`111`	`111`	`tags.filter(t => t.startsWith("client-error:")).length > 0`
`112`	`112`	`) {`
`113`		- reportError(`Unrecognized error tag ${JSON.stringify(tags)}`);
	`113`	+ logError(`Unrecognized error tag ${JSON.stringify(tags)}`);
`114`	`114`	`return 'unknown';`
`115`	`115`	`}`
`116`	`116`	`}`