cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Any experience on installation BRUM for Single-SPA microfrontend app

Gong.Li
Discoverer

Hello

A customer has a single-spa microfrontend app (https://single-spa.js.org/docs/getting-started-overview). After installing Brum, it will report an error.

See the below screenshot. Is there any suggestion for this case?  thanks 

截屏2022-07-09 10.04.42.png

1 REPLY 1

Xiangning.Mao
AppDynamics Team

Hi Gong,

Thanks for posting question to the community!

According to your screenshot, it seems that you didn't set up BRUM javascript agent correctly.
I made a Single-SPA microfrontend app demo according to the qiankun/examples and I will share a template containing BRUM with you.

Here is the template of my main app of Single-SPA(index.html).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>QianKun Example</title>
</head>
<script charset='UTF-8'>
  window['adrum-start-time'] = new Date().getTime();
  (function(config){
      config.appKey = '<your appKey>';
      config.adrumExtUrlHttp = '<your adrumExtUrlHttp>';
      config.adrumExtUrlHttps = '<your adrumExtUrlHttps>';
      config.beaconUrlHttp = '<your beaconUrlHttp>';
      config.beaconUrlHttps = '<your beaconUrlHttps>';
      config.xd = {enable : false};
      config.spa = {"spa2": true};
  })(window['adrum-config'] || (window['adrum-config'] = {}));
  </script>
<body>
  <div class="mainapp">
    <header class="mainapp-header">
      <h1>QianKun</h1>
    </header>
    <div class="mainapp-main">
      <ul class="mainapp-sidemenu">
        <li onclick="push('/react16')">React16</li>
        <li onclick="push('/react15')">React15</li>
        <li onclick="push('/vue')">Vue</li>
        <li onclick="push('/vue3')">Vue3</li>
        <li onclick="push('/angular9')">Angular9</li>
        <li onclick="push('/purehtml')">Purehtml</li>
      </ul>
      <main id="subapp-container"></main>
    </div>
  </div>
  <script>
    function push(subapp) { history.pushState(null, subapp, subapp) }
  </script>
  <script src='<your javaccript agent files url>'></script>
</body>
</html>

Here is the monitoring results.
(Attached figure)

If you want to know more about BRUM javascript agent, please refer to the document below.

https://docs.appdynamics.com/appd/22.x/22.4/en/end-user-monitoring/browser-monitoring/browser-real-u...

Hope this answer helps!


Best regards,
Mao