# Browser instrumentation

Create `tracing.js`

import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { Resource } from '@opentelemetry/resources';
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';

const provider = new WebTracerProvider({
    resource: new Resource({
        [SemanticResourceAttributes.SERVICE_NAME]: 'sample-react-instrumented-app',
    }),
});
const exporter = new OTLPTraceExporter({
    url: 'https://ingest.[region].signoz.cloud:443/v1/traces',
    headers: {
        "signoz-access-token": "your ingestion key",
    },
});
provider.addSpanProcessor(new BatchSpanProcessor(exporter));

provider.register({
    // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken
    contextManager: new ZoneContextManager(),
});

// Registering instrumentations
registerInstrumentations({
    instrumentations: [
        getWebAutoInstrumentations({
						
            '@opentelemetry/instrumentation-xml-http-request': {
                propagateTraceHeaderCorsUrls: [
                    /.+/g, //Regex to match your backend urls.
                ],
            },
            '@opentelemetry/instrumentation-fetch': {
                propagateTraceHeaderCorsUrls: [
                    /.+/g, //Regex to match your backend urls.
                ],
            },
        }),
    ],
});

Import tracing.js at your entry point of your application (eg: index.js/main.js). This file **must** be loaded before any other imports/initialization of entrypoint file (index.js/main.js), else tracing might not work correctly

// index.js
import './tracing.js'

// ...rest of the app's entry point code

getWebAutoInstrumentations automatically instruments with below packages:

- [@opentelemetry/instrumentation-document-load](https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/web/opentelemetry-instrumentation-document-load)
- [@opentelemetry/instrumentation-fetch](https://github.com/open-telemetry/opentelemetry-js/tree/main/experimental/packages/opentelemetry-instrumentation-fetch)
- [@opentelemetry/instrumentation-user-interaction](https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/web/opentelemetry-instrumentation-user-interaction)
- [@opentelemetry/instrumentation-xml-http-request](https://github.com/open-telemetry/opentelemetry-js/tree/main/experimental/packages/opentelemetry-instrumentation-xml-http-request)

Since these packages can produce lot of traces so if you want to reduce number of traces you can use you individual instrumentation packages, Eg: [Long Task Instrumentation](https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/web/opentelemetry-instrumentation-long-task)

import { LongTaskInstrumentation } from '@opentelemetry/instrumentation-long-task';
// ...general opentelemetry configuration

registerInstrumentations({
  instrumentations: [
    new LongTaskInstrumentation(),
  ],
});

Each instrumentation package also has options to configure.

If you are using `getWebAutoInstrumentations` then use the below way to configure

registerInstrumentations({
    instrumentations: [
        getWebAutoInstrumentations({
            "@opentelemetry/instrumentation-user-interaction": {
                enabled: true,
                eventNames: [
                    "click",
                    "load",
                    "loadeddata",
                    "loadedmetadata",
                    "loadstart",
                    "error",
                ],
            }
        }
        ),
    ],
});

If you are using direct instrumentation then use the below way to configure:

registerInstrumentations({
  instrumentations: [
    new UserInteractionInstrumentation({
      eventNames: ['submit', 'click', 'keypress'],
    }),
  ],
});