Create new CSFError structure to use throughout app for error handling.

Author: IzaakPrats

src/lib/bridge/handlers/list_item.ts

@@ -1,6 +1,7 @@
 import {SimpleHandler} from './main';
 import {RequestType} from './types';
 import {environment} from '../../../environment';
+import {CSFError, CSFErrorCode} from '../../utils/errors';
 
 type ListingType = 'buy_now' | 'auction';
 
@@ -46,7 +47,7 @@ export const ListItem = new SimpleHandler<ListItemRequest, ListItemResponse>(Req
         const error = await response.json();
         if (response.status === 401) {
             // This is here for normalized auth errors across all handlers
-            throw new Error('Not authenticated');
+            throw new CSFError(CSFErrorCode.NOT_AUTHENTICATED);
         }
 
         throw new Error(`Failed to List Item: ${error.message} - ${error.code}`);

src/lib/components/inventory/list_item_modal.ts

@@ -9,6 +9,7 @@ import {ListItem} from '../../bridge/handlers/list_item';
 import {FetchRecommendedPrice} from '../../bridge/handlers/fetch_recommended_price';
 import {listItemModalStyles} from './list_item_modal_styles';
 import {isLoggedIntoCSFloat} from '../../utils/auth';
+import {CSFError, CSFErrorCode} from '../../utils/errors';
 
 @CustomElement()
 export class ListItemModal extends FloatElement {
@@ -89,15 +90,15 @@ export class ListItemModal extends FloatElement {
 
             const isLoggedIn = await isLoggedIntoCSFloat();
             if (!isLoggedIn) {
-                throw new Error('Not authenticated');
+                throw new CSFError(CSFErrorCode.NOT_AUTHENTICATED);
             }
 
             // Will also throw if not logged in
             await this.fetchRecommendedPrice();
         } catch (error) {
             console.error('Failed to initialize listing modal:', error);
 
-            if (error instanceof Error && error.message === 'Not authenticated') {
+            if (error instanceof CSFError && error.code === CSFErrorCode.NOT_AUTHENTICATED) {
                 this.error = {
                     message: 'You must be logged into CSFloat to list items.',
                     cta: 'Log into CSFloat',
@@ -537,8 +538,8 @@ export class ListItemModal extends FloatElement {
                                   ${this.isLoading
                                       ? 'Listing...'
                                       : this.listingType === 'buy_now'
-                                      ? 'List for Sale'
-                                      : 'Start Auction'}
+                                        ? 'List for Sale'
+                                        : 'Start Auction'}
                               </button> `}
                 </div>
                 ${this.showConfirmationModal

src/lib/services/price_fetcher.ts

@@ -1,6 +1,7 @@
 import {environment} from '../../environment';
 import {gStore} from '../storage/store';
 import {PRICE_CACHE} from '../storage/keys';
+import {CSFError, CSFErrorCode} from '../utils/errors';
 
 const DEFAULT_CACHE_DURATION = 2 * 60 * 60 * 1000; // 2 hours
 
@@ -64,10 +65,9 @@ class PriceFetcher {
 
             if (!regularResponse.ok || !dopplerResponse.ok) {
                 console.error(`Failed to fetch prices: ${regularResponse.status}, ${dopplerResponse.status}`);
-                if (regularResponse.status === 401) {
-                    throw new Error('Not authenticated');
-                }
-                throw new Error('Failed to fetch prices');
+                throw new CSFError(
+                    regularResponse.status === 401 ? CSFErrorCode.NOT_AUTHENTICATED : CSFErrorCode.FAILED_TO_FETCH
+                );
             }
 
             const regularData = (await regularResponse.json()) as PriceListResponse[];
@@ -96,13 +96,25 @@ class PriceFetcher {
 
             return {prices, dopplerPrices};
         } catch (error) {
+            // Log the specific error for debugging
+            console.error('Error in price fetcher:', error);
+
             // If we have no stored cache, bubble up the error
             if (!storedCache) {
-                console.error('Failed to fetch prices and no cached data available');
-                throw new Error('Failed to fetch prices and no cached data available');
+                if (error instanceof CSFError) {
+                    // Pass through existing CSFError with the same code
+                    throw error;
+                } else if (error instanceof Error) {
+                    // Convert regular Error to CSFError with original message
+                    throw new CSFError(CSFErrorCode.FAILED_TO_FETCH, `Failed to fetch prices: ${error.message}`);
+                } else {
+                    // Handle unknown error types
+                    throw new CSFError(CSFErrorCode.FAILED_TO_FETCH);
+                }
             }
 
-            // On error with existing cache, return existing cache regardless of age
+            // With existing cache, return cache despite fetch error
+            console.log('Using cached prices despite fetch error');
             return {
                 prices: storedCache.prices || {},
                 dopplerPrices: storedCache.dopplerPrices || {},

src/lib/utils/errors.ts

@@ -0,0 +1,23 @@
+export enum CSFErrorCode {
+    NOT_AUTHENTICATED = 'NOT_AUTHENTICATED',
+    FAILED_TO_FETCH = 'FAILED_TO_FETCH',
+}
+
+export const ErrorMessage = {
+    [CSFErrorCode.NOT_AUTHENTICATED]: 'Not authenticated',
+    [CSFErrorCode.FAILED_TO_FETCH]: 'Failed to fetch data',
+};
+
+export class CSFError extends Error {
+    code: CSFErrorCode;
+
+    constructor(code: CSFErrorCode, message?: string) {
+        super(message || ErrorMessage[code]);
+        this.code = code;
+        this.name = 'CSFError';
+
+        // This is needed to make instanceof work correctly with TypeScript
+        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error
+        Object.setPrototypeOf(this, CSFError.prototype);
+    }
+}