Browser Console Errors
null access TypeErrors, CORS policy, network errors, React warnings, TypeScript compiler errors
Common browser errors
- TypeError: Cannot read properties of null → element not in DOM yet; check ID / script order
- ERR_CONNECTION_REFUSED → no server on that port; check if the server is running
- CORS policy blocked → server missing Access-Control-Allow-Origin header
- React key warning → list items need stable unique key prop for efficient updates
- TS: string | undefined not assignable to string → handle the undefined case before assigning
Question 0 of 5
The browser console shows: TypeError: Cannot read properties of null (reading 'addEventListener'). What is the most likely cause?
document.getElementById('myBtn')returnsnullif the element does not exist- Calling
null.addEventListenerthrows this TypeError
- Script runs in
<head>before the DOM is loaded - Wrong element ID (typo)
- Element is dynamically added later but script runs at page load
</body>, use DOMContentLoaded, or add a null check: el?.addEventListener(....The network tab shows a request failing with net::ERR_CONNECTION_REFUSED. What does this mean?
- ERR_CONNECTION_REFUSED — target port is closed (server is not running)
- ERR_NAME_NOT_RESOLVED — DNS failure (hostname does not resolve)
- ERR_TIMED_OUT — connection attempt timed out (firewall, unreachable host)
- ERR_CERT_AUTHORITY_INVALID — SSL certificate not trusted
- 404 Not Found — server responded but the resource does not exist
- 401 Unauthorized — missing or invalid authentication credentials
- 403 Forbidden — authenticated but not permitted
Console shows: Access to fetch at 'http://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What causes this?
- A request is cross-origin when the protocol, host, or port differs from the page origin
localhost:3000→api.example.comis cross-origin- The server must respond with
Access-Control-Allow-Origin: *(or a specific origin) to allow it - CORS is enforced by the browser, not the server — the server always receives the request
React shows in the console: Warning: Each child in a list should have a unique "key" prop. What does this mean for the application?
- React uses keys to identify which items changed, were added, or removed in a list
- Without keys, React re-renders the entire list on any change
- With wrong keys (e.g., array index), React may reuse the wrong DOM node, causing state bugs (e.g., an input retaining the previous item's value)
key={user.id} not key={index}. Use array index only if the list never reorders and has no stable IDs.TypeScript compiler error: Type 'string | undefined' is not assignable to type 'string'. What does this tell you about the code?
string | undefined— a union type meaning the value may be a string OR undefinedstring(without undefined) — must always be a defined string
- Optional chaining:
user?.namereturnsstring | undefined - Object property with
?:interface User { name?: string }makesuser.namebestring | undefined
if (name !== undefined)), use nullish coalescing (name ?? 'default'), or use the non-null assertion operator (name! — use with care).