Move from browser-request to fetch (#9345)

src/components/structures/EmbeddedPage.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import request from 'browser-request';
 import sanitizeHtml from 'sanitize-html';
 import classnames from 'classnames';
 import { logger } from "matrix-js-sdk/src/logger";
@@ -61,6 +60,37 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
         return sanitizeHtml(_t(s));
     }
 
+    private async fetchEmbed() {
+        let res: Response;
+
+        try {
+            res = await fetch(this.props.url, { method: "GET" });
+        } catch (err) {
+            if (this.unmounted) return;
+            logger.warn(`Error loading page: ${err}`);
+            this.setState({ page: _t("Couldn't load page") });
+            return;
+        }
+
+        if (this.unmounted) return;
+
+        if (!res.ok) {
+            logger.warn(`Error loading page: ${res.status}`);
+            this.setState({ page: _t("Couldn't load page") });
+            return;
+        }
+
+        let body = (await res.text()).replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1) => this.translate(g1));
+
+        if (this.props.replaceMap) {
+            Object.keys(this.props.replaceMap).forEach(key => {
+                body = body.split(key).join(this.props.replaceMap[key]);
+            });
+        }
+
+        this.setState({ page: body });
+    }
+
     public componentDidMount(): void {
         this.unmounted = false;
 
@@ -68,34 +98,10 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
             return;
         }
 
-        // we use request() to inline the page into the react component
+        // We use fetch to inline the page into the react component
         // so that it can inherit CSS and theming easily rather than mess around
         // with iframes and trying to synchronise document.stylesheets.
-
-        request(
-            { method: "GET", url: this.props.url },
-            (err, response, body) => {
-                if (this.unmounted) {
-                    return;
-                }
-
-                if (err || response.status < 200 || response.status >= 300) {
-                    logger.warn(`Error loading page: ${err}`);
-                    this.setState({ page: _t("Couldn't load page") });
-                    return;
-                }
-
-                body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1) => this.translate(g1));
-
-                if (this.props.replaceMap) {
-                    Object.keys(this.props.replaceMap).forEach(key => {
-                        body = body.split(key).join(this.props.replaceMap[key]);
-                    });
-                }
-
-                this.setState({ page: body });
-            },
-        );
+        this.fetchEmbed();
 
         this.dispatcherRef = dis.register(this.onAction);
     }

src/components/structures/TimelinePanel.tsx

@@ -1362,7 +1362,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
             if (this.unmounted) return;
 
             this.setState({ timelineLoading: false });
-            logger.error(`Error loading timeline panel at ${this.props.timelineSet.room?.roomId}/${eventId}: ${error}`);
+            logger.error(`Error loading timeline panel at ${this.props.timelineSet.room?.roomId}/${eventId}`, error);
 
             let onFinished: () => void;
 

src/components/structures/UploadBar.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import { Room } from "matrix-js-sdk/src/models/room";
 import filesize from "filesize";
-import { IAbortablePromise, IEventRelation } from 'matrix-js-sdk/src/matrix';
+import { IEventRelation } from 'matrix-js-sdk/src/matrix';
 import { Optional } from "matrix-events-sdk";
 
 import ContentMessages from '../../ContentMessages';
@@ -26,8 +26,7 @@ import { _t } from '../../languageHandler';
 import { Action } from "../../dispatcher/actions";
 import ProgressBar from "../views/elements/ProgressBar";
 import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
-import { IUpload } from "../../models/IUpload";
-import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { RoomUpload } from "../../models/RoomUpload";
 import { ActionPayload } from '../../dispatcher/payloads';
 import { UploadPayload } from "../../dispatcher/payloads/UploadPayload";
 
@@ -38,7 +37,7 @@ interface IProps {
 
 interface IState {
     currentFile?: string;
-    currentPromise?: IAbortablePromise<any>;
+    currentUpload?: RoomUpload;
     currentLoaded?: number;
     currentTotal?: number;
     countFiles: number;
@@ -55,8 +54,6 @@ function isUploadPayload(payload: ActionPayload): payload is UploadPayload {
 }
 
 export default class UploadBar extends React.PureComponent<IProps, IState> {
-    static contextType = MatrixClientContext;
-
     private dispatcherRef: Optional<string>;
     private mounted = false;
 
@@ -78,7 +75,7 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
         dis.unregister(this.dispatcherRef!);
     }
 
-    private getUploadsInRoom(): IUpload[] {
+    private getUploadsInRoom(): RoomUpload[] {
         const uploads = ContentMessages.sharedInstance().getCurrentUploads(this.props.relation);
         return uploads.filter(u => u.roomId === this.props.room.roomId);
     }
@@ -86,8 +83,8 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
     private calculateState(): IState {
         const [currentUpload, ...otherUploads] = this.getUploadsInRoom();
         return {
+            currentUpload,
             currentFile: currentUpload?.fileName,
-            currentPromise: currentUpload?.promise,
             currentLoaded: currentUpload?.loaded,
             currentTotal: currentUpload?.total,
             countFiles: otherUploads.length + 1,
@@ -103,7 +100,7 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
 
     private onCancelClick = (ev: ButtonEvent) => {
         ev.preventDefault();
-        ContentMessages.sharedInstance().cancelUpload(this.state.currentPromise!, this.context);
+        ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload!);
     };
 
     render() {

src/components/structures/auth/Login.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { ReactNode } from 'react';
-import { MatrixError } from "matrix-js-sdk/src/http-api";
+import { ConnectionError, MatrixError } from "matrix-js-sdk/src/http-api";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -453,7 +453,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         let errorText: ReactNode = _t("There was a problem communicating with the homeserver, " +
             "please try again later.") + (errCode ? " (" + errCode + ")" : "");
 
-        if (err["cors"] === 'rejected') { // browser-request specific error field
+        if (err instanceof ConnectionError) {
             if (window.location.protocol === 'https:' &&
                 (this.props.serverConfig.hsUrl.startsWith("http:") ||
                  !this.props.serverConfig.hsUrl.startsWith("http"))