diff --git a/public/app/features/explore/TraceView/components/model/transform-trace-data.test.ts b/public/app/features/explore/TraceView/components/model/transform-trace-data.test.ts
index 53d3f3b696d..7ff8742e335 100644
--- a/public/app/features/explore/TraceView/components/model/transform-trace-data.test.ts
+++ b/public/app/features/explore/TraceView/components/model/transform-trace-data.test.ts
@@ -143,6 +143,58 @@ describe('transformTraceData()', () => {
     expect(transformTraceData(traceData)).toEqual(null);
   });
 
+  it('should return null for any span without a spanID', () => {
+    const traceData = {
+      traceID,
+      processes,
+      spans: [
+        {
+          traceID,
+          operationName: 'rootOperation',
+          references: [
+            {
+              refType: 'CHILD_OF',
+              traceID,
+              spanID: rootSpanID,
+            },
+          ],
+          startTime,
+          duration,
+          tags: [],
+          processID: 'p1',
+        },
+      ],
+    } as unknown as TraceResponse;
+
+    expect(transformTraceData(traceData)).toEqual(null);
+  });
+
+  it('should return null for any span without a processID', () => {
+    const traceData = {
+      traceID,
+      processes,
+      spans: [
+        {
+          traceID,
+          spanID: '41f71485ed2593e4',
+          operationName: 'rootOperation',
+          references: [
+            {
+              refType: 'CHILD_OF',
+              traceID,
+              spanID: rootSpanID,
+            },
+          ],
+          startTime,
+          duration,
+          tags: [],
+        },
+      ],
+    } as unknown as TraceResponse;
+
+    expect(transformTraceData(traceData)).toEqual(null);
+  });
+
   it('should return trace data with correct traceName based on root span with missing ref', () => {
     const traceData = {
       traceID,
diff --git a/public/app/features/explore/TraceView/components/model/transform-trace-data.tsx b/public/app/features/explore/TraceView/components/model/transform-trace-data.tsx
index ccd1905bd77..fef8f4fcf8e 100644
--- a/public/app/features/explore/TraceView/components/model/transform-trace-data.tsx
+++ b/public/app/features/explore/TraceView/components/model/transform-trace-data.tsx
@@ -74,7 +74,7 @@ export function orderTags(tags: TraceKeyValuePair[], topPrefixes?: string[]) {
  * generally requires.
  */
 export default function transformTraceData(data: TraceResponse | undefined): Trace | null {
-  if (!data?.traceID) {
+  if (!data?.traceID || data?.spans.some((x) => !x.processID || !x.spanID)) {
     return null;
   }
   const traceID = data.traceID.toLowerCase();
diff --git a/public/app/features/explore/TraceView/components/utils/color-generator.tsx b/public/app/features/explore/TraceView/components/utils/color-generator.tsx
index 9a9a2b02f64..71b00e27435 100644
--- a/public/app/features/explore/TraceView/components/utils/color-generator.tsx
+++ b/public/app/features/explore/TraceView/components/utils/color-generator.tsx
@@ -46,7 +46,7 @@ class ColorGenerator {
   _getColorIndex(key: string): number {
     let i = this.cache.get(key);
     if (i == null) {
-      const hash = this.hashCode(key.toLowerCase());
+      const hash = this.hashCode(key ? key.toLowerCase() : '');
       i = Math.abs(hash % this.colorsHex.length);
 
       if (this.prevColorIndex !== undefined) {