Ensure we can capture `ofetch` requests

[mydea]

For whatever reason, probably due to timing issues, we cannot capture requests made via ofetch. This seems to be a general issue, there is an issue there too: https://github.com/unjs/ofetch/issues/295

But ideally we can find a way to also patch this properly.

[mydea]

For the time being, it is also possible to manually capture a fetch breadcrumb, which will also be picked up by replay, like this:

import * as Sentry from '@sentry/browser';

async function myFetchUtil(fetchArgs) {
  // timestamps in seconds
  const startTimestamp = Date.now() / 1000;
  // response should be a plain fetch Response instance
  const response = await ofetch(fetchArgs);
  const endTimestamp = Date.now() / 1000;

  // Manually capture to Sentry
  Sentry.addBreadcrumb({
    category: 'fetch',
    data: {
       method: string;
       url: string;
       status_code?: number;
       request_body_size?: number;
       response_body_size?: number;
    },
    type: 'http'
  },
  {
      input: fetchArgs,
      response,
      startTimestamp,
      endTimestamp,
  }
);

You can look at the types here:

• Types to pass to data in the breadcrumb (first argument passed to addBreadcrumb): https://github.com/getsentry/sentry-javascript/blob/develop/packages/types/src/breadcrumb.ts#L19
• Types to pass as hint (second argument passed to addBreadcrumb): https://github.com/getsentry/sentry-javascript/blob/develop/packages/types/src/breadcrumb.ts#L35

[Vesely]

Hi @mydea, thank you for providing code for manually capturing a fetch, but it doesn't work for me. You are using deprecated captureBreadcrumb, I changed it to addBreadcrumb. Still, I can't see data about requests in Sentry Replay. Here is my playground: https://stackblitz.com/edit/github-axkoew?file=pages%2Findex.vue

[Lms24]

@Vesely just jumping in for @mydea since he's on vacation at the moment: I tried your repro and found the problem: We listen to category: 'fetch' breadcrumbs a bit differently than to custom breadcrumbs. Looks like somewhere along the way of processing the fetch breadcrumb, we drop it or something goes wrong. Still need to look into what specifically.

As a temporary workaround: If you change the category to category: 'myfetch' (for example), you should see the breadcrumb in your Replay. This is not ideal though because we can't apply the same processing as we do with actual fetch breadcrumbs then.