Novu•6mo 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 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]);

12 Replies

Ask Inkeep•6mo ago

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. ----------------------------- 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 ----------------------------- 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: 1. Subscriber ID Match: Ensure that the subscriberId used in the HeadlessService 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 subscriberId. 2. Session Initialization: The session initialization seems to be correct. However, make sure that the applicationIdentifier and subscriberId are correctly fetched and not null or undefined. A common issue could be reading from localStorage before it's set, especially if this code runs immediately upon user login. 3. Environment Variables: Verify that process.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 HeadlessService. 4. 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 onError callback in both initializeSession and fetchNotifications should provide insight into any issues occurring during these processes. 5. 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•6mo ago

notification settings for the subscriber or the application, it could lead to issues fetching notifications. 6. Correct Use of useCallback and useEffect Hooks: Your usage of useCallback and useEffect seems appropriate, but double-check that the dependency array for useCallback and any other hook is correctly set up to trigger the desired behavior in your React component's lifecycle. 7. Check for Successful Session Initialization: Before calling fetchNotifications, 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. 8. 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•6mo ago

@David 😎 As per your above code, when do you call fetchNotifications function?

David 😎OP•6mo ago

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

Pawan Jain•6mo ago

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

David 😎OP•6mo ago

No, it just fetches an empty array.

Pawan Jain•6mo ago

I am suspecting, session is not yet initialized

David 😎OP•6mo ago

It has or does Subscriber ID have a desired length?

Pawan Jain•6mo ago

can you check if appId and subscriberid combination is correct?

David 😎OP•6mo ago

yes, it's correct.

Novu_Bot•6mo ago

@David 😎, you just advanced to level 5!

David 😎OP•6mo ago

@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.

Gaming

Programming

Novu Headless - notifications not showing for custom subscriber IDs