Graylog2 / Graylog2/graylog2-server

Extractor UI: adding CSV/Date/Split&Count/Lookup Table converter throws "Cannot read properties of undefined (reading 'checked')" (regression in 7.1.0)

Open Beginner friendly
#26,989 0 comments 0 reactions 0 assignees View on GitHub
bug triaged
Dominant language
Java
Stars
8.1k
Forks
1.1k
Avg merge
1d 20h
Merged PRs (30d)
217

Description

**FULL DISCLOSURE: The technical details in this bug report were generated by Claude Opus 5 after I attempted to find a resolution to the issue using it, and it confirmed that there was no version of Graylog 7.1 in which this bug has been fixed.**

## Expected Behavior

Adding a "CSV to Fields" converter to an extractor should render the converter's
configuration form so it can be configured and saved. This worked through 7.0.x.

## Current Behavior

The web UI immediately renders the error page:

```
Cannot read properties of undefined (reading 'checked')
```

Reproducible on any input, any extractor type that permits converters, in every
browser, including private/incognito windows. The same failure occurs with the
Date, Split & Count, and Lookup Table converters. Numeric, Tokenizer, Hash,
Uppercase, Lowercase, and Flexdate are unaffected.

The extractor itself is fine at runtime — only the UI form is broken. Creating
the extractor via `POST /api/system/inputs/{inputId}/extractors` or via
"Import extractors" works, and the converter processes messages correctly.
Re-opening such an extractor in the UI editor reproduces the crash.

## Possible Solution

Regression introduced in 7.1.0-alpha.1, in
`graylog2-web-interface/src/components/bootstrap/Input.tsx`.

`_renderCheckboxGroup` passes the *current value* of `this.input` as the ref
instead of a callback that assigns to it:

```jsx

```

In 7.0.x it was:

```jsx
{
this.input = ref;
}}
{...controlProps}>
```

Consequently `this.input` is never populated for `type="checkbox"`, and
`getChecked = () => this.getInputDOMNode().checked` dereferences `undefined`.
`_renderRadioGroup` and `_renderFormControl` in the same file still use the
callback form, which is why only checkbox-backed components break.

The four affected converter components all evaluate this during render, e.g. in
`converters_configuration/CSVConverterConfiguration.tsx`:

```jsx
required={this.converterEnabled && this.converterEnabled.getChecked()}
```

Timing: on first render `this.converterEnabled` is undefined so `&&`
short-circuits; the ref callback then fires, `componentDidMount` calls
`onChange`, the parent re-renders, and `getChecked()` throws.

Suggested fix: revert both `` occurrences in `_renderCheckboxGroup`
to the `inputRef` callback form.

## Steps to Reproduce (for bugs)

1. System → Inputs → select any input → Manage extractors → Get started
2. Select a message and create any extractor type that allows converters
(e.g. Copy Input)
3. Under "Add converter", select "CSV to Fields" and click Add
4. Error page appears

## Context

Blocks all UI-based creation and editing of extractors using these four
converters. Workaround is to build them as JSON and use "Import extractors" or
the REST API, but the extractors then cannot be edited in the UI afterward.

## Your Environment

* Graylog Version: 7.1.3 (Open) — also present in 7.1.0 through 7.1.7 and on `master`; 7.0.x unaffected
* Java Version: Eclipse Adoptium 21.0.11 on Linux 5.14.0-611.30.1.el9_7.x86_64
* OpenSearch Version: 2.19.4
* MongoDB Version: 8.0.19
* Operating System: Red Hat Enterprise Linux release 9.7
* Browser version: Reproduced across multiple browsers, including incognito

## Checklist
[x] This issue fix need to be backported.
[] Does this issue have **security** implications?

Contributor guide

Open the contributing guide

Research direction

Start in graylog2-web-interface/src/components/bootstrap/Input.tsx, focusing on _renderCheckboxGroup and its two Checkbox occurrences; compare them with _renderRadioGroup and _renderFormControl. Reproduce the issue by adding a CSV to Fields converter in the extractor UI, then verify that CSV, Date, Split & Count, and Lookup Table forms render, can be configured and saved, and no longer show the undefined checked error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.