Improve distributed tracing custom instrumentation

[AbhiPrasad]

Right now to implement distributed tracing with the JS SDK, it is a bit confusing. The docs jump back and forth between different concepts: https://docs.sentry.io/platforms/javascript/distributed-tracing/custom-instrumentation/

and attaching headers requires both @sentry/core and @sentry/utils to be installed.

import * as Sentry from '@sentry/node';
import { spanToTraceHeader, getDynamicSamplingContextFromSpan } from '@sentry/core';
import { dynamicSamplingContextToSentryBaggageHeader } from '@sentry/utils';
app.get('/v1/metrics', (req, res, next) => helpers.authenticated(req, res, next), async (req, res) => {
  await Sentry.startSpan(
    {
      name: 'enqueue metrics job',
      op: 'queue.submit',
      attributes: {
      },
    },
    async (span) => {
      const traceHeader = spanToTraceHeader(span);
      const dynamicSamplingContext = getDynamicSamplingContextFromSpan(span);
      const baggageHeader = dynamicSamplingContextToSentryBaggageHeader(dynamicSamplingContext);
      console.info(traceHeader, baggageHeader);
    },
  );
  res.send('ok');
});

We need to restructure the docs, and make sure all relevant methods are accessible via @sentry/browser and @sentry/node.

[AbhiPrasad]

Related https://github.com/getsentry/sentry-javascript/issues/11199