How to run this example for server side:

1. Install all dependencies:

npm install

2. Add your Moesif Application Id to utils/applyMoesifMiddleware.js

Your Moesif Application Id can be found in the Moesif Portal. After signing up for a Moesif account, your Moesif Application Id will be displayed during the onboarding steps.

You can always find your Moesif Application Id at any time by logging into the Moesif Portal, click on the bottom-left menu, and clicking Installation.

const moesifOptions = {
  isNextJsAppRouter: true, // this flag let moesif-nodejs know to use the adaptor for the new handlers.
  applicationId:
    process.env.MOESIF_APPLICATION_ID || "Your Moesif Application Id",
  ...
}

Note:

• Next.js 14 with App Router are no longer compatible with Node/express style handlers like function(req, res, next), thus the flag isNextJsAppRouter will tell the moesif-nodejs to adapt to the NextJs.
• The applyMoesifMiddleware is a function that can be applied to any of the new style handler.
• Note: while Next.Js introduced the router level middleware, but with that Middleware, it can intercept and modify requests before they reach the route handler, but it doesn't have direct access to the response body generated by the route handler. For Moesif, where vast majority of customers wants the deep body analytics, we use applyMoesifMiddleware on to any handler you needed as in the example file /src/app/api/timetable/routes.js.

1. Run the example, it will listen on port 3000.

npm run dev

4. Send some requests to some of the routes and verify that the API calls are captured in your Moesif account.

curl --location --request GET 'curl http://localhost:3000/api/timetable' \
--header 'Content-Type: application/json' \
--header 'my-user-id: my-user-id' \
--header 'my-company-id: my-company-id'

Client Side user tracking

For client side, moesif-browser-js can not be used in server side rendering. It must be loaded and inited on the browser side. You can do this by using dynamic import, and do it in useEffect or componentDidMount. In this example, we init moesif-browser-js in the /common/userTracking.

Add your PUBLISHABLE application id to /common/userTracking

moesif.init({
  applicationId: "Your PUBLISHABLE Moesif Application Id",
});

Please use Publishable Application Id for anything in the browser, you can find it in your API keys page of Moesif.

In the browser, assign moesif to the windows global space, so anywhere on the client side, you can reference window.moesif to track any user actions or trigger identifyUser (usually when user sign up or logs in).

Try it out by go to https://localhost:3000 in a browser.