Skip to content

Conversation

@guan404ming
Copy link
Member

@guan404ming guan404ming commented Aug 13, 2025

Related Issue

Why

We filtered the logs by level by replacing them with empty strings, but they still remain in the log list.

if (
logLevelFilters !== undefined &&
Boolean(logLevelFilters.length) &&
((typeof level === "string" && !logLevelFilters.includes(level)) || !Boolean(level))
) {
return "";
}

On the overview page, multiple TaskLogPreview instances could exist at the same time, each holding a full list of logs. This overloads the virtual lists with state updates, eventually triggering the error: Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

How

  • filtered out empty log in TaskLogPreview

before

Screen.Recording.2025-08-13.at.8.46.35.PM.mov

after

Screen.Recording.2025-08-13.at.8.44.55.PM.mov

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Aug 13, 2025
@prdai
Copy link
Contributor

prdai commented Aug 14, 2025

is there a reason why we are getting empty logs? (i am not that familiar with the UI side of things, sorry if this is a obvious question)

@guan404ming
Copy link
Member Author

After investigation, the issue would occur in sourceFilter and levelFilter as well. So I update the fix into useLogs, which would be used every components related logs.

is there a reason why we are getting empty logs? (i am not that familiar with the UI side of things, sorry if this is a obvious question)

We use renderStructuredLog to render log in UI and we pass the filter like sourceFilter and levelFilter to filter log by making it a empty string. But in current implementation, we didn't filter out the empty log causing the virtual list measurement element re-render in multiple times, which leads to the error 185.

@guan404ming guan404ming changed the title Filter out empty logs in TaskLogPreview Filter out empty logs in useLogs Aug 14, 2025
@bbovenzi bbovenzi added this to the Airflow 3.0.6 milestone Aug 14, 2025
@bbovenzi bbovenzi added the backport-to-v3-1-test Mark PR with this label to backport to v3-1-test branch label Aug 14, 2025
@bbovenzi bbovenzi merged commit a3388cf into apache:main Aug 14, 2025
53 checks passed
@github-actions
Copy link

Backport failed to create: v3-0-test. View the failure log Run details

Status Branch Result
v3-0-test Commit Link

You can attempt to backport this manually by running:

cherry_picker a3388cf v3-0-test

This should apply the commit to the v3-0-test branch and leave the commit in conflict state marking
the files that need manual conflict resolution.

After you have resolved the conflicts, you can continue the backport process by running:

cherry_picker --continue

@pierrejeambrun
Copy link
Member

cc: @bbovenzi not sure if we're going to have a 3.0.6 or 3.1.0 but we should probably manually backport this, just in case

@bbovenzi
Copy link
Contributor

Manual backport: #54628

@guan404ming guan404ming deleted the fix-ui-oom branch August 19, 2025 15:38
@kaxil kaxil removed this from the Airflow 3.0.6 milestone Aug 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. backport-to-v3-1-test Mark PR with this label to backport to v3-1-test branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI crashes when filtering logs by log level Minified React error 185 on the dag Overview page

5 participants