Monitoring Angular, React and VueJs with Splunk Browser RUM

UXM support the Splunk Browser RUM agent and the OTEL data it send's back to the UXM Heavy Forwarder.

Add agent

See guide on how to add and install agents at https://docs.splunk.com/Observability/gdi/get-data-in/rum/browser/instrument-single-page-applications.html

• realm: FQDN to Heavy Forwarder with HTTPs certificate enabled append /data/browser/splunk/v1/rum, example: https://dev-emea-hf.uxmapp.com/data/browser/splunk/v1/rum
• rumAccessToken: Not used applicationName is mapped via Web Agent to UXM Application
• applicationName: Key for agent which is mapped to UXM Application
• version: Version of application
• deploymentEnvironment: environment name, examples: prod, test, dev, qa

React example:

splunk-rum.ts - Configuration with url to send collected data to

SplunkRum.init({
   beaconUrl: 'https://dev-emea-hf.uxmapp.com/data/browser/splunk/v1/rum',
   rumAuth: '',
   app: 'angular-components-test',
   version: '1.0.0',
   environment: 'test'
});

main.ts - Import of configuration

import './splunk-rum';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

app/app.module.ts - Capturing of errors via ErrorHandler provider

import { AppComponent } from './app.component';
import { AstronautComponent } from './astronaut.component';
import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component';
import { CountdownTimerComponent } from './countdown-timer.component';
import { HeroChildComponent } from './hero-child.component';
import { HeroParentComponent } from './hero-parent.component';
import { MissionControlComponent } from './missioncontrol.component';
import { NameChildComponent } from './name-child.component';
import { NameParentComponent } from './name-parent.component';
import { VersionChildComponent } from './version-child.component';
import { VersionParentComponent } from './version-parent.component';
import { VoterComponent } from './voter.component';
import { VoteTakerComponent } from './votetaker.component';

class SplunkErrorHandler implements ErrorHandler {
   handleError(error: any) {
// To avoid loading issues due to content blockers
// when using the CDN version of the Browser RUM
// agent, add if (window.SplunkRum) checks around
// SplunkRum API calls
      SplunkRum.error(error, {})
   }
}

@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [
    AppComponent,
    AstronautComponent,
    CountdownLocalVarParentComponent,
    CountdownTimerComponent,
    CountdownViewChildParentComponent,
    HeroChildComponent,
    HeroParentComponent,
    MissionControlComponent,
    NameChildComponent,
    NameParentComponent,
    VersionChildComponent,
    VersionParentComponent,
    VoterComponent,
    VoteTakerComponent,
  ],
  providers: [
     {
        provide: ErrorHandler,
        useClass: SplunkErrorHandler
     }
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule {}

 

Map Web Agent Key into UXM application

Map which application the web agent should store data under at Administration -> UXM Web Agent -> Web Agents

New agents are detected hourly, press "Detect new web agents" to create discovered agents sending data to UXM immediately.

Edit the correct agent and set the application to store data under and enabled to true.

Generate traffic against monitored system to see if mapping works.