Feature Request - Rum Agent Integration

[wylde780]

Thanks for this work to highlight synthetics but I'm trying to also showcase RUM metrics for these synthetic heartbeat tests. I'm new to nodejs and react would you be able to recommend the best way to integration the RUM agent?

I tried https://www.elastic.co/blog/performing-real-user-monitoring-rum-with-elastic-apm as it suggests by putting rum.js in the pages/ director but yarn gets upset about this.

Thanks in advance

[vigneshshanmugam]

@wylde780 You can add this piece of code to Header.js - https://github.com/vigneshshanmugam/synthetics-ecommerce-demo/blob/main/components/Header.js

import React from "react";
import Head from "next/head";
import Link from "next/link";
import Cookies from "js-cookie";
+import { init } from "@elastic/apm-rum";

+init({
+ serviceName: "frontend-rum",
+  breakdownMetrics: true
+});

const Header = ({}) => {
  if (!Cookies.get("local_user_id")) {
    Cookies.set("local_user_id", performance.now() + "-" + Date.now());
  }

Do yarn install @elastic/apm-rum and yarn dev to test them locally. I might probably integrate them sooner, will leave the issue open so we can address this request.