From 9abea28b6e60e0dd4a9b13225a7c0658f5c07e27 Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Thu, 14 Jul 2022 07:08:41 -0500 Subject: [PATCH] default error page --- .../shared/components/error/error-boundary.js | 25 +++++-- .../shared/components/error/reset-buttons.js | 4 +- sites/shared/components/error/view.js | 59 +++++++++++++++ .../components/workbench/draft/error.js | 71 ++++--------------- sites/shared/components/workbench/events.js | 8 +-- .../workbench/layout/draft/index.js | 2 +- 6 files changed, 97 insertions(+), 72 deletions(-) create mode 100644 sites/shared/components/error/view.js diff --git a/sites/shared/components/error/error-boundary.js b/sites/shared/components/error/error-boundary.js index 68bfb34efbf..e8948beb6df 100644 --- a/sites/shared/components/error/error-boundary.js +++ b/sites/shared/components/error/error-boundary.js @@ -1,5 +1,22 @@ import React from 'react'; import ResetButtons from './reset-buttons' +import {EventGroup} from 'shared/components/workbench/events' +import DefaultErrorView from './view'; + +const ErrorView = (props) => { + if (props.children) return props.children + + const inspectChildrenProps = { + type: 'error', + events: [props.error], + units: props.gist?.units + } + const inspectChildren = () + return (props.children || ( +

If you think your last action caused this error, you can:

+ + )) +} class ErrorBoundary extends React.Component { constructor(props) { @@ -26,17 +43,13 @@ class ErrorBoundary extends React.Component { render() { if (this.state.hasError) { // You can render any custom fallback UI - return (
- {this.props.errorView || (

Something went wrong.

)} - -
) - return ; + return {this.errorView} } try { return this.props.children; } catch(e) { - return this.props.errorView || (

Something went wrong.

); + return {this.errorView}; } } } diff --git a/sites/shared/components/error/reset-buttons.js b/sites/shared/components/error/reset-buttons.js index 0e04c2e91d7..714644751c6 100644 --- a/sites/shared/components/error/reset-buttons.js +++ b/sites/shared/components/error/reset-buttons.js @@ -3,8 +3,8 @@ import { useTranslation } from 'next-i18next' export default function ({resetGist, undoGist}) { const {t} = useTranslation(['app']) - return (<> + return (
- +
)} diff --git a/sites/shared/components/error/view.js b/sites/shared/components/error/view.js new file mode 100644 index 00000000000..fda20b980f9 --- /dev/null +++ b/sites/shared/components/error/view.js @@ -0,0 +1,59 @@ +import Robot from 'shared/components/robot/index.js' +import Popout from 'shared/components/popout.js' +import { useTranslation } from 'next-i18next' +import { useState } from 'react' + +const Error = ({ children, inspectChildren}) => { + + const { t } = useTranslation(['errors']) + const [share, setShare] = useState(false) + + return ( +
+ +
+
+

{t('errors:something')}

+ {children} +
+ +
+ + +

Would you like to report this problem?

+

+ You can help us make FreeSewing better by reporting this problem. +

+

If you choose to report this:

+
    +
  • + We will compile a crash report that contains everything needed to recreate this problem +
    • +
  • + We will include personal data such as your username, + email address and measurements +
    • +
  • + We will share this report and the data in it with FreeSewing's bughunters team who will investigate the problem on your behalf +
    • +
  • Your personal data will not be shared publicly
    • +
+
+ +
+

+ +

+

+ If you prefer not to share any info, or want to investigate the problem yourself, you can do so: +

+ {inspectChildren} + +
) +} + +export default Error diff --git a/sites/shared/components/workbench/draft/error.js b/sites/shared/components/workbench/draft/error.js index adad89586dc..dc79683e516 100644 --- a/sites/shared/components/workbench/draft/error.js +++ b/sites/shared/components/workbench/draft/error.js @@ -2,68 +2,21 @@ import { useState } from 'react' import Robot from 'shared/components/robot/index.js' import Popout from 'shared/components/popout.js' import { useTranslation } from 'next-i18next' +import DefaultErrorView from 'shared/components/error/view'; const Error = ({ draft, patternProps, error, updateGist }) => { + const inspectChildren = () - const { t } = useTranslation(['errors']) - const [share, setShare] = useState(false) - - return ( -
- -
-
-

{t('errors:something')}

-

Don't be alarmed, but we ran into some trouble while drafting this pattern.

-
- -
- - -

Would you like to report this problem?

-

- You can help us make FreeSewing better by reporting this problem. -

-

If you choose to report this:

-
    -
  • - We will compile a crash report that contains everything needed to recreate this problem -
    • -
  • - We will include personal data such as your username, - email address and measurements -
    • -
  • - We will share this report and the data in it with FreeSewing's bughunters team who will investigate the problem on your behalf -
    • -
  • Your personal data will not be shared publicly
    • -
-
- -
-

- -

-

- If you prefer not to share any info, or want to investigate the problem yourself, you can do so: -

-
    -
  • - Check the -
    • -
  • Check the partially rendered pattern below to see which areas are problematic
    • -
- -
- ) + return ( +

Don't be alarmed, but we ran into some trouble while drafting this pattern.

+ ) } - export default Error - diff --git a/sites/shared/components/workbench/events.js b/sites/shared/components/workbench/events.js index ea7bc37f2d9..3aa5631769d 100644 --- a/sites/shared/components/workbench/events.js +++ b/sites/shared/components/workbench/events.js @@ -1,10 +1,10 @@ import Markdown from 'react-markdown' import { formatMm } from 'shared/utils' -const Error = ({err}) => ( - - {err.toString()} - +export const Error = ({err}) => ( + 
+    {err.stack.split(/\n/g).slice(0, 5).map((l, i) => ( 0 ? ' break-all' : '')}>{l}))}
+
) // Markdown wrapper to suppress creation of P tags diff --git a/sites/shared/components/workbench/layout/draft/index.js b/sites/shared/components/workbench/layout/draft/index.js index e6df4fbb917..1a9ce90c4c3 100644 --- a/sites/shared/components/workbench/layout/draft/index.js +++ b/sites/shared/components/workbench/layout/draft/index.js @@ -36,7 +36,7 @@ const Draft = props => { for (const [pname, part] of Object.entries(patternProps.parts)) { let partLayout = newLayout.parts[pname]; // Pages part does not have its topLeft and bottomRight set by core since it's added post-draft - if (partLayout.tl) { + if (partLayout?.tl) { // set the pattern extremes topLeft.x = Math.min(topLeft.x, partLayout.tl.x) topLeft.y = Math.min(topLeft.y, partLayout.tl.y)