Only first request in event shows up under the event

[Jonne]

Hi, I have a click event that is asynchronous and contains multiple requests. A transaction shows up in the APM dashboard with only the first request shown as a child transaction. The other requests are logged as individual transactions.

The following request is send to Elastic APM

{
  "metadata": {
    "service": {
      "name": "frontend",
      "agent": {
        "name": "rum-js",
        "version": "5.16.0"
      },
      "language": {
        "name": "javascript"
      },
      "environment": "development"
    }
  }
}
{
  "transaction": {
    "id": "77ef5c53927e31a6",
    "trace_id": "0f8ed3040e5fbc382cd2b92c777c1739",
    "name": "Click - button",
    "type": "user-interaction",
    "duration": 172,
    "context": {
      "page": {
        "referer": "",
        "url": "http://localhost:3000/?_elastic_inspect_beacon_=true"
      }
    },
    "marks": {
      "agent": {}
    },
    "span_count": {
      "started": 1
    },
    "sampled": true,
    "sample_rate": 1
  }
}
{
  "span": {
    "id": "5b639d216a4f6211",
    "transaction_id": "77ef5c53927e31a6",
    "parent_id": "77ef5c53927e31a6",
    "trace_id": "0f8ed3040e5fbc382cd2b92c777c1739",
    "name": "POST https://myapi/api/orders",
    "type": "external",
    "subtype": "http",
    "start": 2,
    "duration": 170,
    "context": {
      "http": {
        "method": "POST",
        "url": "https://myapi/api/orders",
        "status_code": 201
      },
      "destination": {
        "service": {
          "resource": "myapi",
          "name": "N/A",
          "type": "N/A"
        },
        "address": "myapi",
        "port": 443
      }
    },
    "outcome": "success",
    "sample_rate": 1
  }
}
{
  "transaction": {
    "id": "e886f45c5bc5e1ad",
    "trace_id": "1b7978a1793ee5a2e8087c2c222275e4",
    "name": "POST https://myapi/api/line_items",
    "type": "http-request",
    "duration": 298,
    "context": {
      "page": {
        "referer": "",
        "url": "http://localhost:3000/?_elastic_inspect_beacon_=true"
      }
    },
    "marks": {
      "agent": {}
    },
    "span_count": {
      "started": 1
    },
    "sampled": true,
    "sample_rate": 1,
    "outcome": "success"
  }
}
{
  "span": {
    "id": "e3e26104843626a4",
    "transaction_id": "e886f45c5bc5e1ad",
    "parent_id": "e886f45c5bc5e1ad",
    "trace_id": "1b7978a1793ee5a2e8087c2c222275e4",
    "name": "POST https://myapi/api/line_items",
    "type": "external",
    "subtype": "http",
    "start": 0,
    "duration": 297,
    "context": {
      "http": {
        "method": "POST",
        "url": "https://myapi/api/line_items",
        "status_code": 201
      },
      "destination": {
        "service": {
          "resource": "myapi",
          "name": "N/A",
          "type": "N/A"
        },
        "address": "myapi",
        "port": 443
      }
    },
    "outcome": "success",
    "sample_rate": 1
  }
}

The click event handler looks like this:

  async function addToCart() {
    const order = await myapi.orders.create({

    });

    await myapi.line_items.create({
      sku_code: 'AWS-001',
      order: order,
      quantity: 1,
    })
}

I was expecting to see both request spans / transactions under the click transaction. But the first request seems to end the click transaction.

Is this a bug or am I missing something?

[Jonne]

I created a support ticket and they told me to use the following code, because the transaction is automatically ended after the first network span ends:

const activeTransaction = apm.getCurrentTransaction();
// @ts-ignore
activeTransaction?.block(true);

This works, but the block function is not included in the TypeScript definitions. Can you please add this?