[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]

Seguimiento de eventos con Mixpanel y NodeJs, ¡La magia del Callback en Async scope!

No voy a explicar qué es Mixpanel y por qué decidimos usarlo en
supermanos, el enfoque aquí está en un desafío que enfrentamos y cómo lo abordamos.

[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

Caso de uso:

Hemos estado trabajando en la integración de un servicio de seguimiento de eventos a una de nuestras API de back-end, para que podamos tener una visión clara del comportamiento y la interacción de nuestros usuarios con nuestra plataforma, para que podamos priorizar las funciones y administrar las iteraciones de construcción de una manera más amigable para el usuario. manera orientada, y nuestra integración de elección es Mixpanel.

El desafío que estamos tratando de resolver:

Las funciones de la biblioteca Mixpanel NodeJs se construyen como una devolución de llamada (callback) y nuestra base de código es una aplicación ExpressJs encapsulada en un AWS Lambda usando el marco sin servidor y en nuestra base de código estamos usando async/await, y el La pregunta en ese momento era cómo integrar el comportamiento de devolución de llamada dentro de una función async/await.

Lo que hicimos primero 👇

// Customer Model
// path: /src/models/customer-model.js

// database interface instance
// we are using knex.js -> https://knexjs.org
const db = require('../configs/database-configs.js');

const mixpanel = require('../services/mixpanel-service.js');

class Customer extends User {
  constructor(fullName, email, address, brand) {
    super(fullName, email, address);
  }

  async create() {
    const { fullName, email, address, brand } = this;
    try {
      await db('customers').insert({ fullName, email, address, brand });
      await mixpanel.track('customer creation succeed', { fullName, email, address, brand });
    } catch (error) {
      await mixpanel.track('customer creation failed', { fullName, email, address, brand });
    }
  }
}

// Mixpanel Service
// path: /src/services/mixpanel-service.js

const mixpanel = require('mixpanel').init('<TOKEN>');

// We tried to wrap it with async/await to consist the
// codebase style and to avoid callback hell.
async function track(event, properties) {
  await mixpanel.track(event, properties)
}

module.exports = { track

El código anterior no hizo nada en términos de seguimiento, no arrojó ningún error y la función no se comportó como una función async/await incluso después de que la envolviéramos con async/await, porque la ejecución no está regida por el contenedor.

Como secuencia de ejecución de código y sintaxis, no hay nada malo, pero el comportamiento de ejecución del código no coincide con el comportamiento esperado.

La solución que encontramos:

La solución simple y directa que consideramos fue usar promisify para obligar a mixpanel-service a adaptar el comportamiento async/await (promesa de devolución) envolviendo la función de seguimiento con promisify para cambiarla a una función que devuelve una promesa.

// Mixpanel Service
// path: /src/services/mixpanel-service.js
const util = require('util');
const mixpanel = require('mixpanel').init('<TOKEN>');
const trackAsync = util.promisify(mixpanel.track);
// We tried to wrap it with async/await to consist the
// codebase style and to avoid callback hell.
async function track(event, properties) {
 await trackAsync(event, properties)
}
module.exports = { track }

El código anterior coincidió con el resultado esperado y registró los eventos dentro del tablero de nuestro proyecto Mixpanel.

Notas para llevar:

– Lea la biblioteca que desea usar en su proyecto y comprenda su comportamiento e implementaciones.

– Envolver la función basada en la devolución de llamada en el bloque async/await no cambiará el comportamiento de esa función si no hay una implementación prometedora para esa función

– Aprender haciendo e investigando es un gran placer.

Si tiene alguna inquietud o comentario, soy todo oídos. 👂

¡Saludos!

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]

Diego Pacheco

Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Mixpanel y NodeJs: Seguimiento de eventos