🐛 Bug Report: TypeError: Cannot read properties of undefined (reading 'split') in Novu Inbox

[khaled-300]

📜 Description

When using the Novu Inbox component with @novu/js@3.11.0, a TypeError occurs when the inbox receives messages, displays unread messages, or renders normal messages. The error originates from the DefaultNotification component trying to call .split() on an undefined value, which breaks the entire inbox functionality.

Error Details

Error Message:

TypeError: Cannot read properties of undefined (reading 'split')

Stack Trace:

at index.mjs:968:38
zone.js:2316
at DefaultNotification.createRenderEffect.e [as fn] (index.mjs:7883:17)
at runComputation (dev.js:742:22)
at updateComputation (dev.js:724:3)
at createRenderEffect (dev.js:240:75)
at index.mjs:7881:5
at DefaultNotification (index.mjs:7936:3)
at dev.js:586:12
at untrack (dev.js:475:12)
at Object.fn (dev.js:582:37)

Error Location:

• File: index.mjs (line 968, column 38)
• Component: DefaultNotification
• Function: createRenderEffect

👟 Reproduction steps

1. Set up Novu Community version using Docker containers (following the community Docker Compose setup)
2. Install @novu/js@3.11.0 in your Angular application
3. Initialize the Novu Inbox component using the JS/UI library:

   import { NovuUI } from '@novu/js/ui';
   
   const novu = new NovuUI({
     options: {
       applicationIdentifier: 'YOUR_APPLICATION_IDENTIFIER',
       subscriberId: 'YOUR_SUBSCRIBER_ID',
     },
   });
   
   novu.mountComponent({
     name: 'Inbox',
     element: element,
   });

4. Configure the Novu instance to connect to your self-hosted Novu backend (running in Docker containers)
5. Open the inbox by clicking the notification bell button
6. Trigger a notification from a Novu workflow (or wait for an existing notification to be displayed)
7. The error occurs immediately when the inbox tries to render the notification

👍 Expected behavior

The inbox should:

• Display notifications without errors
• Render notification content correctly
• Handle unread/new messages properly
• Allow users to interact with notifications normally

👎 Actual Behavior with Screenshots

• The inbox opens successfully
• The inbox navbar/UI is not affected and appears normal
• No notifications are displayed at all - the error prevents notifications from rendering
• The error occurs when notifications are being rendered, blocking both new and old notifications
• The error appears in the browser console repeatedly
• The error completely blocks notification display, impacting the core inbox functionality and user experience

Novu version

Community version (self-hosted with Docker containers) - @novu/js@3.11.0

npm version

10.9.3

node version

22.18.0

📃 Provide any additional context for the Bug.

Versions Tested

• 3.11.0: ❌ Error occurs (same issue)
• 3.10.1: ❌ Error occurs (same issue)
• 3.9.0: ❌ Error occurs (tested)
• 3.8.1: ✅ No error (messages can be read successfully)
• 3.7.0: ✅ No error
• 3.5.0-rc.3: Not tested

Potential Root Cause

The error suggests that the DefaultNotification component is trying to call .split() on a value that is undefined. This could be:

1. A notification field (e.g., tags, severity, actor, content) that is expected to be a string but is undefined
2. Missing data validation before calling .split()
3. An issue with how notification data is being processed from the API response

Impact

• Severity: High - Breaks inbox functionality
• User Experience: Console errors create poor UX, may cause notification rendering issues
• Frequency: Occurs every time a notification is rendered in the inbox

Workaround

Using @novu/js@3.8.1 or @novu/js@3.7.0 avoids the error and allows the inbox to function correctly.

This suggests the error was introduced in version 3.8.2 or later (between 3.8.1 and 3.10.1).

Screenshots

Please refer to the attached screenshots showing:

1. The error in the browser console
2. The inbox UI with notifications
3. The stack trace details

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to submit PR?

None

[linear]

NV-6854

[aniketsingh1023]

Assign Me this