Error handling

Use try/catch blocks to handle errors that could occur during runtime. Render an error snackbar to the user with a descriptive error message when an error occurs.

try {
  await savePatientData(patient);
  showSnackbar({ title: t('patientSaved', 'Patient data saved successfully') });
} catch (error) {
  showSnackbar({
    title: t('errorSavingPatient', 'Error saving patient'),
    kind: 'error',
    description: error?.message ?? t('unknownError', 'An unknown error occurred'),
  });
}

Don't check the response status of a request to determine whether to show a success snackbar. Instead, always show a success snackbar after a request is successful. openmrsFetch will throw an error if the request fails, so you don't need to check the response status to determine whether to show a success or error snackbar.

// Don't do this
saveVisit(visitPayload).then((response) => {
  if (response.status === 201) {
    // Handle the success case
  } else {
    // Handle the error case
  }
});

// Instead, do this:
saveVisit(visitPayload).then(() => {
  // Handle the success case
}).catch((error) => {
  // Handle the error case
});

Alternatively, you can use async/await syntax to handle the success and error cases:

try {
  await saveVisit(visitPayload);
  // Handle the success case
} catch (error) {
  // Handle the error case
}

When handling errors in async functions, prefer async/await over promise chains for better readability and error handling clarity. For example:

// Avoid promise chains
savePatientData(patient)
  .then((response) => {
    showSnackbar({ kind: 'success', title: t('patientSaved', 'Patient data saved successfully') });
    return response;
  })
  .then(processPatientData)
  .catch((error) => {
    showSnackbar({
      title: t('errorSavingPatient', 'Error saving patient'),
      kind: 'error',
      description: error?.message
    });
  });
 
// Prefer async/await
async function handleSavePatient(patient) {
  try {
    await savePatientData(patient);
    showSnackbar({ kind: 'success', title: t('patientSaved', 'Patient data saved successfully') });
  } catch (error) {
    showSnackbar({
      title: t('errorSavingPatient', 'Error saving patient'),
      kind: 'error',
      description: error?.message
    });
  }
}

The async/await approach:

Makes the code flow more readable and sequential.
Simplifies error handling with a single try/catch block.
Makes it easier to debug since stack traces are more meaningful.
Allows easier handling of multiple async operations.

Use a finally block to execute cleanup code that should run regardless of whether the operation succeeded or failed:

async function handleSavePatient(patient) {
  try {
    // ...
  } catch (error) {
    // Handle the error case
  } finally {
    // Do any additional cleanup work
    closeModal();
  }
}

Internationalization Testing