Enhancing User Experience; A Guide to Error Tracking with Custom Events and Custom Props

Introducing Custom Events

Modern web development frameworks offer a plethora of tools to monitor user interactions and system behavior. Among these, Metricalp custom events stand out as versatile instruments for tracking specific actions and occurrences within your application. Whether it's capturing clicks, form submissions, or even errors, custom events empower developers to gain deeper insights into user behavior and system performance.

Consider the scenario of error tracking. When an error occurs, it's not merely about identifying the issue but understanding its context and impact on users. Traditional error logs may provide technical details, but they often lack the crucial contextual information necessary for effective resolution. This is where custom events shine.

Tracking Errors with Custom Events and Custom Props

Imagine a scenario where a user encounters an error while using your application. Instead of relying solely on generic error logs, you can implement a custom event specifically tailored to capture these occurrences. Let's delve into how this process unfolds:

Firstly, in Metricalp you can allow all custom events or you can specify the allowed ones in Tracker Settings.

The beauty of Metricalp is that you can have different custom props per each custom event. You can also define custom prop aliases per custom events in Tracker Settings.

You can get more info from about custom prop aliases and custom events from related documentation

Now, let's learn how can we use these custom events and props for error tracking step by step.

Event Definition: Define a custom event named "error" within your tracking system. This event will serve as a beacon for capturing error occurrences across your application.

If you allowed all custom events in Tracker Settings, then you do not need to define it anywhere. You can start to produce any event (like "error") from day zero. But if you restricted allowed events (like our example), then you need to allow "error" event in Tracker Settings.

Error Context: Attach custom properties to the "error" event to provide context and detail. These properties could include "error_title" to describe the nature of the error and "error_message" to provide additional information or guidance.

As we described in documentation, you can attach custom props always like "{ type:"error", custom_prop1: "my_value" }". But we know that custom_prop1 is not... readable. The beauty of Metricalp is, you can define different custom prop aliases per custom events. Then you can use these aliases while producing events: "{ type:"error", error_title: "my_value" }"

We will now define also custom prop aliases for our error custom event "error"

We defined "error_title", "error_message", "user_id", "env", "app_version" aliases for our "error" event.

Now it is more readable and valuable to analyze. How awesome right?

Now, we will produce our custom event when we catch an error. There are different ways to produce custom events. If you use React or NextJS you can use method from integration library as described in docs. If you are using pure integration then check custom event documentation.

try {
    // ....
  } catch (err) {
    window.metricalp.event({
      type: 'error',
      error_title: 'Register Attempt Error',
      error_message: err.message,
      user_id: user.id,
      env: 'production',
      app_version: '1.0.0',
    });
  }

That's all. Now we started to collecting error logs in proper way. Let's check our dashboard.

We have our errors hoorray. I know having errors not good but if we can catch them, we can fix them. Now when we select our error event, we can see custom props like user_id etc.

But not just that, we have all our standard data like user browser, operating_system etc. So, now we have all details about error. We can smoothly detect and fix it.

Let say we catched a 'xxx is not a function' error in custom prop. Then we may just select that custom prop as filter and we can directly look for browser, device of users for that error. If let say 95%+ is Safari browser then bang, we got the bug. It is a browser compatibility issue.

You can find root of any error with Metricalp. Is it about operating system? Mobile device or country of user? All cases can be analysed in Metricalp.

Said it, Metricalp is not just an analytics tool. We used it in here as an error catcher. It is really great to have robust, secure systems. But not limited with this, you can custom events and props for any scenarios. For example you can use it for your A/B tests. You can use it conversion tracking. It is up to your needs and your imagination. Metricalp removes borders.

Now you learned about how can you use Metricalp to catch and track errors in proper way.