diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx
index 28991ebfa0..60778a1337 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx
@@ -151,6 +151,35 @@ describe("GuardrailViewer", () => {
expect(screen.queryByText(/Raw Bedrock Guardrail Response/)).not.toBeInTheDocument();
});
+ it("renders without crashing when guardrail_mode is null", () => {
+ const data = makeGuardrailInformation({ guardrail_mode: null });
+ renderWithProviders();
+
+ expect(screen.getByText("Guardrails & Policy Compliance")).toBeInTheDocument();
+ // Null mode should display as dash
+ expect(screen.getByText("—")).toBeInTheDocument();
+ });
+
+ it("renders without crashing when guardrail_mode is an object", () => {
+ const data = makeGuardrailInformation({
+ guardrail_mode: { default: "pre_call", tags: {} },
+ });
+ renderWithProviders();
+
+ expect(screen.getByText("Guardrails & Policy Compliance")).toBeInTheDocument();
+ expect(screen.getByText("PRE-CALL")).toBeInTheDocument();
+ });
+
+ it("renders without crashing when guardrail_mode is an array", () => {
+ const data = makeGuardrailInformation({
+ guardrail_mode: ["pre_call", "post_call"],
+ });
+ renderWithProviders();
+
+ expect(screen.getByText("Guardrails & Policy Compliance")).toBeInTheDocument();
+ expect(screen.getByText("PRE-CALL")).toBeInTheDocument();
+ });
+
it("integration: renders with real Bedrock details without mocks", async () => {
const user = userEvent.setup();
const data = makeGuardrailInformation({
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
index 1ab4744b89..0c37b70c8b 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
@@ -40,7 +40,7 @@ interface GuardrailInformation {
duration: number;
end_time: number;
start_time: number;
- guardrail_mode: string;
+ guardrail_mode: string | string[] | Record | null;
guardrail_name: string;
guardrail_status: string;
guardrail_response: GuardrailEntity[] | BedrockGuardrailResponse | any;
@@ -77,9 +77,25 @@ const PROVIDERS_WITH_CUSTOM_RENDERERS = new Set([
"litellm_content_filter",
]);
-const formatMode = (mode: unknown): string => {
- if (mode == null || mode === "") return "—";
- const s = typeof mode === "string" ? mode : String(mode);
+/**
+ * Extracts a plain string from guardrail_mode, which may be a string,
+ * an array of strings, an object with a "default" key, or null.
+ */
+const resolveMode = (mode: GuardrailInformation["guardrail_mode"]): string | null => {
+ if (mode == null) return null;
+ if (typeof mode === "string") return mode;
+ if (Array.isArray(mode)) return mode[0] ?? null;
+ if (typeof mode === "object" && "default" in mode) {
+ const def = mode.default;
+ if (typeof def === "string") return def;
+ if (Array.isArray(def)) return def[0] ?? null;
+ }
+ return null;
+};
+
+const formatMode = (mode: GuardrailInformation["guardrail_mode"]): string => {
+ const s = resolveMode(mode);
+ if (s == null || s === "") return "—";
return s.replace(/_/g, "-").toUpperCase();
};
@@ -302,9 +318,12 @@ const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => {
items.push({ type: "request", label: "Request received", offsetMs: 0 });
// Pre-call guardrails
- const preCalls = sorted.filter((e) => e.guardrail_mode === "pre_call");
- const postCalls = sorted.filter((e) => e.guardrail_mode === "post_call" || e.guardrail_mode === "logging_only");
- const duringCalls = sorted.filter((e) => e.guardrail_mode === "during_call");
+ const preCalls = sorted.filter((e) => resolveMode(e.guardrail_mode) === "pre_call");
+ const postCalls = sorted.filter((e) => {
+ const m = resolveMode(e.guardrail_mode);
+ return m === "post_call" || m === "logging_only";
+ });
+ const duringCalls = sorted.filter((e) => resolveMode(e.guardrail_mode) === "during_call");
for (const e of preCalls) {
const offsetMs = Math.round((e.end_time - baseTime) * 1000);
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/__tests__/fixtures.ts b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/__tests__/fixtures.ts
index 3c78aacf85..fc487b04d7 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/__tests__/fixtures.ts
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/__tests__/fixtures.ts
@@ -23,7 +23,7 @@ export interface GuardrailInformation {
duration: number;
end_time: number;
start_time: number;
- guardrail_mode: string;
+ guardrail_mode: string | string[] | Record | null;
guardrail_name: string;
guardrail_status: string;
guardrail_response: GuardrailEntity[] | BedrockGuardrailResponse;