fix: validator page validation vs ledger_closed race condition (#917)

The validator page is stuck when retrieving info on a validator that has
validated a ledger which doesn't have a state of validated or cannot be
found, resulting in a "Something bad happened" page

Fixes #684

Solution:
Add error catching and log the error, return response anyway without
last updated time and ledger index

src/containers/Validators/index.tsx

@@ -24,6 +24,9 @@ import NetworkContext from '../shared/NetworkContext'
 import { VALIDATOR_ROUTE } from '../App/routes'
 import { buildPath, useRouteParams } from '../shared/routing'
 import { VotingTab } from './VotingTab'
+import logger from '../../rippled/lib/logger'
+
+const log = logger({ name: 'validator' })
 
 const ERROR_MESSAGES = {
   [NOT_FOUND]: {
@@ -96,13 +99,17 @@ export const Validator = () => {
       .then((resp) => resp.data)
       .then((response) => {
         if (response.ledger_hash == null) {
-          return getLedger(response.current_index, rippledSocket).then(
-            (ledgerData) => ({
+          return getLedger(response.current_index, rippledSocket)
+            .then((ledgerData) => ({
               ...response,
               ledger_hash: ledgerData.ledger_hash,
               last_ledger_time: ledgerData.close_time,
-            }),
-          )
+            }))
+            .catch((ledgerError) => {
+              // Log the error and return response without ledger data
+              log.error(`Error fetching ledger data: ${ledgerError.message}`)
+              return response
+            })
         }
         return response
       })

src/containers/Validators/test/Validator.test.js

@@ -159,4 +159,41 @@ describe('Validator container', () => {
     expect(wrapper.find('.no-match').length).toBe(1)
     wrapper.unmount()
   })
+
+  it('displays all details except last ledger date/time on ledger 404 error', async () => {
+    moxios.stubRequest(
+      `${process.env.VITE_DATA_URL}/validator/${MOCK_IDENTIFIER}`,
+      {
+        status: 200,
+        response: {
+          master_key: 'foo',
+          domain: 'test.example.com',
+          current_index: '12345',
+        },
+      },
+    )
+
+    const notFoundError = new Error('Ledger not found')
+    notFoundError.response = { status: 404 }
+
+    const wrapper = createWrapper({
+      getLedgerImpl: () => Promise.reject(notFoundError),
+    })
+
+    await flushPromises()
+    await flushPromises()
+
+    wrapper.update()
+
+    expect(getLedger).toBeCalledWith('12345', undefined)
+    expect(document.title).toBe('Validator test.example.com')
+    // test ledger-time isn't updated
+    const lastLedgerDateTime = wrapper.find(`[data-test="ledger-time"]`)
+    expect(lastLedgerDateTime).not.toExist()
+    // test ledger-index stays the same
+    const lastLedgerIndex = wrapper.find(`[data-test="ledger-index"]`)
+    expect(lastLedgerIndex).toExist()
+    expect(lastLedgerIndex.find('.value')).toHaveText('12345')
+    wrapper.unmount()
+  })
 })