fix: prevent React error #31 when rendering workflow output objects

[wingding12]

Summary

add safelyRenderValue utility function to handle objects, arrays, and other non-primitive types that could be rendered directly in React components

applied to:

• queued-messages.tsx: msg.content
• notifications.tsx: notification.message
• todo-list.tsx: todo.content

Fixes #2725

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

no need for testing, just needed to correctly handle all value types

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

@wingding12 is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR introduces a defensive utility function safelyRenderValue to prevent React error #31 when rendering non-string values. The function was applied to three UI components (notifications, queued messages, and todo list) that previously attempted to render values directly without type checking.

Changes:

• Added safelyRenderValue utility in formatting.ts that safely converts any value to a string
• Applied the utility to notification.message, msg.content, and todo.content in their respective components
• The function handles primitives, objects (via JSON.stringify), and edge cases (null/undefined, circular references)

Observations:

• The type definitions (Notification, QueuedMessage, TodoItem) already declare these fields as string, so this is a runtime safety fix for cases where the type system is bypassed
• While the fix prevents crashes, JSON-stringified objects like {"text":"hello","type":"text"} may not provide the best user experience
• Consider extracting the text property from structured outputs instead of displaying raw JSON

Confidence Score: 4/5

• This PR is safe to merge with minimal risk - it adds defensive runtime checks without altering existing logic
• The change is a straightforward defensive fix that prevents crashes. The implementation is correct and won't break existing functionality. Score is 4 instead of 5 due to a potential UX improvement opportunity (displaying {text: "foo"} as "foo" rather than JSON)
• No files require special attention - all changes are straightforward defensive wrappers

Important Files Changed

Filename	Overview
apps/sim/lib/core/utils/formatting.ts	Added safelyRenderValue utility function to safely convert values to strings for React rendering, preventing error #31
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx	Applied safelyRenderValue to notification.message to prevent rendering objects directly in React
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/queued-messages/queued-messages.tsx	Applied safelyRenderValue to msg.content to safely render message content as string
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx	Applied safelyRenderValue to todo.content to ensure safe rendering of todo items

Sequence Diagram

sequenceDiagram
    participant WF as Workflow/Node Output
    participant Store as Store (notifications/copilot)
    participant Component as UI Component
    participant Util as safelyRenderValue()
    participant React as React Renderer

    Note over WF,React: Before PR (causes crash)
    WF->>Store: output = {text: "hello", type: "text"}
    Store->>Component: notification.message = object
    Component->>React: render object directly
    React-->>Component: ❌ Error #31: Objects are not valid as React child

    Note over WF,React: After PR (safe rendering)
    WF->>Store: output = {text: "hello", type: "text"}
    Store->>Component: notification.message = object
    Component->>Util: safelyRenderValue(object)
    Util->>Util: JSON.stringify(object)
    Util-->>Component: '{"text":"hello","type":"text"}'
    Component->>React: render string
    React-->>Component: ✅ Renders successfully

Loading

[greptile-apps]

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[wingding12]

sorry for the messy commits, i had a gpg and email mismatch i've been racking my head to fix. hope they can be squashed cleanly!