Handle proposal finalize timeout by confirming completion

[osiastedian]

User description

Summary

• add a helper that reuses getOneProposal to confirm whether a proposal completed even if the finalize call times out
• surface a warning success path when completion is detected so users are redirected instead of seeing a generic error

Testing

• CI=true npm test -- --watch=false

---

https://chatgpt.com/codex/tasks/task_e_68d29edc1e188320a5c3c44f893cb875

---

PR Type

Enhancement, Bug fix

---

Description

• Improved error handling in API requests.

• Added proposal completion confirmation.

• Enhanced user experience with warnings.

• Improved logging of Axios errors.

---

Diagram Walkthrough

flowchart LR
  A[API Request] --> B{Success};
  A --> C[Error Handling];
  C --> D[Log Axios Error];
  C --> E[User Feedback];
  F[Proposal Completion Confirmation] --> G{Success/Failure};

Loading

File Walkthrough

	Relevant files
Error handling	errorHandler.js Added Axios Error Handling Utilities                                          src/utils/errorHandler.js Added functions to normalize, get details, message, and footer of Axios errors. Created a function to log Axios errors with context. Exported all functions for external use. +102/-0
Bug fix	request.js Improved API Request Error Handling and Added Proposal Completion Check src/utils/request.js Updated API client to use the new error logging function. Improved error handling in various API calls. Added a new function to confirm proposal completion. +12/-11
Enhancement	ProposalForm.jsx Enhanced Proposal Form with Improved Error Handling and Completion Check src/components/proposal/ProposalForm.jsx Integrated new error handling and logging functions. Added functionality to confirm proposal completion after timeout. Improved user feedback during proposal creation. Enhanced error handling in enterPaymentTxId and enterProposalHash functions. +124/-25

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The enterPaymentTxId and enterProposalHash functions now catch errors and log them using logAxiosError. However, the error handling could be improved by providing more specific error messages to the user, potentially differentiating between network errors, API errors, and validation errors. Consider adding more robust error handling and user feedback mechanisms. const enterPaymentTxId = async (data) => { swal.fire({ title: 'Creating submit command', showConfirmButton: false, willOpen: () => { swal.showLoading(); } }); const { paymentTxId } = data; let prepareObjectProposal; try { const updateResponse = await updateProposal(proposalUid, { txId: paymentTxId }); prepareObjectProposal = updateResponse?.data?.proposal?.prepareObjectProposal; if (!prepareObjectProposal) { throw new Error('The prepare payload is missing from the update response.'); } const submitResponse = await submitProposal(proposalUid, { ...prepareObjectProposal, txId: paymentTxId }); const commandSubmit = submitResponse?.data?.commandSubmit; if (!commandSubmit) { throw new Error('Submit command was not returned by the API.'); } setSubmitCommand(commandSubmit); await swal.fire({ icon: 'success', title: 'Submit command created', timer: 2000, showConfirmButton: false }); setUseCollapse(true); setCollapse(false); } catch (error) { logAxiosError('ProposalForm::enterPaymentTxId', error, { proposalUid, paymentTxId, hasPreparePayload: Boolean(prepareObjectProposal) }); const errorMessage = getAxiosErrorMessage(error, 'Unable to create submit command.'); const footer = getAxiosErrorFooter(error); await swal.fire({ icon: 'error', title: 'There was an error', text: errorMessage, footer }); } } const confirmProposalCompletion = async (proposalId, expectedHash) => { if (!proposalId) { return { isCompleted: false }; } try { const response = await getOneProposal(proposalId); const savedProposal = response?.data?.proposal; if (!savedProposal) { return { isCompleted: false }; } const normalizedExpectedHash = typeof expectedHash === 'string' ? expectedHash.trim().toLowerCase() : ''; const candidateHashes = [ savedProposal.hash, savedProposal.proposalHash, savedProposal.proposal_hash, ] .filter((value) => typeof value === 'string' && value.trim().length > 0) .map((value) => value.trim().toLowerCase()); const matchesHash = Boolean( normalizedExpectedHash && candidateHashes.includes(normalizedExpectedHash) ); const isComplete = Boolean( savedProposal.complete === true || savedProposal.status === 'complete' || savedProposal.state === 'complete' || matchesHash ); return { isCompleted: isComplete, matchesHash, resolvedHash: candidateHashes[0] || null, }; } catch (statusError) { logAxiosError('ProposalForm::confirmProposalCompletion', statusError, { proposalId }); return { isCompleted: false }; } } /** * Function that gets the proposal hash and creates the new proposal * @function * @param {{proposalHash: string}} data proposalHash from the input */ const enterProposalHash = async (data) => { swal.fire({ title: 'Creating the proposal', showConfirmButton: false, willOpen: () => { swal.showLoading(); } }); const { proposalHash } = data; try { await updateProposal(proposalUid, { hash: proposalHash, complete: true }); await swal.fire({ icon: 'success', title: 'The proposal was created', timer: 2000, showConfirmButton: false }); history.push('/governance'); } catch (error) { logAxiosError('ProposalForm::enterProposalHash', error, { proposalUid, proposalHash }); const errorMessage = getAxiosErrorMessage(error, 'There was an error please try again'); const footer = getAxiosErrorFooter(error); const completionCheck = await confirmProposalCompletion(proposalUid, proposalHash); if (completionCheck.isCompleted) { const footerDetails = [errorMessage]; if (footer) { footerDetails.push(footer); } if (completionCheck.resolvedHash) { footerDetails.push(`Hash detected: ${completionCheck.resolvedHash}`); } await swal.fire({ icon: 'warning', title: 'Proposal creation confirmed after timeout', text: 'The proposal appears to have been registered even though the server timed out. You can confirm it from the governance page.', footer: footerDetails.join('<br />'), }); history.push('/governance'); return; } await swal.fire({ icon: 'error', title: 'There was an error please try again', text: errorMessage, footer }); } Normalization The normalizeResponseData function attempts to parse JSON responses. While this is a good approach for handling various data types, consider adding more robust error handling within the try...catch block to prevent unexpected behavior if the response is not valid JSON. Log any parsing errors for debugging purposes. const normalizeResponseData = (data) => { if (!data) { return data; } if (typeof data === "string") { return data; } try { return JSON.parse(JSON.stringify(data)); } catch (err) { return data; } };

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Improve error handling The catch block lacks detailed error handling. Enhance it to provide more informative error messages to the user, including potential API error details and a fallback message. Consider using the newly introduced error handling utilities from errorHandler.js to improve error reporting. src/components/proposal/ProposalForm.jsx [434-440] try { await updateProposal(proposalUid, { hash: proposalHash, complete: true }); await swal.fire({ icon: 'success', title: 'The proposal was created', timer: 2000, showConfirmButton: false }); history.push('/governance'); } catch (error) { - logAxiosError('ProposalForm::enterProposalHash', error, { - proposalUid, - proposalHash - }); + logAxiosError('ProposalForm::enterProposalHash', error, { proposalUid, proposalHash }); + const errorMessage = getAxiosErrorMessage(error, 'There was an error please try again'); + const footer = getAxiosErrorFooter(error); await swal.fire({ icon: 'error', title: 'There was an error please try again', - text: error.response?.data?.message ?? error.message + text: errorMessage, + footer }); } Suggestion importance[1-10]: 7 __ Why: The suggestion improves the error handling by using the new error handling utilities from errorHandler.js. This makes the error messages more informative and user-friendly. The improvement is good, but not critical.	Medium
	Add more context to logs The error handling in enterPaymentTxId is good, but could be improved by adding more context to the logged error. Include information about the proposal's status and any relevant data. This will help with debugging and identifying the root cause of errors. Consider adding a check for the existence of updateResponse and submitResponse before accessing their properties. src/components/proposal/ProposalForm.jsx [304-358] const enterPaymentTxId = async (data) => { - swal.fire({ - title: 'Creating submit command', - showConfirmButton: false, - willOpen: () => { - swal.showLoading(); - } - }); + swal.fire({ + title: 'Creating submit command', + showConfirmButton: false, + willOpen: () => { + swal.showLoading(); + } + }); + const { paymentTxId } = data; + let prepareObjectProposal; + try { + const updateResponse = await updateProposal(proposalUid, { txId: paymentTxId }); + if (!updateResponse) { + throw new Error('Update proposal request failed.'); + } + prepareObjectProposal = updateResponse?.data?.proposal?.prepareObjectProposal; + if (!prepareObjectProposal) { + throw new Error('The prepare payload is missing from the update response.'); + } + const submitResponse = await submitProposal(proposalUid, { ...prepareObjectProposal, txId: paymentTxId }); + if (!submitResponse) { + throw new Error('Submit proposal request failed.'); + } + const commandSubmit = submitResponse?.data?.commandSubmit; + if (!commandSubmit) { + throw new Error('Submit command was not returned by the API.'); + } + setSubmitCommand(commandSubmit); + await swal.fire({ + icon: 'success', + title: 'Submit command created', + timer: 2000, + showConfirmButton: false + }); + setUseCollapse(true); + setCollapse(false); + } catch (error) { + logAxiosError('ProposalForm::enterPaymentTxId', error, { + proposalUid, + paymentTxId, + hasPreparePayload: Boolean(prepareObjectProposal), + updateResponse: updateResponse ? 'Success' : 'Failed', + submitResponse: submitResponse ? 'Success' : 'Failed' + }); + const errorMessage = getAxiosErrorMessage(error, 'Unable to create submit command.'); + const footer = getAxiosErrorFooter(error); + await swal.fire({ + icon: 'error', + title: 'There was an error', + text: errorMessage, + footer + }); + } +}; - const { paymentTxId } = data; - let prepareObjectProposal; - - try { - const updateResponse = await updateProposal(proposalUid, { txId: paymentTxId }); - prepareObjectProposal = updateResponse?.data?.proposal?.prepareObjectProposal; - - if (!prepareObjectProposal) { - throw new Error('The prepare payload is missing from the update response.'); - } - - const submitResponse = await submitProposal(proposalUid, { ...prepareObjectProposal, txId: paymentTxId }); - const commandSubmit = submitResponse?.data?.commandSubmit; - - if (!commandSubmit) { - throw new Error('Submit command was not returned by the API.'); - } - - setSubmitCommand(commandSubmit); - - await swal.fire({ - icon: 'success', - title: 'Submit command created', - timer: 2000, - showConfirmButton: false - }); - - setUseCollapse(true); - setCollapse(false); - } catch (error) { - logAxiosError('ProposalForm::enterPaymentTxId', error, { - proposalUid, - paymentTxId, - hasPreparePayload: Boolean(prepareObjectProposal) - }); - - const errorMessage = getAxiosErrorMessage(error, 'Unable to create submit command.'); - const footer = getAxiosErrorFooter(error); - - await swal.fire({ - icon: 'error', - title: 'There was an error', - text: errorMessage, - footer - }); - } -} - Suggestion importance[1-10]: 5 __ Why: The suggestion adds more context to the error logs, which can be helpful for debugging. However, the added checks for updateResponse and submitResponse might be redundant if the catch block already handles potential errors from those functions. The impact is moderate.	Low