🐛 API calls are not logged with withFetch() API in newer versions of Angular

[gokberknur]

if you configure an angular app with new "withFetch()" flag.

https://angular.dev/api/common/http/withFetch

api calls are not logged in datadogRUM.

we updated our application to angular v18 and started to use withFetch() flag in Angular's httpClient. We noticed that our API calls are not being logged anymore in datadog RUM.

To reproduce this issue you can try this sample-repo with fetch flag and without it in Angular HttpClient, then check the logs from RUM panel.
https://github.com/gokberknur/datadogRumNg18/blob/main/main.ts

[N-Boutaib]

Hello @gokberknur,

Thanks for reaching out. Indeed, in the example you provided, when forcing Angular to use fetch by default instead of XHR, the SDK does not capture resources sent. In fact, this is happening because Angular doen't use window.fetch directly, but instead uses a patched version kept somewhere else.

To solve this issue we suggest to either:

• Load and initialise the SDK using CDN synchronously before Angular.
• Initialise the SDK before calling bootstrapApplication method. To be able to use the SDK in other components, you can simply injects in them. Following is a simple example:

// main.ts
import { datadogRum } from '@datadog/browser-rum';
datadogRum.init({
  applicationId: 'xxx',
  clientToken: 'xxx',
  service: 'xxx',
  env: 'dev',
  trackViewsManually: true,
});

// App logic

// Make datadogRum injectable and accessible in other components
platformBrowserDynamic([{ provide: DD_RUM, useValue: datadogRum }])
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

[gokberknur]

Thank you for your reply.

I think datadog rum is already initialized synchronously in our application, and it still doesn't work. However, we are not in favor in this solution anyway, considering size of the datadog-rum package is already big. Currently we removed the "WithFetch()" flag and using XHR.

I hope datadog will support this in the near future.

[BenoitZugmeyer]

I hope datadog will support this in the near future.

This is not something we can fix without a change in Angular. I submited an issue to see if they would be willing to support this use case.

[gokberknur]

Thank you so much for your investigation! @BenoitZugmeyer

[gokberknur]

It looks angular team released v18.2.3 that fixing this issue. I tried locally and i see API request now.

https://github.com/angular/angular/releases/tag/18.2.3