The CSV table cells render raw text without any sanitization or escaping. While React automatically escapes text content to prevent XSS, consider edge cases where cell content might contain very long strings without spaces, which could break the table layout. Adding word-break or overflow-wrap styles to table cells would prevent layout issues.

The custom CSV table lacks overflow handling. The StyledDocumentViewerContainer has overflow:auto for other renderers (line 52), but StyledCsvTable doesn't inherit this behavior. For CSVs with many columns or wide content, the table may overflow the container without scrollbars. Consider wrapping the table in a scrollable container or adding overflow styles to handle wide tables.

Bug: The promise returned by fetchCsvPreview lacks a .catch() handler. A failed network request will cause the component to show a loading state indefinitely.
_{Severity: MEDIUM}

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location:
packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx#L199

Potential issue: The `useEffect` hook that calls `fetchCsvPreview` for CSV files does
not handle promise rejections. If the underlying `fetch` call fails due to a network
error, CORS issue, or an invalid URL, the promise will reject. Because there is no
`.catch()` block, the `csvPreview` state will never be updated, and the component will
remain indefinitely in a "Loading csv ..." state, with no error message or recovery path
for the user.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

P2: CSV preview state isn’t reset on documentUrl change, so switching between CSVs can show stale table data until the new fetch resolves or fails.

Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx, line 199:

<comment>CSV preview state isn’t reset on documentUrl change, so switching between CSVs can show stale table data until the new fetch resolves or fails.</comment>

<file context>
@@ -175,15 +192,11 @@ export const DocumentViewer = ({
-      fetchCsvPreview(documentUrl).then((content) => {
-        setCsvPreview(content);
-      });
+      fetchCsvPreview(documentUrl).then(setCsvPreview);
     }
   }, [documentUrl, fileExtension]);
</file context>

CSV preview stuck loading

fetchCsvPreview(documentUrl).then(setCsvPreview) has no cancellation or error handling. If the fetch/parse rejects (network/CORS/non-2xx causing response.text() to throw, etc.), the component will stay on “Loading csv ...” and you’ll get an unhandled rejection. It can also race when documentUrl changes quickly, setting CSV state for the previous URL after the new one. Consider aborting/guarding the effect and handling errors by rendering the existing “Preview Not Available / Download” UI for CSV.

This is a comment left during a code review.
Path: packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx
Line: 197:201

Comment:
**CSV preview stuck loading**

`fetchCsvPreview(documentUrl).then(setCsvPreview)` has no cancellation or error handling. If the fetch/parse rejects (network/CORS/non-2xx causing `response.text()` to throw, etc.), the component will stay on “Loading csv ...” and you’ll get an unhandled rejection. It can also race when `documentUrl` changes quickly, setting CSV state for the previous URL after the new one. Consider aborting/guarding the effect and handling errors by rendering the existing “Preview Not Available / Download” UI for CSV.

How can I resolve this? If you propose a fix, please make it concise.

The useEffect hook that calls fetchCsvPreview does not handle errors. If the fetch or parsing fails, the csvPreview state will remain undefined, and users will see the "Loading csv ..." message indefinitely. Consider adding error handling with try-catch and displaying an appropriate error message to users when CSV loading fails.

The table headers and cells lack proper ARIA attributes or semantic attributes that could enhance accessibility. While the basic table structure is semantically correct, consider whether headers should have scope attributes (scope="col") to explicitly indicate they're column headers, especially for screen reader users navigating complex CSV data.

The fetch call lacks error handling for network failures or non-2xx HTTP status codes. If the fetch fails or returns an error status, the function will throw an unhandled error. Consider adding error handling similar to other fetch calls in the codebase, which check response.ok and throw appropriate errors with status information.

Non-OK responses parsed

fetchCsvPreview parses await response.text() without checking response.ok, so a 403/404 HTML body (or any non-CSV content) will still be parsed and rendered as a “CSV” table. PapaParse also exposes result.errors which is currently ignored, so malformed CSV can silently produce surprising headers/rows. This should be treated as a fetch/parse failure so the caller can show the normal “preview unavailable” path instead of rendering garbage.

This is a comment left during a code review.
Path: packages/twenty-front/src/modules/activities/files/utils/fetchCsvPreview.ts
Line: 10:12

Comment:
**Non-OK responses parsed**

`fetchCsvPreview` parses `await response.text()` without checking `response.ok`, so a 403/404 HTML body (or any non-CSV content) will still be parsed and rendered as a “CSV” table. PapaParse also exposes `result.errors` which is currently ignored, so malformed CSV can silently produce surprising `headers/rows`. This should be treated as a fetch/parse failure so the caller can show the normal “preview unavailable” path instead of rendering garbage.

How can I resolve this? If you propose a fix, please make it concise.

Papa.parse can encounter errors during CSV parsing (e.g., malformed CSV files). The result object has an 'errors' array that should be checked. Consider validating result.errors and handling parse errors gracefully to prevent displaying malformed data or providing unclear error messages to users.

If the CSV file is empty or contains only a header row with no data rows, the destructuring will work but rows will be an empty array. While this is technically correct, consider whether an empty CSV should show an empty table or a specific message to users indicating there's no data to preview.

The fetchCsvPreview function lacks test coverage. Other utility functions in this directory (downloadFile, getFileType) have corresponding test files in tests/. Consider adding tests for this function to verify correct CSV parsing, header extraction, and edge cases like empty CSVs, CSVs with only headers, or malformed data.