### Getting Started

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/CONTRIBUTING.md

Commands to clone the repository, install dependencies, build the project, and run tests.

```shell
git clone https://github.com/open-telemetry/opentelemetry-browser.git
cd opentelemetry-browser
npm ci
npm run build
npm test
```

--------------------------------

### Run locally

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/sandbox/README.md

Installs dependencies and starts the sandbox development server.

```bash
npm install
npm run dev
```

--------------------------------

### Installation

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Install the @opentelemetry/browser-instrumentation package.

```bash
npm install @opentelemetry/browser-instrumentation
```

--------------------------------

### Install npm

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/README.md

This command ensures you have the correct version of npm installed for contributing to the project.

```bash
npm install -g npm@11
```

--------------------------------

### Installation

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/README.md

Install the necessary OpenTelemetry browser instrumentation packages using npm.

```bash
npm install @opentelemetry/browser-instrumentation \
  @opentelemetry/api \
  @opentelemetry/api-logs \
  @opentelemetry/sdk-logs \
  @opentelemetry/instrumentation
```

--------------------------------

### Basic example

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/README.md

A basic example demonstrating how to set up and register various browser instrumentations.

```typescript
import { logs } from '@opentelemetry/api-logs';
import {
  ConsoleLogRecordExporter,
  LoggerProvider,
  SimpleLogRecordProcessor,
} from '@opentelemetry/sdk-logs';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { NavigationTimingInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/navigation-timing';
import { ResourceTimingInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/resource-timing';
import { UserActionInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/user-action';
import { WebVitalsInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/web-vitals';
import { ConsoleInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/console';

const logProvider = new LoggerProvider({
  processors: [
    new SimpleLogRecordProcessor(new ConsoleLogRecordExporter()),
  ],
});
logs.setGlobalLoggerProvider(logProvider);

registerInstrumentations({
  instrumentations: [
    new NavigationTimingInstrumentation(),
    new ResourceTimingInstrumentation(),
    new UserActionInstrumentation(),
    new WebVitalsInstrumentation(),
    new ConsoleInstrumentation(),
  ],
});
```

--------------------------------

### Resource Timing Configuration Example

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Configuration options for ResourceTimingInstrumentation.

```typescript
new ResourceTimingInstrumentation({
  // Process 100 resources per batch (default: 50)
  batchSize: 100,

  // Wait max 2 seconds for idle time before forcing processing (default: 1000)
  forceProcessingAfter: 2000,

  // Spend max 100ms processing per idle callback (default: 50)
  maxProcessingTime: 100,

  // Maximum queue size before forcing immediate flush (default: 1000)
  maxQueueSize: 2000,
});
```

--------------------------------

### User Action Data Attributes Example

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Example of using data attributes with the prefix 'data-otel-' on HTML elements to add attributes to generated log records.

```html
<button id="btn1" data-otel-user-id="12345" data-otel-feature="signup">
  Sign Up
</button>
```

--------------------------------

### Navigation Instrumentation Configuration

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Example configuration for NavigationInstrumentation.

```typescript
import {
  NavigationInstrumentation,
  defaultSanitizeUrl,
} from '@opentelemetry/browser-instrumentation/experimental/navigation';

new NavigationInstrumentation({
  // Use window.navigation (Navigation API) when available instead of
  // patching history.pushState / history.replaceState. Default: false.
  useNavigationApiIfAvailable: true,

  // Rewrite the captured URL before it is emitted. Useful for stripping
  // path segments, query parameters, or tokens that should not be exported.
  sanitizeUrl: (url) => defaultSanitizeUrl(url),

  // Mutate the log record before it is emitted (e.g. attach custom attributes).
  applyCustomLogRecordData: (logRecord) => {
    logRecord.attributes = {
      ...logRecord.attributes,
      'app.route.id': '...',
    };
  },
});
```

--------------------------------

### User Action Configuration Example

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Configuring which events to capture with UserActionInstrumentation.

```typescript
new UserActionInstrumentation({
  autoCapturedActions: [], // default is ['click']
});
```

--------------------------------

### Console Instrumentation Configuration

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Example of configuring ConsoleInstrumentation to capture specific console methods.

```typescript
new ConsoleInstrumentation({
  // Specify which console methods to capture (default: log, warn, error, info, debug)
  logMethods: ['error', 'warn'],
});
```

--------------------------------

### Errors Instrumentation Configuration

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Example of configuring ErrorsInstrumentation with custom attributes.

```typescript
new ErrorsInstrumentation({
  // Return extra attributes to attach to the emitted log record.
  applyCustomAttributes: (error) => ({
    'app.error.severity':
      error instanceof Error && error.name === 'ValidationError'
        ? 'warning'
        : 'error',
  }),
});
```

--------------------------------

### Navigation Instrumentation Import

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Import statement for NavigationInstrumentation.

```typescript
import { NavigationInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/navigation';
```

--------------------------------

### Usage

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Registering various browser instrumentations with OpenTelemetry.

```typescript
import { logs } from '@opentelemetry/api-logs';
import {
  ConsoleLogRecordExporter,
  LoggerProvider,
  SimpleLogRecordProcessor,
} from '@opentelemetry/sdk-logs';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { ErrorsInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/errors';
import { NavigationInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/navigation';
import { NavigationTimingInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/navigation-timing';
import { ResourceTimingInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/resource-timing';
import { UserActionInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/user-action';
import { WebVitalsInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/web-vitals';

const logProvider = new LoggerProvider({
  processors: [
    new SimpleLogRecordProcessor(new ConsoleLogRecordExporter()),
  ],
});
logs.setGlobalLoggerProvider(logProvider);

registerInstrumentations({
  instrumentations: [
    new ErrorsInstrumentation(),
    new NavigationInstrumentation(),
    new NavigationTimingInstrumentation(),
    new ResourceTimingInstrumentation(),
    new UserActionInstrumentation(),
    new WebVitalsInstrumentation(),
  ],
});
```

--------------------------------

### Resource Timing Instrumentation

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Provides automatic instrumentation for Resource Timing in web applications, capturing performance metrics for all resources loaded by the browser.

```typescript
import {
  ResourceTimingInstrumentation
} from '@opentelemetry/browser-instrumentation/experimental/resource-timing';
```

--------------------------------

### Errors Instrumentation Import

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Import statement for the ErrorsInstrumentation.

```typescript
import { ErrorsInstrumentation } from '@opentelemetry/browser-instrumentation/experimental/errors';
```

--------------------------------

### Navigation Timing Instrumentation

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Provides automatic instrumentation for Navigation Timing in web applications.

```typescript
import {
  NavigationTimingInstrumentation
} from '@opentelemetry/browser-instrumentation/experimental/navigation-timing';
```

--------------------------------

### Console Instrumentation

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Provides automatic instrumentation for browser console API calls.

```typescript
import {
  ConsoleInstrumentation
} from '@opentelemetry/browser-instrumentation/experimental/console';
```

--------------------------------

### User Action Instrumentation

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Provides automatic instrumentation for user actions in web applications.

```typescript
import {
  UserActionInstrumentation
} from '@opentelemetry/browser-instrumentation/experimental/user-action';
```

--------------------------------

### Web Vitals Instrumentation

Source: https://github.com/open-telemetry/opentelemetry-browser/blob/main/packages/instrumentation/README.md

Provides automatic instrumentation for Core Web Vitals using the web-vitals library.

```typescript
import {
  WebVitalsInstrumentation
} from '@opentelemetry/browser-instrumentation/experimental/web-vitals';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.