Add error message specifically for private browsing mode, closes #208

docs/releases.md

@@ -30,6 +30,7 @@ to [@Joeharrison94](https://github.com/Joeharrison94) for the input.
 
 * `Upgrade` header check is now case in-sensitive ([#228](https://github.com/binwiederhier/ntfy/issues/228), thanks to [@wunter8](https://github.com/wunter8) for finding it)
 * Made web app sounds quieter ([#222](https://github.com/binwiederhier/ntfy/issues/222))
+* Add "private browsing"-specific error message for Firefox/Safari ([#208](https://github.com/binwiederhier/ntfy/issues/208), thanks to [@julianfoad](https://github.com/julianfoad) for reporting) 
 
 **Additional translations:**
 

web/public/static/langs/en.json

@@ -152,5 +152,7 @@
   "error_boundary_description": "This should obviously not happen. Very sorry about this.<br/>If you have a minute, please <githubLink>report this on GitHub</githubLink>, or let us know via <discordLink>Discord</discordLink> or <matrixLink>Matrix</matrixLink>.",
   "error_boundary_button_copy_stack_trace": "Copy stack trace",
   "error_boundary_stack_trace": "Stack trace",
-  "error_boundary_gathering_info": "Gather more info …"
+  "error_boundary_gathering_info": "Gather more info …",
+  "error_boundary_unsupported_indexeddb_title": "Private browsing not supported",
+  "error_boundary_unsupported_indexeddb_description": "The ntfy web app needs IndexedDB to function, and your browser does not support IndexedDB in private browsing mode.<br/><br/>While this is unfortunate, it also doesn't really make a lot of sense to use the ntfy web app in private browsing mode anyway, because everything is stored in the browser storage. You can read more about it <githubLink>in this GitHub issue</githubLink>, or talk to us on <discordLink>Discord</discordLink> or <matrixLink>Matrix</matrixLink>."
 }

web/src/components/ErrorBoundary.js

@@ -10,13 +10,28 @@ class ErrorBoundaryImpl extends React.Component {
         this.state = {
             error: false,
             originalStack: null,
-            niceStack: null
+            niceStack: null,
+            unsupportedIndexedDB: false
         };
     }
 
     componentDidCatch(error, info) {
         console.error("[ErrorBoundary] Error caught", error, info);
 
+        // Special case for unsupported IndexedDB in Private Browsing mode (Firefox, Safari), see
+        // - https://github.com/dexie/Dexie.js/issues/312
+        // - https://bugzilla.mozilla.org/show_bug.cgi?id=781982
+        const isUnsupportedIndexedDB = error?.name === "InvalidStateError" ||
+            (error?.name === "DatabaseClosedError" && error?.message?.indexOf("InvalidStateError") !== -1);
+
+        if (isUnsupportedIndexedDB) {
+            this.handleUnsupportedIndexedDB();
+        } else {
+            this.handleError(error, info);
+        }
+    }
+
+    handleError(error, info) {
         // Immediately render original stack trace
         const prettierOriginalStack = info.componentStack
             .trim()
@@ -36,6 +51,13 @@ class ErrorBoundaryImpl extends React.Component {
         });
     }
 
+    handleUnsupportedIndexedDB() {
+        this.setState({
+            error: true,
+            unsupportedIndexedDB: true
+        });
+    }
+
     copyStack() {
         let stack = "";
         if (this.state.niceStack) {
@@ -46,34 +68,61 @@ class ErrorBoundaryImpl extends React.Component {
     }
 
     render() {
-        const { t } = this.props;
         if (this.state.error) {
-            return (
+            if (this.state.unsupportedIndexedDB) {
-                <div style={{margin: '20px'}}>
+                return this.renderUnsupportedIndexedDB();
-                    <h2>{t("error_boundary_title")} 😮</h2>
+            } else {
-                    <p>
+                return this.renderError();
-                        <Trans
+            }
-                            i18nKey="error_boundary_description"
-                            components={{
-                                githubLink: <Link href="https://github.com/binwiederhier/ntfy/issues"/>,
-                                discordLink: <Link href="https://discord.gg/cT7ECsZj9w"/>,
-                                matrixLink: <Link href="https://matrix.to/#/#ntfy:matrix.org"/>
-                            }}
-                        />
-                    </p>
-                    <p>
-                        <Button variant="outlined" onClick={() => this.copyStack()}>{t("error_boundary_button_copy_stack_trace")}</Button>
-                    </p>
-                    <h3>{t("error_boundary_stack_trace")}</h3>
-                    {this.state.niceStack
-                        ? <pre>{this.state.niceStack}</pre>
-                        : <><CircularProgress size="20px" sx={{verticalAlign: "text-bottom"}}/> {t("error_boundary_gathering_info")}</>}
-                    <pre>{this.state.originalStack}</pre>
-                </div>
-            );
         }
         return this.props.children;
     }
+
+    renderUnsupportedIndexedDB() {
+        const { t } = this.props;
+        return (
+            <div style={{margin: '20px'}}>
+                <h2>{t("error_boundary_unsupported_indexeddb_title")} 😮</h2>
+                <p style={{maxWidth: "600px"}}>
+                    <Trans
+                        i18nKey="error_boundary_unsupported_indexeddb_description"
+                        components={{
+                            githubLink: <Link href="https://github.com/binwiederhier/ntfy/issues/208"/>,
+                            discordLink: <Link href="https://discord.gg/cT7ECsZj9w"/>,
+                            matrixLink: <Link href="https://matrix.to/#/#ntfy:matrix.org"/>
+                        }}
+                    />
+                </p>
+            </div>
+        );
+    }
+
+    renderError() {
+        const { t } = this.props;
+        return (
+            <div style={{margin: '20px'}}>
+                <h2>{t("error_boundary_title")} 😮</h2>
+                <p>
+                    <Trans
+                        i18nKey="error_boundary_description"
+                        components={{
+                            githubLink: <Link href="https://github.com/binwiederhier/ntfy/issues"/>,
+                            discordLink: <Link href="https://discord.gg/cT7ECsZj9w"/>,
+                            matrixLink: <Link href="https://matrix.to/#/#ntfy:matrix.org"/>
+                        }}
+                    />
+                </p>
+                <p>
+                    <Button variant="outlined" onClick={() => this.copyStack()}>{t("error_boundary_button_copy_stack_trace")}</Button>
+                </p>
+                <h3>{t("error_boundary_stack_trace")}</h3>
+                {this.state.niceStack
+                    ? <pre>{this.state.niceStack}</pre>
+                    : <><CircularProgress size="20px" sx={{verticalAlign: "text-bottom"}}/> {t("error_boundary_gathering_info")}</>}
+                <pre>{this.state.originalStack}</pre>
+            </div>
+        );
+    }
 }
 
 const ErrorBoundary = withTranslation()(ErrorBoundaryImpl); // Adds props.t