fix: better error handling

src/pages/data-integrity/details/CheckDetails.js

@@ -2,7 +2,7 @@ import { useConfig, useTimeZoneConversion } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Button, IconSync16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import {
     getDurationWithUnitFromDelta,
     selectedLocale,
@@ -15,14 +15,36 @@ import { Notice } from './Notice.js'
 import { useDataIntegrityDetails } from './use-data-integrity-details.js'
 
 export const CheckDetails = ({ check }) => {
-    const { startDetailsCheck, runningCheck, loading, details, currentJob } =
-        useDataIntegrityDetails(check.name)
+    // make sure detailsCheck is only started once
+    const hasStartedCheck = useRef(false)
+    const {
+        startDetailsCheck,
+        runningCheck,
+        loading,
+        details,
+        currentJob,
+        error,
+    } = useDataIntegrityDetails(check.name)
 
     useEffect(() => {
-        if (!loading && !details && !runningCheck) {
+        if (
+            !loading &&
+            !details &&
+            !runningCheck &&
+            !error &&
+            !hasStartedCheck.current
+        ) {
+            hasStartedCheck.current = true
             startDetailsCheck({ name: check.name })
         }
-    }, [loading, details, runningCheck, check.name, startDetailsCheck])
+    }, [
+        loading,
+        details,
+        runningCheck,
+        check.name,
+        error,
+        startDetailsCheck,
+    ])
 
     return (
         <div className={css.wrapper}>
@@ -41,19 +63,23 @@ export const CheckDetails = ({ check }) => {
             </div>
 
             <div className={css.detailsRunWrapper}>
-                <DetailsContent
-                    summaryCheck={check}
-                    detailsCheck={details}
-                    runningCheck={runningCheck}
-                    currentJob={currentJob}
-                />
+                {error ? (
+                    <DetailsError />
+                ) : (
+                    <DetailsContent
+                        summaryCheck={check}
+                        detailsCheck={details}
+                        runningCheck={runningCheck}
+                        currentJob={currentJob}
+                    />
+                )}
             </div>
         </div>
     )
 }
 
 CheckDetails.propTypes = {
-    check: checkProps
+    check: checkProps,
 }
 
 export const DetailsHeader = ({ name, description }) => {
@@ -65,8 +91,7 @@ export const DetailsHeader = ({ name, description }) => {
     )
 }
 
-DetailsHeader.propTypes = {
-}
+DetailsHeader.propTypes = {}
 
 const DetailsContent = ({
     detailsCheck,
@@ -112,8 +137,7 @@ const DetailsRunCompleted = ({ detailsCheck }) => {
             <header title={latestRun.getClientZonedISOString()}>
                 {i18n.t('Latest run completed {{time}}', {
                     time: formattedLatestRun,
-                    interpolation: { escapeValue: false}
-
+                    interpolation: { escapeValue: false },
                 })}
                 <StatusIcon count={detailsCheck.issues.length} />
             </header>
@@ -133,6 +157,13 @@ const DetailsRunCompleted = ({ detailsCheck }) => {
     )
 }
 
+const DetailsError = () => {
+    return (
+        <Notice status="error">
+            {i18n.t('An error occurred when running the job')}
+        </Notice>
+    )
+}
 
 const DetailsRunSuccess = () => {
     return <Notice status={'success'}>{i18n.t('Passed with 0 errors.')}</Notice>

src/pages/data-integrity/details/use-data-integrity-details.js

@@ -35,36 +35,41 @@ export const useDataIntegrityDetails = (name) => {
         cancel,
         started: isPolling,
     } = useLazyInterval(fetchDetails, 500) // low due to long-polling
-    const [runMutation, { loading: mutationLoading }] =
+    const [runMutation, { loading: mutationLoading, error: mutationError }] =
         useDataMutation(startDetailsCheckMutation, {
             variables: { name },
             onComplete: (data) => {
                 setLastJob(data.response)
-                start({ name, timeout: 5000 })
+                if(data?.response?.created) {
+                   start({ name, timeout: 5000 })
+                }
             },
         })
 
     const startDetailsCheck = useCallback(() => {
+        setLastJob(null)
         runMutation()
     }, [runMutation])
 
     const details = detailsData?.result?.[name]
+    const anyError = detailsError || mutationError
 
     useEffect(() => {
         if(!isPolling) {
             return
         }
         const ranByLastJob = details?.startTime >= lastJob?.created
-        if (detailsError || ranByLastJob || lastJob == null) {
+        if (anyError || ranByLastJob || lastJob == null) {
             cancel()
         }
-    }, [detailsError, details, lastJob, name, cancel, isPolling])
+    }, [anyError, details, lastJob, name, cancel, isPolling])
 
     return {
         startDetailsCheck,
         runningCheck: mutationLoading || isPolling,
         loading: detailsLoading,
         details: details,
         currentJob: isPolling ? lastJob : null,
+        error: anyError,
     }
 }

src/pages/data-integrity/use-data-integrity-summary.js

@@ -42,11 +42,14 @@ export const useDataIntegritySummary = () => {
     } = useDataQuery(summaryQuery)
 
     const { start, cancel, started: isPolling } = useLazyInterval(fetchSummary, 2000)
-    const [runMutation, { loading: mutationLoading }] =
+    const [runMutation, { loading: mutationLoading, error: mutationError }] =
         useDataMutation(startDataIntegrityCheckMutation, {
             onComplete: (data) => {
                 setLastJob(data.response)
-                start()
+                if(data?.response.created) {
+                    start()
+
+                }
             },
         })
 
@@ -81,11 +84,12 @@ export const useDataIntegritySummary = () => {
         })
     }, [summaryData, checks, lastJob, isPolling, mutationLoading])
 
+    const anyError = summaryError || mutationError
     useEffect(() => {
-        if (summaryError || formattedData?.every((check) => !check.loading)) {
+        if (anyError || formattedData?.every((check) => !check.loading)) {
             cancel()
         }
-    }, [summaryError, formattedData, cancel])
+    }, [anyError, formattedData, cancel])
 
     return {
         startDataIntegrityCheck,