Merge pull request #6 from d3i-infra/error-screen

error page is now back, pyodide errors are caught and shown to the user

src/framework/processing/py_worker.js

@@ -29,13 +29,21 @@ onmessage = (event) => {
 function runCycle(payload) {
   console.log('[ProcessingWorker] runCycle ' + JSON.stringify(payload))
   scriptEvent = pyScript.send(payload)
-  self.postMessage({
-    eventType: 'runCycleDone',
-    scriptEvent: scriptEvent.toJs({
-      create_proxies: false,
-      dict_converter: Object.fromEntries
+  try {
+    scriptEvent = pyScript.send(payload)
+    self.postMessage({
+      eventType: 'runCycleDone',
+      scriptEvent: scriptEvent.toJs({
+        create_proxies: false,
+        dict_converter: Object.fromEntries
+      })
     })
-  })
+  } catch (error) {
+    self.postMessage({
+      eventType: 'runCycleDone',
+      scriptEvent: generateErrorMessage(error.toString())
+    })
+  }
 }
 
 function unwrap(response) {
@@ -103,4 +111,14 @@ function installPortPackage() {
     await micropip.install("../../port-0.0.0-py3-none-any.whl", deps=False)
     import port
   `);  
-}
+}
+
+function generateErrorMessage(stacktrace) {
+  return {
+    __type__: "CommandUIRender",
+    page: {
+      __type__: "PropsUIPageError",
+      stacktrace: stacktrace
+    }
+  }
+}

src/framework/types/pages.ts

@@ -11,12 +11,14 @@ import {
 export type PropsUIPage =
   PropsUIPageSplashScreen |
   PropsUIPageDonation |
-  PropsUIPageEnd
+  PropsUIPageEnd |
+  PropsUIPageError
 
 export function isPropsUIPage (arg: any): arg is PropsUIPage {
   return (
     isPropsUIPageDonation(arg) ||
-    isPropsUIPageEnd(arg)
+    isPropsUIPageEnd(arg) ||
+    isPropsUIPageError(arg)
   )
 }
 
@@ -40,3 +42,11 @@ export interface PropsUIPageEnd {
 export function isPropsUIPageEnd (arg: any): arg is PropsUIPageEnd {
   return isInstanceOf<PropsUIPageEnd>(arg, 'PropsUIPageEnd', [])
 }
+
+export interface PropsUIPageError {
+  __type__: 'PropsUIPageError'
+  stacktrace: string
+}
+export function isPropsUIPageError (arg: any): arg is PropsUIPageError {
+  return isInstanceOf<PropsUIPageError>(arg, 'PropsUIPageError', ['stacktrace'])
+}

src/framework/visualisation/react/factory.tsx

@@ -1,8 +1,14 @@
 
 import { EndPage } from './ui/pages/end_page'
-import { isPropsUIPageEnd, isPropsUIPageDonation, PropsUIPage } from '../../types/pages'
+import { 
+  isPropsUIPageEnd,
+  isPropsUIPageDonation,
+  isPropsUIPageError,
+  PropsUIPage
+} from '../../types/pages'
 import { DonationPage } from './ui/pages/donation_page'
 import { Payload } from '../../types/commands'
+import { ErrorPage } from './ui/pages/error_page'
 
 export interface ReactFactoryContext {
   locale: string
@@ -17,6 +23,9 @@ export default class ReactFactory {
     if (isPropsUIPageDonation(page)) {
       return <DonationPage {...page} {...context} />
     }
+    if (isPropsUIPageError(page)) {
+      return <ErrorPage {...page} {...context} />
+    }
     throw TypeError('Unknown page: ' + JSON.stringify(page))
   }
 }

src/framework/visualisation/react/ui/pages/error_page.tsx

@@ -0,0 +1,51 @@
+import { Weak } from '../../../../helpers'
+import { PropsUIPageError } from '../../../../types/pages'
+import { ReactFactoryContext } from '../../factory'
+import { Page } from './templates/page'
+import TextBundle from '../../../../text_bundle'
+import { Translator } from '../../../../translator'
+import { BodyLarge, Title1 } from '../elements/text'
+
+type Props = Weak<PropsUIPageError> & ReactFactoryContext
+
+export const ErrorPage = (props: Props): JSX.Element => {
+  // render to top of the page on reload
+  window.scrollTo(0, 0)
+
+  const { stacktrace } = props
+  const { title, text } = prepareCopy(props)
+
+  const body: JSX.Element = (
+    <>
+      <Title1 text={title} />
+      <BodyLarge text={text} />
+      <BodyLarge text={stacktrace} />
+    </>
+  )
+
+  return (
+    <Page
+      body={body}
+    />
+  )
+}
+
+interface Copy {
+  title: string
+  text: string
+}
+
+function prepareCopy ({ locale }: Props): Copy {
+  return {
+    title: Translator.translate(title, locale),
+    text: Translator.translate(text, locale)
+  }
+}
+
+const title = new TextBundle()
+  .add('en', 'Error, not your fault!')
+  .add('nl', 'Foutje, niet jouw schuld!')
+
+const text = new TextBundle()
+  .add('en', 'Consult the researcher, or close the page')
+  .add('nl', 'Raadpleeg de onderzoeker of sluit de pagina')