Repository: provectus/kafka-ui
Issue: Serde 'null' not found when trying to decode message encoded using Avro schema stored in SchemaRegistry
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug** (Actual behavior)

Messages in UI are not decoded. Log shows following:

```
javax.validation.ValidationException: Serde 'null' not found
	at com.provectus.kafka.ui.service.DeserializationService.lambda$getSerdeForDeserialize$1(DeserializationService.java:70)
```


**Expected behavior**
Messages are correctly decoded

**Set up**
1. Kafka UI upgraded from 0.4.0 to 0.6.0 (nothing else changed in setup)
2. Schema registry contains correct schema
3. Message is encoded with correct schema ID
4. Manual decoding and consumers work as expected
5. **Kafka UI tries to lookup schema using subject based on topic name (such as Topic-key/Topic-value) completely ignoring that schema ID is already encoded in the message...**


**Steps to Reproduce**
See above

**Screenshots**
None

**Additional context**
When SchemaRegistry is used there is a standard way to encode schema ID in the messages, doing something other than that is not the best perhaps?


Issue comments:
@akamensky 
Thank you for the issue!

 In 0.6 SchemaRegistry serde is **not** trying to find schema using subject based on topic name (unless `schemaRegistryCheckSchemaExistenceForDeserialize` property is set). It only relies on schema ID from message (as you expected).

Couple of questions for investigation:
1. Is `SchemaRegistry` visible in serdes list in UI ? 
2. Do you have truststore / keystore properties set for SchemaRegistry?
3. Do you use auth for SchemaRegistry ? 

Thanks in advance!



@iliax 

- Yes
- No
- No

I can see ScheaRegistry in the list of decoders. We don't use auth or keystore. 
@akamensky 
ok, can you please verify that UI is passing valid serde name to backend? 
To do it pls see payload that UI sends to `GET /messages` endpoint in browser ? 
should be look like 
<img width="386" alt="Screenshot 2023-03-10 at 11 46 18" src="https://user-images.githubusercontent.com/702205/224255117-5fd0a306-ec53-44b8-b29d-0d2f3b1632ad.png">

@iliax I'll check on Monday and update here. Thanks. 
The call to `GET /messages` looks fine, it passed `keySerde: SchemaRegistry` and `valueSerde: SchemaRegistry` as query parameters.

However I noticed that the request to `/serdes?use=DESERIALIZE` (and the same call with `serialize`) would return empty `schema` field for `SchemaRegistry`. The value was `null`, while `preferred: true`. However there is no problem connecting to SR from the host and there is no log entries for that whatsoever. After I restarted KafkaUI multiple times (namely take the docker stack down completely and create it anew), it seems to have disappeared. And the same call now has correct Avro schema value in `schema` field.

No idea what's happening there, but looks like it either does not fetch schemas from SR, or does not even try.
@akamensky thank you for info, we will try to reproduce that. For now, it looks like there was an issue connecting with SR and UI is not working property in such situation

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
index 3abe336f044..c3871432e70 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
@@ -125,10 +125,10 @@ const Filters: React.FC<FiltersProps> = ({
     getTimestampFromSeekToParam(searchParams)
   );
   const [keySerde, setKeySerde] = React.useState<string>(
-    searchParams.get('keySerde') as string
+    searchParams.get('keySerde') || ''
   );
   const [valueSerde, setValueSerde] = React.useState<string>(
-    searchParams.get('valueSerde') as string
+    searchParams.get('valueSerde') || ''
   );
 
   const [savedFilters, setSavedFilters] = React.useState<MessageFilters[]>(
@@ -206,8 +206,8 @@ const Filters: React.FC<FiltersProps> = ({
       limit: PER_PAGE,
       page: page || 0,
       seekDirection,
-      keySerde: keySerde || (searchParams.get('keySerde') as string),
-      valueSerde: valueSerde || (searchParams.get('valueSerde') as string),
+      keySerde: keySerde || searchParams.get('keySerde') || '',
+      valueSerde: valueSerde || searchParams.get('valueSerde') || '',
     };
 
     if (isSeekTypeControlVisible) {


Test patch: