Troubleshooting
Relevant source files
The following files were used as context for generating this wiki page: - [client/src/components/Hero/index.tsx](https://github.com/asixham/greenline/blob/HEAD/client/src/components/Hero/index.tsx) - [client/src/components/StockSummary/index.tsx](https://github.com/asixham/greenline/blob/HEAD/client/src/components/StockSummary/index.tsx) - [client/src/components/Navbar/index.tsx](https://github.com/asixham/greenline/blob/HEAD/client/src/components/Navbar/index.tsx) - [client/src/app/portal/page.tsx](https://github.com/asixham/greenline/blob/HEAD/client/src/app/portal/page.tsx) - [client/src/app/quote/[ticker]/page.tsx](https://github.com/asixham/greenline/blob/HEAD/client/src/app/quote/%5Bticker%5D/page.tsx) - [client/src/components/NewsSection/index.tsx](https://github.com/asixham/greenline/blob/HEAD/client/src/components/NewsSection/index.tsx) - [client/src/components/StockRating/index.tsx](https://github.com/asixham/greenline/blob/HEAD/client/src/components/StockRating/index.tsx) - [client/src/components/TickerChat/index.tsx](https://github.com/asixham/greenline/blob/HEAD/client/src/components/TickerChat/index.tsx)This document provides guidance for troubleshooting issues within the Greenline client application. The primary focus is on diagnosing problems related to data fetching from external APIs, component state management (loading and error states), and API key configuration. Most data-driven components follow a standard pattern of fetching data within a useEffect hook and managing loading and error states.
Issues in the application will typically manifest as a component failing to load data, displaying an error message, or showing a persistent loading spinner. The root cause is often related to a failed API request, which can stem from invalid API keys, network issues, or problems with the external service itself.
General Data Fetching and Error Handling
Across the application, a consistent pattern is used for fetching external data. Components initialize loading and error states and use an asynchronous function, typically triggered by a useEffect hook, to fetch data.
Sources: client/src/components/Hero/index.tsx:15-16, client/src/components/StockSummary/index.tsx:26-27, client/src/components/Navbar/index.tsx:14-16
Standard Fetching Flow
The diagram below illustrates the typical lifecycle of a data-fetching component. The component initiates a loading state, attempts to fetch data, and then either displays the data or an error message.
This diagram shows the common state flow for components that fetch external data.
Sources: client/src/components/NewsSection/index.tsx:30-47, client/src/app/quote/[ticker]/page.tsx:50-71
UI States
Components visually represent their current state to the user:
- Loading: A
<Spinner />component is typically rendered. - Error: An error message is displayed, often styled in red and sometimes contained within a
<Card>component. - Success: The main component content is rendered with the fetched data.
- No Data: A message like "No results found" or "No news articles found" is shown if the API call is successful but returns an empty set.
Sources: client/src/components/Navbar/index.tsx:117-119, client/src/components/NewsSection/index.tsx:64-68, client/src/components/StockRating/index.tsx:75-81
API Integration Issues
The application relies on several external APIs. Misconfiguration or downtime of these services are common sources of errors.
API Key Configuration
The application uses environment variables to store API keys. A missing or invalid key will cause API requests to fail.
| Environment Variable | Used In | API Provider |
|---|---|---|
NEXT_PUBLIC_POLYGON_API_KEY | Hero, Navbar, StockSummary, NewsSection, quote/[ticker]/page | Polygon.io |
NEXT_PUBLIC_OPENAI_API_KEY | StockSummary, TickerChat | OpenAI |
| Hardcoded Key | StockRating | Financial Modeling Prep |
Note: The StockRating component uses a hardcoded API key, which is a significant issue. If this component fails, verify the validity of this key directly in the source code.
Sources: client/src/components/Hero/index.tsx:22, client/src/components/StockSummary/index.tsx:84, client/src/components/StockRating/index.tsx:43, client/src/components/TickerChat/index.tsx:65
Polygon.io API
This is the primary data source for market data, news, and company information.
Endpoints Used
| Component | Endpoint | Purpose |
|---|---|---|
Hero | /v2/aggs/ticker/{ticker}/prev | Get previous day's OHLC for tickers. |
Navbar | /v3/reference/tickers?search={query} | Search for tickers. |
StockSummary | /v2/aggs/ticker/{ticker}/range/1/day/{from}/{to} | Get historical daily aggregate data. |
NewsSection | /v2/reference/news?ticker={ticker} | Fetch news articles for a ticker. |
portal/page.tsx | /v1/marketstatus/now & /v2/reference/news | Get market status and general news. |
quote/[ticker]/page.tsx | /v3/reference/tickers/{ticker} & /v1/related-companies/{ticker} | Get detailed company info & related tickers. |
Error responses from Polygon are checked via data.status. If the status is not OK or is ERROR, an error is thrown and caught by the catch block.
Sources: client/src/components/Hero/index.tsx:24, client/src/components/Navbar/index.tsx:60, client/src/components/StockSummary/index.tsx:49, client/src/app/portal/page.tsx:55, client/src/app/quote/[ticker]/page.tsx:60
OpenAI API
The OpenAI API is used for generating AI-powered text in the StockSummary and TickerChat components.
TickerChat Interaction Flow
The TickerChat component sends the entire message history to the OpenAI API and streams the response back to the user.
This diagram shows the sequence of events when a user interacts with the TickerChat feature.
Sources: client/src/components/TickerChat/index.tsx:59-90
A critical point for troubleshooting is the dangerouslyAllowBrowser: true flag used when initializing the OpenAI client. This is a security risk and can be a point of failure if browser security policies block the requests.
Sources: client/src/components/StockSummary/index.tsx:85, client/src/components/TickerChat/index.tsx:66
Component-Specific Troubleshooting
quote/[ticker]/page.tsx
This page is a container for many other data-fetching components. If the page shows a top-level error or loading spinner, the issue is likely in the fetchStockInfo or fetchRelatedCompanies calls within this page itself. If only a specific section of the page fails (e.g., News, Rating), the problem lies within that child component.
This diagram shows the components rendered by the main stock quote page and the APIs they depend on.
Sources: client/src/app/quote/[ticker]/page.tsx:11-20, 142-156
StockSummary
This component has a complex data flow, first fetching historical data from Polygon and then making multiple requests to OpenAI to analyze significant price changes. A failure can occur at either stage.
- Polygon Fetch Failure: If
fetchStockDatafails, the component will show an error: "Failed to fetch stock data." - OpenAI Generation Failure: If any of the
openai.chat.completions.createcalls fail, the entire process may halt, and thecatchblock will set an error: "Failed to generate timeline."
Sources: client/src/components/StockSummary/index.tsx:40-54, 78-111
Navbar Search
The search functionality in the Navbar is debounced by 500ms. If search results are not appearing, check the following:
- Is there a network request to
api.polygon.io/v3/reference/tickersin the browser's developer tools? - Is the request returning an error? The component will display
Error: {error}if the fetch fails. - If no results are found for a valid query, the UI will display "No results found."
Sources: client/src/components/Navbar/index.tsx:49-70, 117-122