Novu•2y ago

Novu Headless - notifications not showing for custom subscriber IDs

I have an app that accepts user's first name, last name, and first name. Then, it generates an ID similar

7sa7ejga

7sa7ejga

7sa7ejga

7sa7ejga which is also used to create the user's Subscriber ID immediately after signing in.

Now, I'm trying to fetch the user's notifications via Novu Headless but it's empty but it's showing on my Novu Activity Dashboard.

Here is the code snippet for fetching the notifications:

    const fetchNotifications = useCallback(() => {
        const headlessService = headlessServiceRef.current;
        if (!headlessService) return;
        headlessService.fetchNotifications({
            listener: ({ data, error, isError, isFetching, isLoading, status }) => {
             console.log({ data, error, isError, isFetching, isLoading, status });
            },
            onSuccess: (response: IPaginatedResponse<IMessage>) => {
                console.log({
                    notifications: response,
                });
                setNotifications(response.data);
            },
            page: 1, // page number to be fetched
        });
    }, []);


    useEffect(() => {
        const headlessService = new HeadlessService({
            applicationIdentifier: process.env.NEXT_PUBLIC_NOVU_APP_ID!,
            subscriberId: localStorage.getItem("subscriberId")!,
        });
        headlessService.initializeSession({
            listener: (res: FetchResult<ISession>) => {
                headlessServiceRef.current = headlessService;
                console.log(res);
            },
            onSuccess: (session: ISession) => {
                fetchNotifications();
            },
            onError: (error) => {
                console.error(error);
            },
        });
    }, [fetchNotifications]);

    const fetchNotifications = useCallback(() => {
        const headlessService = headlessServiceRef.current;
        if (!headlessService) return;
        headlessService.fetchNotifications({
            listener: ({ data, error, isError, isFetching, isLoading, status }) => {
             console.log({ data, error, isError, isFetching, isLoading, status });
            },
            onSuccess: (response: IPaginatedResponse<IMessage>) => {
                console.log({
                    notifications: response,
                });
                setNotifications(response.data);
            },
            page: 1, // page number to be fetched
        });
    }, []);


    useEffect(() => {
        const headlessService = new HeadlessService({
            applicationIdentifier: process.env.NEXT_PUBLIC_NOVU_APP_ID!,
            subscriberId: localStorage.getItem("subscriberId")!,
        });
        headlessService.initializeSession({
            listener: (res: FetchResult<ISession>) => {
                headlessServiceRef.current = headlessService;
                console.log(res);
            },
            onSuccess: (session: ISession) => {
                fetchNotifications();
            },
            onError: (error) => {
                console.error(error);
            },
        });
    }, [fetchNotifications]);

    const fetchNotifications = useCallback(() => {
        const headlessService = headlessServiceRef.current;
        if (!headlessService) return;
        headlessService.fetchNotifications({
            listener: ({ data, error, isError, isFetching, isLoading, status }) => {
             console.log({ data, error, isError, isFetching, isLoading, status });
            },
            onSuccess: (response: IPaginatedResponse<IMessage>) => {
                console.log({
                    notifications: response,
                });
                setNotifications(response.data);
            },
            page: 1, // page number to be fetched
        });
    }, []);


    useEffect(() => {
        const headlessService = new HeadlessService({
            applicationIdentifier: process.env.NEXT_PUBLIC_NOVU_APP_ID!,
            subscriberId: localStorage.getItem("subscriberId")!,
        });
        headlessService.initializeSession({
            listener: (res: FetchResult<ISession>) => {
                headlessServiceRef.current = headlessService;
                console.log(res);
            },
            onSuccess: (session: ISession) => {
                fetchNotifications();
            },
            onError: (error) => {
                console.error(error);
            },
        });
    }, [fetchNotifications]);

    const fetchNotifications = useCallback(() => {
        const headlessService = headlessServiceRef.current;
        if (!headlessService) return;
        headlessService.fetchNotifications({
            listener: ({ data, error, isError, isFetching, isLoading, status }) => {
             console.log({ data, error, isError, isFetching, isLoading, status });
            },
            onSuccess: (response: IPaginatedResponse<IMessage>) => {
                console.log({
                    notifications: response,
                });
                setNotifications(response.data);
            },
            page: 1, // page number to be fetched
        });
    }, []);


    useEffect(() => {
        const headlessService = new HeadlessService({
            applicationIdentifier: process.env.NEXT_PUBLIC_NOVU_APP_ID!,
            subscriberId: localStorage.getItem("subscriberId")!,
        });
        headlessService.initializeSession({
            listener: (res: FetchResult<ISession>) => {
                headlessServiceRef.current = headlessService;
                console.log(res);
            },
            onSuccess: (session: ISession) => {
                fetchNotifications();
            },
            onError: (error) => {
                console.error(error);
            },
        });
    }, [fetchNotifications]);

Ask Inkeep•6/19/24, 11:32 AM

Hi @David

, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.

Ask Inkeep•6/19/24, 11:33 AM

-----------------------------
While I generate an answer, here are some sources that might be helpful:

Headless API Reference
Get Started
How to use Headless Notification Center
API Reference
-----------------------------

Ask Inkeep•6/19/24, 11:33 AM

Answer

Based on the code snippet and the issue you're experiencing with fetching notifications using Novu Headless for custom subscriber IDs, it looks like you're properly initializing the session and attempting to fetch notifications. If notifications are visible in the Novu Activity Dashboard but not showing up when fetching via the Headless API, here are a few potential issues to check:

Subscriber ID Match: Ensure that the subscriberIdsubscriberId used in the HeadlessServiceHeadlessService initialization matches exactly the Subscriber ID for which notifications are intended. Any discrepancy, even minor, would result in fetching no notifications because the Headless API fetches notifications specifically for the provided subscriberIdsubscriberId.
Session Initialization: The session initialization seems to be correct. However, make sure that the applicationIdentifierapplicationIdentifier and subscriberIdsubscriberId are correctly fetched and not
```
null
```
```
null
```
or
```
undefined
```
```
undefined
```
. A common issue could be reading from localStoragelocalStorage before it's set, especially if this code runs immediately upon user login.
Environment Variables: Verify that process.env.NEXT_PUBLIC_NOVU_APP_IDprocess.env.NEXT_PUBLIC_NOVU_APP_ID is correctly set and accessible within the environment where your application is running. Environment variables not being properly set can lead to issues during the initialization of the HeadlessServiceHeadlessService.
Error Handling: Your current implementation logs errors to the console. Check the console for any errors that might indicate why the notifications are not being fetched. The onErroronError callback in both initializeSessioninitializeSession and fetchNotificationsfetchNotifications should provide insight into any issues occurring during these processes.
Permissions and Configuration: Ensure that the subscriber ID has the correct permissions and is configured to receive notifications within the Novu dashboard settings. If there are misconfigurations in the

Ask Inkeep•6/19/24, 11:33 AM

notification settings for the subscriber or the application, it could lead to issues fetching notifications.

Correct Use of useCallbackuseCallback and useEffectuseEffect Hooks: Your usage of useCallbackuseCallback and useEffectuseEffect seems appropriate, but double-check that the dependency array for useCallbackuseCallback and any other hook is correctly set up to trigger the desired behavior in your React component's lifecycle.
Check for Successful Session Initialization: Before calling fetchNotificationsfetchNotifications, ensure that the session has been successfully initialized. Your code does initiate fetching notifications upon successful session initialization, but it's worth double-checking that the session is indeed being established as expected.
API Version and Documentation: Ensure you're using a version of the Novu Headless package that matches the documentation you're following. The Novu ecosystem is actively developed, and methods or their signatures might change between versions.

If after checking these areas the issue persists, consider reaching out to Novu's support or community forums with specifics about your implementation, as there might be configuration or account-specific details affecting the behavior (1) (2) .

Sources
[1] Get Started
[2] How to use Headless Notification Center

Pawan Jain•6/19/24, 11:46 AM

@David

As per your above code, when do you call fetchNotificationsfetchNotifications function?

PPawan Jain @David 😎 As per your above code, when do you call `fetchNotifications` functi...

David 😎OP•6/19/24, 11:48 AM

When the page load. and I send a new notification when the users submits a form

Pawan Jain•6/19/24, 11:49 AM

Do you see any error in console tab or network tab?

David 😎OP•6/19/24, 11:50 AM

No, it just fetches an empty array.

Pawan Jain•6/19/24, 11:50 AM

I am suspecting, session is not yet initialized

PPawan Jain I am suspecting, session is not yet initialized

David 😎OP•6/19/24, 11:54 AM

It has or does Subscriber ID have a desired length?

Pawan Jain•6/19/24, 12:04 PM

can you check if appId and subscriberid combination is correct?

PPawan Jain can you check if appId and subscriberid combination is correct?

David 😎OP•6/19/24, 12:27 PM

yes, it's correct.

Novu_Bot•6/19/24, 12:27 PM

@David

, you just advanced to level 5!

PPawan Jain can you check if appId and subscriberid combination is correct?

David 😎OP•6/19/24, 7:01 PM

@Pawan Jain It's showing in the notification center but not showing in the notification API call.
I even tried hard-coding the credentials but the API call is not returning the recent notifications.

Novu Headless - notifications not showing for custom subscriber IDs

Answer

Similar Threads

Similar Threads

Answer

Similar Threads