Subchapter 38.3
references/rum-angular.mdMarkdown2 KBView on GitHub
Require Angular 15 through 22 and RxJS 7 or later. If Angular routing is used, require a matching supported @angular/router major. Stop without editing when these prerequisites are unmet.
Install @datadog/browser-rum and @datadog/browser-rum-angular at the same exact version.
Initialize at module scope before bootstrapApplication(...) or platformBrowserDynamic().bootstrapModule(...):
import { datadogRum } from '@datadog/browser-rum'
import { angularPlugin } from '@datadog/browser-rum-angular'
datadogRum.init({
// ...canonical fields from rum-core.md...
plugins: [angularPlugin()],
})Detect existing Angular error handling before editing.
ErrorHandler, import and register provideDatadogErrorHandler() in the existing standalone bootstrap providers or NgModule providers.ErrorHandler, preserve it and call addAngularError(error) from its existing handleError method. Do not replace it with provideDatadogErrorHandler().For standalone bootstrap:
bootstrapApplication(AppComponent, {
providers: [provideDatadogErrorHandler()],
})For an NgModule, add the provider to that module’s existing providers array.
Enable router tracking only when the app actually configures Angular Router through provideRouter, RouterModule.forRoot, or equivalent active setup.
Use one plugin instance and one provider:
import { angularPlugin, provideDatadogRouter } from '@datadog/browser-rum-angular'
datadogRum.init({
// ...canonical fields...
plugins: [angularPlugin({ router: true })],
})Add provideDatadogRouter() to the existing standalone or NgModule providers. Do not introduce Angular Router to an application that does not already use it.