Problems while trying to implement custom transport in Sentry

Question

I'm trying to implement a custom transport for a react app as I'm using this app inside UWP container and the fetch API inside UWP doesn't work to send events to sentry (found this after long time debugging), it seems that fetch API inside UWP isn't the same inside the browser.

So this my code so far, I'm following the example code from https://github.com/getsentry/sentry-javascript/blob/develop/MIGRATION.md#custom-transports:

function makeMyCustomTransport(options) {
  function makeRequest(request) {
    // this is where your sending logic goes
    const myCustomRequest = {
      body: request.body,
      url: options.url,
    }

    function sendMyCustomRequest(req) {
      return new Promise((resolve, reject) => {
        axios
          .post(`${req.url}`, {
            body: req.body,
          })
          .then((response) => {
            resolve(response)
          })
          .catch((error) => {
            reject(error)
          })
      })
    }

    // you define how `sendMyCustomRequest` works
    return sendMyCustomRequest(myCustomRequest).then((response) => ({
      headers: {
        'x-sentry-rate-limits': response.headers['X-Sentry-Rate-Limits'],
        'retry-after': response.headers['Retry-After'],
      },
      statusCode: response.status ?? 500,
      status: 'success',
    }))
  }

  // `createTransport` takes care of rate limiting and flushing
  return createTransport(options, makeRequest)
}

Sentry.init({
  dsn: '.....',
  integrations: [new Sentry.Replay(), new Debug()],
  // Performance Monitoring
  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
  debug: true,
  transport: makeMyCustomTransport,
})

With this code, I don't see any errors in the browser console and when logging the axios response, it's 200 so everything seems to be ok but I don't see anything in the sentry dashboard.

Any idea what could be wrong?

Answer 1

I found the issue, it was how the data sent to Sentry in the axios request:

The right way:

axios.post(`${req.url}`, req.body)

The wrong way:

axios.post(`${req.url}`, {
    body: req.body,
})