Flagsmith / Flagsmith/flagsmith

TypeError: undefined is not an object (evaluating '.replace') on Segments page

Open
#6,536 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
Python
Stars
6.6k
Forks
567
Avg merge
1d 13h
Merged PRs (30d)
121

Description

## Bug Description

Users encounter TypeErrors when interacting with the Segments page, specifically when searching and clicking on feature override rows.

**Errors**:
- `TypeError: undefined is not an object (evaluating 'W.replace')`
- `TypeError: undefined is not an object (evaluating 'y.replace')`

**Sentry Issues**:
- https://flagsmith.sentry.io/issues/7186673065/
- https://flagsmith.sentry.io/issues/7192576125/
- https://flagsmith.sentry.io/issues/7192578203/

## Impact

- **4 events / 2 users** total
- First seen: 2026-01-13
- Affects Segments page functionality

## Steps to Reproduce

1. Navigate to a project's Segments page (`/project/{id}/segments`)
2. Select a segment that has feature overrides (especially a feature-specific segment)
3. Use the search input to filter features
4. Click on a feature override row
5. Error occurs

**Context from breadcrumbs:**
- User was typing in the search input (`input.input-xsm[type="text"]`)
- Then clicked on a feature row (`div.d-flex.align-items-center > span`)
- Error triggered in `FeatureOverrideRow.tsx` onClick handler

## Root Cause

This issue was likely introduced in PR #6478 (commit `58015b117` - "feat: improve segment feature association", merged Jan 7 2026). First error appeared Jan 13 2026.

Two related issues:

### 1. TableSearchFilter.tsx (line 39)
```typescript
value={localValue?.replace(/^"+|"+$/g, '')}
```
If `localValue` is not a string (e.g., undefined, object, or number), `.replace()` fails.

### 2. FeatureOverrideRow.tsx (line 120, 123)
```typescript
const newParams = Utils.toParam({
...params,
flag: projectFlag.name, // Can be undefined
tab,
})
history.replace(`${document.location.pathname}?${newParams}`)
```
If `projectFlag.name` is undefined, `Utils.toParam()` may return unexpected results.

### 3. ConnectedFeatureOverrideRow.tsx (line 41)
```typescript
if (flagLoading || statesLoading || !projectFlag || !featureStates) {
```
This guard checks `!projectFlag` but doesn't validate that `projectFlag.name` exists before passing to `FeatureOverrideRow`.

## Suggested Fix

### TableSearchFilter.tsx
```typescript
// Ensure localValue is always a string before calling replace
value={(localValue ?? '').replace(/^"+|"+$/g, '')}
```

### FeatureOverrideRow.tsx
The guard at lines 109-115 checks for `!projectFlag` but doesn't check for missing properties:
```typescript
if (
!projectFlag ||
!projectFlag.name || // Add this check
!environmentId ||
!environmentFeatureState ||
!overrideFeatureState
)
return
```

## Files to Modify

- `frontend/web/components/tables/TableSearchFilter.tsx` (line 39)
- `frontend/web/components/feature-override/FeatureOverrideRow.tsx` (lines 109-115, 120)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.