ChangeLog May 20, 2023- May 30, 2023
date
May 19, 2023
slug
changelog-may20
status
Published
tags
Changelog
summary
Documenting our journey
type
Post
Athena Browser Automator
Advancements:
- Implemented all-new conversational interface like chatgpt
- Used Chrome storage to save conversation history locally
Bug Analysis
1. TypeScript Type Errors
Root Cause:
TypeScript was flagging a type error because the expected type of the messages was an array of
never. This means TypeScript inferred that messages is of type never[] but it was not clear from the initial code where messages state was initialized that way. never is a type that represents the type of values that never occur. For example, a function that always throws an error might have the return type never.The application was trying to set the
messages state with an array of objects that didn't match the initial Message type definition.Fix:
The
Message type was correctly defined and used across the application, ensuring type consistency. This includes updating the types of objects when they are added to the messages state. Now, all instances of adding to the messages state have the correct type.2. Unhandled Promise Rejection
Root Cause:
The asynchronous function
runTask was not correctly handling promise rejections, leading to unhandled promise rejections when an error occurred during the execution of runTask.Fix:
Wrapped the
runTask function with a try-catch-finally block to ensure all promise rejections are caught and properly handled.Code Optimization
1. Consolidation of message additions
Improvement:
Instead of calling
setMessages multiple times, the runTask function now only calls it once. This reduces the number of re-renders in the React component and improves performance.Benefit to the End User:
This leads to a smoother user experience with less UI flickering due to re-renders.
2. Usage of useCallback
Improvement:
The
toastError, runTask, and addMessage functions are wrapped with useCallback to prevent unnecessary re-renders and function re-creations during component updates.Benefit to the End User:
Again, this leads to smoother user experience with less UI flickering due to re-renders.
3. Type checking in Chrome Storage Listener
Improvement:
Added type checking in the
chrome.storage.onChanged.addListener function to ensure that the changes are related to the messages object. This prevents the listener from firing on irrelevant changes.Benefit to the End User:
This prevents unexpected behavior from the chat UI when other unrelated data in Chrome Storage changes.
4. Proper handling of asynchronous functions
Improvement:
Asynchronous functions such as
fetchMessages and runTask are properly handled now, with await used where necessary and promise rejections handled correctly.Benefit to the End User:
Better error handling means less chance of encountering an unresponsive or broken UI due to unhandled promise rejections.
5. Usage of TypeScript for better type safety
Improvement:
The revised code utilizes TypeScript to its full potential, providing type safety for all functions and variables. This greatly reduces the chance of runtime errors.
Benefit to the End User:
This provides a more reliable and stable application for the user, reducing the chances of encountering unexpected errors.
Athena for Search:
- Officially open sourced here: