feat: Trigger handlers when starting fetch request as well (#2320)

Author: kamilogorek

packages/browser/src/integrations/breadcrumbs.ts

@@ -45,7 +45,7 @@ type XMLHttpRequestProp = 'onload' | 'onerror' | 'onprogress';
 
 /**
  * Default Breadcrumbs instrumentations
- * @deprecated With v6, this will be renamed
+ * TODO: Deprecated - with v6, this will be renamed to `Instrument`
  */
 export class Breadcrumbs implements Integration {
   /**
@@ -255,19 +255,24 @@ export class Breadcrumbs implements Integration {
             method: getFetchMethod(args),
             url: getFetchUrl(args),
           },
+          requestComplete: false,
           startTimestamp: Date.now(),
         };
 
+        triggerHandlers(handlerData);
+
         return originalFetch.apply(global, args).then(
           (response: Response) => {
             handlerData.endTimestamp = Date.now();
+            handlerData.requestComplete = true;
             handlerData.response = response;
             handlerData.fetchData.status_code = response.status;
             triggerHandlers(handlerData);
             return response;
           },
           (error: Error) => {
             handlerData.endTimestamp = Date.now();
+            handlerData.requestComplete = true;
             handlerData.error = error;
             triggerHandlers(handlerData);
             throw error;
@@ -387,6 +392,7 @@ export class Breadcrumbs implements Integration {
           const handlerData: { [key: string]: any } = {
             args,
             endTimestamp: Date.now(),
+            requestComplete: false,
             startTimestamp: Date.now(),
             xhr,
           };

packages/browser/src/integrations/instrumenthandlers.ts

@@ -103,6 +103,11 @@ function xhrBreadcrumb(handlerData: { [key: string]: any }): void {
  * Creates breadcrumbs from fetch API calls
  */
 function fetchBreadcrumb(handlerData: { [key: string]: any }): void {
+  // We only capture complete fetch requests
+  if (!handlerData.requestComplete) {
+    return;
+  }
+
   const client = getCurrentHub().getClient<BrowserClient>();
   const dsn = client && client.getDsn();