Custom Instrumentation for Requests Module

Learn how to manually instrument your code to use Sentry's Requests module.

As a prerequisite to setting up Requests, you’ll need to first set up performance monitoring. Once this is done, the JavaScript SDK will automatically instrument outgoing HTTP requests. If that doesn't fit your use case, you can set up using custom instrumentation.

For detailed information about which data can be set, see the Requests Module developer specifications.

Then forward the init method from the sibling Sentry SDK for the framework you use, such as Angular in this example:

app.module.ts
Copied
import * as Sentry from "@sentry/capacitor";
import * as SentryAngular from "@sentry/angular";

Sentry.init(
  {
    dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

    // Set your release version, such as "getsentry@1.0.0"
    release: "my-project-name@<release-name>",
    // Set your dist version, such as "1"
    dist: "<dist>",
    integrations: [
      // Registers and configures the Tracing integration,
      // which automatically instruments your application to monitor its
      // performance, including custom Angular routing instrumentation
      SentryAngular.browserTracingIntegration({
        tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
      }),
    ],
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,
  },
  // Forward the init method from @sentry/angular
  SentryAngular.init
);

@NgModule({
  providers: [
    {
      provide: ErrorHandler,
      // Attach the Sentry ErrorHandler
      useValue: SentryAngular.createErrorHandler(),
    },
    {
      provide: SentryAngular.TraceService,
      deps: [Router],
    },
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => {},
      deps: [SentryAngular.TraceService],
      multi: true,
    },
  ],
})

You can also use the features available with the Sentry SDK for the framework you use, such as Angular.

You will need to upload source maps to make sense of the events you receive in Sentry.

For example, if you are using Capacitor with Ionic-Angular, upload your www folder on every build you release. The values for <release_name> and <dist> must match the values passed into Sentry.init for events to be deminified correctly.

Copied
sentry-cli releases files <release_name> upload-sourcemaps ./www --dist <dist>

Learn more about uploading source maps.

To make stack-trace information for native crashes on iOS easier to understand, you need to provide debug information to Sentry. Debug information is provided by uploading dSYM files.

NOTE: Refer to HTTP Span Data Conventions for a full list of the span data attributes.

Here is an example of an instrumented function that makes HTTP requests:

Copied
async function makeRequest(method, url) {
  return await Sentry.startSpan(
    {op: 'http.client', name: `${method} ${url}`},
    async span => {
      const parsedURL = new URL(url, location.origin);

      const response = await fetch(url, {
        method,
      });

      span?.setAttribute('http.request.method', method);

      span?.setAttribute('server.address', parsedURL.hostname);
      span?.setAttribute('server.port', parsedURL.port || undefined);

      span?.setAttribute('http.response.status_code', response.status);
      span?.setAttribute(
        'http.response_content_length',
        Number(response.headers.get('content-length'))
      );

      // A good place to set other span attributes

      return response;
    }
  );
}
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").