feat: show backend error message

fixes #97
spraakbanken · Jan 15, 2025 · 76d78a4 · 76d78a4
1 parent 2561ef5
commit 76d78a4
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Added
 
 - Sidebar: Collapse and expand attribute sections [#199](https://github.com/spraakbanken/korp-frontend/issues/199)
+- Error messages from backend show up in the GUI [#97](https://github.com/spraakbanken/korp-frontend/issues/97)
 
 ### Changed
 

diff --git a/app/scripts/components/korp-error.ts b/app/scripts/components/korp-error.ts
@@ -5,9 +5,18 @@ import korpFailImg from "../../img/korp_fail.svg"
 
 angular.module("korpApp").component("korpError", {
     template: html`
-        <div>
-            <img class="korp_fail" src="${korpFailImg}" alt="{{'fail_alt' | loc:$root.lang}}" />
-            <div class="fail_text inline-block">{{'fail_text' | loc:$root.lang}}</div>
+        <div class="mx-auto flex flex-wrap items-center justify-center gap-8">
+            <img src="${korpFailImg}" alt="{{'fail_alt' | loc:$root.lang}}" />
+            <div class="max-w-screen-sm text-lg flex flex-col gap-2">
+                <div>{{'fail_text' | loc:$root.lang}}</div>
+                <pre ng-if="$ctrl.message" class="bg-zinc-100 p-2 px-4 text-base whitespace-pre-wrap">
+{{$ctrl.message}}</pre
+                >
+                <div>{{'fail_contact' | loc:$root.lang}}</div>
+            </div>
         </div>
     `,
+    bindings: {
+        message: "@",
+    },
 })
diff --git a/app/scripts/components/results.ts b/app/scripts/components/results.ts
@@ -45,7 +45,7 @@ angular.module("korpApp").component("results", {
                             ></tab-preloader>
                         </uib-tab-heading>
                         <div class="results-kwic" ng-class="{reading_mode : reading_mode, loading: loading}">
-                            <korp-error ng-if="error"></korp-error>
+                            <korp-error ng-if="error" message="{{error}}"></korp-error>
                             <kwic
                                 ng-if="!error"
                                 aborted="aborted"
@@ -76,7 +76,7 @@ angular.module("korpApp").component("results", {
                                 progress="countCorpora() > 1 ? progress : undefined"
                             ></tab-preloader>
                         </uib-tab-heading>
-                        <korp-error ng-if="error"></korp-error>
+                        <korp-error ng-if="error" message="{{error}}"></korp-error>
                         <statistics
                             aborted="aborted"
                             activate="activate"
@@ -119,7 +119,7 @@ angular.module("korpApp").component("results", {
                                 no-hits="noHits"
                             ></word-picture>
                         </div>
-                        <korp-error ng-if="error"></korp-error>
+                        <korp-error ng-if="error" message="{{error}}"></korp-error>
                         <json-button
                             ng-if="wordPic && hasData"
                             endpoint="'relations'"
@@ -133,7 +133,7 @@ angular.module("korpApp").component("results", {
                             <tab-preloader ng-if="loading"></tab-preloader>
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
-                        <korp-error ng-if="error"></korp-error>
+                        <korp-error ng-if="error" message="{{error}}"></korp-error>
                         <div
                             class="results-kwic"
                             ng-if="!error"
@@ -179,7 +179,7 @@ angular.module("korpApp").component("results", {
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
                         <div class="compare_result" ng-class="{loading : loading}">
-                            <korp-error ng-if="error"></korp-error>
+                            <korp-error ng-if="error" message="{{error}}"></korp-error>
                             <div class="column column_1" ng-if="!error">
                                 <h2>{{'compare_distinctive' | loc:$root.lang}} <em>{{cmp1.label}}</em></h2>
                                 <ul class="negative">
@@ -222,7 +222,7 @@ angular.module("korpApp").component("results", {
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
                         <div class="map_result" ng-class="{loading : loading}">
-                            <korp-error ng-if="error"></korp-error>
+                            <korp-error ng-if="error" message="{{error}}"></korp-error>
                             <div ng-if="!loading && numResults != 0">
                                 <div class="rickshaw_legend" id="mapHeader">
                                     <div
@@ -275,7 +275,7 @@ angular.module("korpApp").component("results", {
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
                         <div>
-                            <korp-error ng-if="error"></korp-error>
+                            <korp-error ng-if="error" message="{{error}}"></korp-error>
                             <div ng-if="!loading" text-reader="text-reader"></div>
                         </div>
                     </uib-tab>

diff --git a/app/scripts/components/trend-diagram.ts b/app/scripts/components/trend-diagram.ts
@@ -27,7 +27,7 @@ type TrendDiagramController = IController & {
     proxy: GraphProxy
     $result: JQLite
     mode: "line" | "bar" | "table"
-    error: boolean
+    error?: string
 }
 
 type Series = {
@@ -75,7 +75,7 @@ const PALETTE = [
 
 angular.module("korpApp").component("trendDiagram", {
     template: html`
-        <korp-error ng-show="$ctrl.error"></korp-error>
+        <korp-error ng-if="$ctrl.error" message="{{$ctrl.error}}"></korp-error>
         <div class="graph_tab" ng-show="!$ctrl.error">
             <div class="graph_header">
                 <div class="controls">
@@ -142,7 +142,6 @@ angular.module("korpApp").component("trendDiagram", {
             $ctrl.proxy = graphProxyFactory.create()
             $ctrl.$result = $element.find(".graph_tab")
             $ctrl.mode = "line"
-            $ctrl.error = false
 
             $ctrl.$onInit = () => {
                 const interval = $ctrl.data.corpusListing.getMomentInterval()
@@ -566,7 +565,7 @@ angular.module("korpApp").component("trendDiagram", {
 
             function renderGraph(
                 Rickshaw: any,
-                data: Response<CountTimeResponse>,
+                data: CountTimeResponse,
                 cqp: string,
                 currentZoom: Level,
                 showTotal?: boolean
@@ -578,11 +577,6 @@ angular.module("korpApp").component("trendDiagram", {
                     $(window).trigger("resize")
                 }
 
-                if ("ERROR" in data) {
-                    $ctrl.error = true
-                    return
-                }
-
                 if ($ctrl.graph) {
                     series = makeSeries(Rickshaw, data, cqp, currentZoom)
                     spliceData(series)
@@ -785,7 +779,7 @@ angular.module("korpApp").component("trendDiagram", {
             ) {
                 const rickshawPromise = import(/* webpackChunkName: "rickshaw" */ "rickshaw")
                 $ctrl.localUpdateLoading(true)
-                $ctrl.error = false
+                $ctrl.error = undefined
                 const currentZoom = $ctrl.zoom
                 const reqPromise = $ctrl.proxy.makeRequest(
                     cqp,
@@ -799,11 +793,11 @@ angular.module("korpApp").component("trendDiagram", {
                 try {
                     const [Rickshaw, graphData] = await Promise.all([rickshawPromise, reqPromise])
                     $timeout(() => renderGraph(Rickshaw, graphData, cqp, currentZoom, showTotal))
-                } catch (e) {
+                } catch (error) {
                     $timeout(() => {
-                        console.error("graph crash", e)
+                        console.error(error)
+                        $ctrl.error = error
                         $ctrl.localUpdateLoading(false)
-                        $ctrl.error = true
                     })
                 }
             }

diff --git a/app/scripts/controllers/comparison_controller.ts b/app/scripts/controllers/comparison_controller.ts
@@ -13,7 +13,7 @@ type CompareCtrlScope = TabHashScope & {
     closeTab: (index: number, e: Event) => void
     cmp1: SavedSearch
     cmp2: SavedSearch
-    error: boolean
+    error?: string
     loading: boolean
     max: number
     promise: CompareTab
@@ -160,9 +160,10 @@ angular.module("korpApp").directive("compareCtrl", () => ({
                         return $rootScope.kwicTabs.push({ queryParams: opts })
                     }
                 },
-                function () {
+                function (error) {
                     s.loading = false
-                    s.error = true
+                    s.error = error
+                    s.$digest()
                 }
             )
         },

diff --git a/app/scripts/controllers/example_controller.ts b/app/scripts/controllers/example_controller.ts
@@ -46,7 +46,7 @@ class ExampleCtrl extends KwicCtrl {
         s.hits = undefined
         s.hitsInProgress = undefined
         s.page = 0
-        s.error = false
+        s.error = undefined
         s.hitsPictureData = null
         s.kwic = undefined
         s.corpusHits = undefined
@@ -136,7 +136,7 @@ class ExampleCtrl extends KwicCtrl {
                     if (error.name == "AbortError") return
                     console.error(error)
                     // TODO Show error
-                    $timeout(() => (s.error = true))
+                    $timeout(() => (s.error = error))
                 })
                 .finally(() => $timeout(() => (s.loading = false)))
         }

diff --git a/app/scripts/controllers/kwic_controller.ts b/app/scripts/controllers/kwic_controller.ts
@@ -21,7 +21,7 @@ export type KwicCtrlScope = TabHashScope & {
     countCorpora?: () => number | null
     corpusOrder?: string[]
     cqp?: string
-    error?: boolean
+    error?: string
     getProxy: () => KwicProxy
     /** Number of total search hits, updated when a search is completed. */
     hits?: number
@@ -200,7 +200,7 @@ export class KwicCtrl implements IController {
             s.progress = 0
             s.loading = true
             s.aborted = false
-            s.error = false
+            s.error = undefined
 
             const ajaxParams = s.buildQueryOptions(isPaging)
 
@@ -222,7 +222,7 @@ export class KwicCtrl implements IController {
                     console.error(error)
                     // TODO Show error
                     $timeout(() => {
-                        s.error = true
+                        s.error = error
                         s.loading = false
                     })
                 })

diff --git a/app/scripts/controllers/map_controller.ts b/app/scripts/controllers/map_controller.ts
@@ -12,7 +12,7 @@ import { TabHashScope } from "@/directives/tab-hash"
 
 type MapControllerScope = TabHashScope & {
     center: AppSettings["map_center"]
-    error: boolean
+    error?: string
     selectedGroups: string[]
     markerGroups?: Record<string, MarkerGroup>
     loading: boolean
@@ -81,11 +81,11 @@ angular.module("korpApp").directive("mapCtrl", [
                             $scope.selectedGroups = _.keys($scope.markerGroups)
                         })
                     },
-                    (err) => {
-                        console.error("Map data parsing failed:", err)
+                    (error) => {
+                        console.error("Map data parsing failed:", error)
                         $scope.$apply(($scope: MapControllerScope) => {
                             $scope.loading = false
-                            $scope.error = true
+                            $scope.error = error
                         })
                     }
                 )

diff --git a/app/scripts/controllers/statistics_controller.ts b/app/scripts/controllers/statistics_controller.ts
@@ -18,7 +18,7 @@ type StatsResultCtrlScope = TabHashScope & {
     columns: SlickgridColumn[]
     countCorpora: () => number | null
     data: Dataset
-    error: boolean
+    error?: string
     hasResult: boolean
     inOrder: boolean
     loading: boolean
@@ -52,7 +52,6 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({
         ) => {
             const s = $scope
             s.loading = false
-            s.error = false
             s.progress = 0
 
             s.proxy = statsProxyFactory.create()
@@ -91,7 +90,7 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({
             s.onProgress = (progressObj) => (s.progress = Math.round(progressObj["percent"]))
 
             s.makeRequest = (cqp) => {
-                s.error = false
+                s.error = undefined
                 const grid = document.getElementById("myGrid")
                 if (!grid) throw new Error("myGrid element not found")
                 grid.innerHTML = ""
@@ -130,7 +129,7 @@ angular.module("korpApp").directive("statsResultCtrl", () => ({
                         // TODO Show error
                         $timeout(() => {
                             s.resetView()
-                            s.error = true
+                            s.error = error
                             s.loading = false
                         })
                     })

diff --git a/app/scripts/controllers/word_picture_controller.ts b/app/scripts/controllers/word_picture_controller.ts
@@ -6,7 +6,7 @@ import lemgramProxyFactory, { LemgramProxy } from "@/backend/lemgram-proxy"
 import { isLemgram, lemgramToString, unregescape } from "@/util"
 import { RootScope } from "@/root-scope.types"
 import { LocationService } from "@/urlparams"
-import { ProgressReport, Response } from "@/backend/types"
+import { ProgressReport } from "@/backend/types"
 import { WordPictureDefItem } from "@/settings/app-settings.types"
 import { TabHashScope } from "@/directives/tab-hash"
 import { ApiRelation, RelationsResponse } from "@/backend/types/relations"
@@ -18,7 +18,7 @@ type WordpicCtrlScope = TabHashScope & {
     countCorpora: () => number | null
     data?: TableDrawData[]
     drawTables: (tables: [string, string][], data: ApiRelation[]) => void
-    error: boolean
+    error?: string
     hasData: boolean
     hitSettings: `${number}`[]
     loading: boolean
@@ -67,7 +67,6 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({
             const s = $scope
             s.proxy = lemgramProxyFactory.create()
 
-            s.error = false
             s.loading = false
             s.progress = 0
             s.wordPic = $location.search().word_pic != null
@@ -99,7 +98,7 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({
                 s.data = undefined
                 s.aborted = false
                 s.noHits = false
-                s.error = false
+                s.error = undefined
             }
 
             s.onProgress = (progressObj) => (s.progress = Math.round(progressObj["percent"]))
@@ -138,7 +137,7 @@ angular.module("korpApp").directive("wordpicCtrl", () => ({
                         console.error(error)
                         // TODO Show error
                         $timeout(() => {
-                            s.error = true
+                            s.error = error
                             s.loading = false
                         })
                     })

diff --git a/app/styles/styles.scss b/app/styles/styles.scss
@@ -1045,18 +1045,6 @@ a {
   z-index: 999;
 }
 
-.korp_fail {
-  height: 146px;
-  width: 290px;
-}
-
-.fail_text {
-  margin: 1em 0 0 1em;
-  vertical-align: top;
-  font-family: Garamond,Cochin,Serif;
-  font-size: 1.3em;
-}
-
 .arg_selects.word {
   color: #222222;
 }

diff --git a/app/translations/locale-eng.json b/app/translations/locale-eng.json
@@ -49,6 +49,7 @@
     "warning_body": "The dependency relations illustrated herein are the result of automated parsing.",
     "fail_text": "An error has occurred.",
     "fail_alt": "Silhouette of a knocked-out raven",
+    "fail_contact": "If you have questions, or you want to report a bug, please contact [email protected].",
     "corpus": "Corpus",
     "search_for": "Search for ",
     "show_more": "Show more",

diff --git a/app/translations/locale-swe.json b/app/translations/locale-swe.json
@@ -47,8 +47,9 @@
     "about_contributors": "Med bidrag från",
     "warning_header": "Vänligen uppmärksamma",
     "warning_body": "Relationerna mellan orden är ett resultat av automatisk parsning. ",
-    "fail_text": "Ett fel har uppstått. ",
+    "fail_text": "Ett fel har uppstått.",
     "fail_alt": "Silhuett av en kollapsad korp",
+    "fail_contact": "Om du har frågor eller vill rapportera en bugg, kontakta gärna [email protected].",
     "corpus": "Korpus",
     "search_for": "Sök efter ",
     "show_more": "Visa fler",