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

This commit is contained in:
Philipp Heckel 2022-04-29 20:51:26 -04:00
parent 5344337b43
commit 4ce619f9cb
3 changed files with 78 additions and 26 deletions

View file

@ -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) * `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)) * 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:** **Additional translations:**

View file

@ -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_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_button_copy_stack_trace": "Copy stack trace",
"error_boundary_stack_trace": "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>."
} }

View file

@ -10,13 +10,28 @@ class ErrorBoundaryImpl extends React.Component {
this.state = { this.state = {
error: false, error: false,
originalStack: null, originalStack: null,
niceStack: null niceStack: null,
unsupportedIndexedDB: false
}; };
} }
componentDidCatch(error, info) { componentDidCatch(error, info) {
console.error("[ErrorBoundary] Error caught", 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 // Immediately render original stack trace
const prettierOriginalStack = info.componentStack const prettierOriginalStack = info.componentStack
.trim() .trim()
@ -36,6 +51,13 @@ class ErrorBoundaryImpl extends React.Component {
}); });
} }
handleUnsupportedIndexedDB() {
this.setState({
error: true,
unsupportedIndexedDB: true
});
}
copyStack() { copyStack() {
let stack = ""; let stack = "";
if (this.state.niceStack) { if (this.state.niceStack) {
@ -46,8 +68,37 @@ class ErrorBoundaryImpl extends React.Component {
} }
render() { render() {
const { t } = this.props;
if (this.state.error) { if (this.state.error) {
if (this.state.unsupportedIndexedDB) {
return this.renderUnsupportedIndexedDB();
} else {
return this.renderError();
}
}
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 ( return (
<div style={{margin: '20px'}}> <div style={{margin: '20px'}}>
<h2>{t("error_boundary_title")} 😮</h2> <h2>{t("error_boundary_title")} 😮</h2>
@ -72,8 +123,6 @@ class ErrorBoundaryImpl extends React.Component {
</div> </div>
); );
} }
return this.props.children;
}
} }
const ErrorBoundary = withTranslation()(ErrorBoundaryImpl); // Adds props.t const ErrorBoundary = withTranslation()(ErrorBoundaryImpl); // Adds props.t