Intermittent Server Action Execution Issues

This post has been translated by Jetbrains's Coding Agent Junie Please let me know if there are any mistranslations!

Problem

When executing Mixpanel tracking code on the server side as shown below, events were being recorded intermittently.

typescript

mixpanel.track(event, { distinct_id: userId, properties }, err => {
  if (err) {
    reject(err);
  } else {
    resolve("success");
  }
});

All events were recorded properly in the local environment, but in the Vercel deployment environment, only some events were being recorded.

Cause

Before looking at the cause, let's understand Vercel Functions. Vercel provides a feature called Vercel Functions for environments deployed to Vercel.

To briefly explain Vercel Functions, all code execution on the server side in Vercel-deployed environments runs under Vercel's infrastructure. In other words, FaaS (Function as a Service) is applied.

What is FaaS?

FaaS stands for Function as a Service, which is one way to implement serverless computing. Here, Function refers to the same function we use in development, and the concept is to upload these functions to cloud services and call them only when needed.
In other words, FaaS allows you to execute functions without having to develop a server.
Thanks to this feature of Vercel, we can use API Routes or SSR without having to make specific server settings.

Note

Vercel's Serverless architecture runs through AWS Lambda.

The problematic code was also set up as a Server Action and executed on the server. Since Vercel operates based on serverless, the code was registered as a serverless function.

However, serverless functions can have their processes terminated during execution, and in this case, the function could terminate before asynchronous tasks are completed. In other words, the callback function was not being executed, so events were not being properly transmitted.

Solution

Therefore, we wrapped the code in a Promise as shown below, and all events were properly recorded.

typescript

return new Promise((resolve, reject) => {
    mixpanel.track(event, { distinct_id: userId, properties }, (err) => {
      if (err) {
        reject(err)
      } else {
        resolve('success')
      }
    })
  })

Why Execute Tracking Code on the Server Side

So why not execute tracking code like mixpanel.track on the client side?

Data Integrity: When sending events directly from the client, events may be missed due to user browser settings (e.g., ad blockers) or network issues. Executing on the server side reduces these external factors and enables more reliable data collection.
Integration with Business Logic: When tracking events are closely related to server-side logic (e.g., payment processing, user authentication), it's more natural and efficient to handle them directly on the server. For example, to record an event after payment completion, it's appropriate to check payment success on the server and then track it.
Performance Optimization: Processing tracking requests on the client can increase page load time due to additional network calls. Processing on the server side can reduce client burden and improve user experience.

For these reasons, executing on the server side rather than the client can provide more accurate and reliable metrics.

References