XHR instrumentation experimental package

.env

@@ -61,6 +61,7 @@ DEMO_PACKAGES_REACT_PATH=packages/react
 DEMO_PACKAGES_WEB_SDK_PATH=packages/web-sdk
 DEMO_PACKAGES_WEB_TRACING_PATH=packages/web-tracing
 DEMO_PACKAGES_FETCH_INSTRUMENTATION_PATH=experimental/instrumentation-fetch
+DEMO_PACKAGES_XHR_INSTRUMENTATION_PATH=experimental/instrumentation-xhr
 DEMO_PORT=5173
 DEMO_PORT_HMR=24678
 DEMO_SERVER_AGENT_HOST=

demo/package.json

@@ -39,6 +39,7 @@
     "@grafana/faro-react": "^1.1.2",
     "@grafana/faro-web-sdk": "^1.1.2",
     "@grafana/faro-web-tracing": "^1.1.2",
+    "@grafana/faro-instrumentation-xhr": "link:../experimental/instrumentation-xhr", // TODO - remove this once we publish instrumentation-xhr
     "@grpc/grpc-js": "^1.8.17",
     "@opentelemetry/api": "^1.4.1",
     "@opentelemetry/core": "^1.11.0",

demo/src/client/faro/initialize.ts

@@ -1,5 +1,6 @@
 import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType } from 'react-router-dom';
 
+import { XHRInstrumentation } from '@grafana/faro-instrumentation-xhr';
 import {
   initializeFaro as coreInit,
   getWebInstrumentations,
@@ -20,6 +21,7 @@ export function initializeFaro(): Faro {
         captureConsole: true,
       }),
       new TracingInstrumentation(),
+      new XHRInstrumentation(),
       new ReactIntegration({
         router: {
           version: ReactRouterVersion.V6,

demo/tsconfig.json

@@ -19,6 +19,7 @@
     { "path": "../packages/react/tsconfig.esm.json" },
     { "path": "../packages/web-sdk/tsconfig.esm.json" },
     { "path": "../packages/web-tracing/tsconfig.esm.json" },
-    { "path": "../experimental/instrumentation-fetch/tsconfig.esm.json" }
+    { "path": "../experimental/instrumentation-fetch/tsconfig.esm.json" },
+    { "path": "../experimental/instrumentation-xhr/tsconfig.esm.json" }
   ]
 }

docker-compose.yaml

@@ -110,6 +110,8 @@ services:
       - 'demo_web_tracing_node_modules:${DEMO_WORKSPACE_PATH}/${DEMO_PACKAGES_WEB_TRACING_PATH}/node_modules'
       - 'demo_fetch_instrumentation_dist:${DEMO_WORKSPACE_PATH}/${DEMO_PACKAGES_FETCH_INSTRUMENTATION_PATH}/dist'
       - 'demo_fetch_instrumentation_node_modules:${DEMO_WORKSPACE_PATH}/${DEMO_PACKAGES_FETCH_INSTRUMENTATION_PATH}/node_modules'
+      - 'demo_xhr_instrumentation_dist:${DEMO_WORKSPACE_PATH}/${DEMO_PACKAGES_XHR_INSTRUMENTATION_PATH}/dist'
+      - 'demo_xhr_instrumentation_node_modules:${DEMO_WORKSPACE_PATH}/${DEMO_PACKAGES_XHR_INSTRUMENTATION_PATH}/node_modules'
     build:
       context: '.'
       args:
@@ -121,6 +123,7 @@ services:
         DEMO_PACKAGES_WEB_SDK_PATH: '${DEMO_PACKAGES_WEB_SDK_PATH}'
         DEMO_PACKAGES_WEB_TRACING_PATH: '${DEMO_PACKAGES_WEB_TRACING_PATH}'
         DEMO_PACKAGES_FETCH_INSTRUMENTATION_PATH: '${DEMO_PACKAGES_FETCH_INSTRUMENTATION_PATH}'
+        DEMO_PACKAGES_XHR_INSTRUMENTATION_PATH: '${DEMO_PACKAGES_XHR_INSTRUMENTATION_PATH}'
         DEMO_PORT: '${DEMO_PORT}'
         DEMO_PORT_HMR: '${DEMO_PORT_HMR}'
     ports:
@@ -152,3 +155,5 @@ volumes:
   demo_web_tracing_node_modules:
   demo_fetch_instrumentation_dist:
   demo_fetch_instrumentation_node_modules:
+  demo_xhr_instrumentation_dist:
+  demo_xhr_instrumentation_node_modules:

experimental/instrumentation-xhr/.browserslistrc

@@ -0,0 +1 @@
+supports es6-module

experimental/instrumentation-xhr/README.md

@@ -0,0 +1,29 @@
+# @grafana/instrumentation-xhr
+
+Faro instrumentation of the JavaScript [XMLHttpRequest (XHR)](https://developer.mozilla.org/en-US/docs/Glossary/XMLHttpRequest) API
+
+❗️*Warning*: this package is experimental and may be subject to frequent and breaking changes.
+Use at your own risk.❗️
+
+## Installation and Usage
+
+```ts
+// index.ts
+import { XHRInstrumentation } from '@grafana/faro-instrumentation-xhr';
+import { getWebInstrumentations, initializeFaro } from '@grafana/faro-react';
+
+initializeFaro({
+  // ...
+  instrumentations: [
+    // Load the default Web instrumentations
+    ...getWebInstrumentations(),
+    // Add XHR instrumentation
+    new XHRInstrumentation(),
+  ],
+});
+
+// myApi.ts
+const req = new XMLHttpRequest();
+req.open("GET", "...");
+req.send(); // use XHR as normal - telemetry data is sent to your Faro endpoint
+```

experimental/instrumentation-xhr/jest.config.js

@@ -0,0 +1,16 @@
+const { jestBaseConfig } = require('../../jest.config.base.js');
+
+module.exports = {
+  ...jestBaseConfig,
+  roots: ['experimental/instrumentation-xhr/src'],
+  testEnvironment: 'jsdom',
+  setupFiles: ['<rootDir>/experimental/instrumentation-xhr/src/setupTests.ts'],
+  moduleNameMapper: {
+    '^@remix-run/router$': '<rootDir>/index.ts',
+    '^@remix-run/web-blob$': require.resolve('@remix-run/web-blob'),
+    '^@remix-run/web-xhr$': require.resolve('@remix-run/web-xhr'),
+    '^@remix-run/web-form-data$': require.resolve('@remix-run/web-form-data'),
+    '^@remix-run/web-stream$': require.resolve('@remix-run/web-stream'),
+    '^@web3-storage/multipart-parser$': require.resolve('@web3-storage/multipart-parser'),
+  },
+};

experimental/instrumentation-xhr/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@grafana/faro-instrumentation-xhr",
+  "version": "1.0.0",
+  "description": "Faro XHR auto-instrumentation package",
+  "keywords": [
+    "observability",
+    "apm",
+    "rum",
+    "logs",
+    "traces",
+    "metrics",
+    "XMLHttpRequest",
+    "xhr"
+  ],
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "test": "jest",
+    "start": "yarn watch",
+    "build": "run-s build:*",
+    "build:compile": "run-p build:compile:*",
+    "build:compile:cjs": "tsc --build tsconfig.cjs.json",
+    "build:compile:esm": "tsc --build tsconfig.esm.json",
+    "build:compile:bundle": "run-s build:compile:bundle:*",
+    "build:compile:bundle:create": "rollup -c ./rollup.config.js",
+    "build:compile:bundle:remove-extras": "rimraf dist/bundle/dist",
+    "watch": "run-s watch:compile",
+    "watch:compile": "yarn build:compile:cjs -w",
+    "clean": "rimraf dist/ yarn-error.log",
+    "quality": "run-s quality:*",
+    "quality:test": "jest",
+    "quality:format": "prettier --cache --cache-location=../../.cache/prettier/instrumentationXHR --ignore-path ../../.prettierignore -w \"./**/*.{js,jsx,ts,tsx,css,scss,md,yaml,yml,json}\"",
+    "quality:lint": "run-s quality:lint:*",
+    "quality:lint:eslint": "eslint --cache --cache-location ../../.cache/eslint/instrumentationXHR --ignore-path ../../.eslintignore \"./**/*.{js,jsx,ts,tsx}\"",
+    "quality:lint:prettier": "prettier --cache --cache-location=../../.cache/prettier/instrumentationXHR --ignore-path ../../.prettierignore -c \"./**/*.{js,jsx,ts,tsx,css,scss,md,yaml,yml,json}\"",
+    "quality:lint:md": "markdownlint README.md",
+    "quality:circular-deps": "madge --circular ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/grafana/faro-web-sdk.git",
+    "directory": "experimental/instrumentation-xhr"
+  },
+  "author": "Grafana Labs",
+  "license": "Apache-2.0"
+}

experimental/instrumentation-xhr/rollup.config.js

@@ -0,0 +1,3 @@
+const { getRollupConfigBase } = require('../../rollup.config.base.js');
+
+module.exports = getRollupConfigBase('instrumentationXHR');

experimental/instrumentation-xhr/src/index.ts

@@ -0,0 +1 @@
+export { XHRInstrumentation } from './instrumentation';

experimental/instrumentation-xhr/src/instrumentation.ts

@@ -0,0 +1,10 @@
+import { BaseInstrumentation, VERSION } from '@grafana/faro-core';
+
+export class XHRInstrumentation extends BaseInstrumentation {
+  readonly name = '@grafana/faro-web-sdk:instrumentation-xhr';
+  readonly version = VERSION;
+
+  initialize(): void {
+    console.log('Initializing XHR instrumentation')
+  }
+}

experimental/instrumentation-xhr/tsconfig.cjs.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.cjs.json",
+  "compilerOptions": {
+    "declarationDir": "./dist/types",
+    "outDir": "./dist/cjs",
+    "rootDir": "./src",
+    "tsBuildInfoFile": "../../.cache/tsc/instrumentationXHR.cjs.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "exclude": ["**/*.test.ts"],
+  "references": [{ "path": "../../packages/core/tsconfig.spec.json" }]
+}

experimental/instrumentation-xhr/tsconfig.esm.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.esm.json",
+  "compilerOptions": {
+    "declarationDir": "./dist/types",
+    "outDir": "./dist/esm",
+    "rootDir": "./src",
+    "tsBuildInfoFile": "../../.cache/tsc/instrumentationXHR.esm.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "exclude": ["**/*.test.ts"],
+  "references": [{ "path": "../../packages/core/tsconfig.spec.json" }]
+}

experimental/instrumentation-xhr/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "noPropertyAccessFromIndexSignature": false
+  },
+  "references": [
+    { "path": "./tsconfig.cjs.json" },
+    { "path": "./tsconfig.esm.json" },
+    { "path": "./tsconfig.spec.json" }
+  ]
+}

experimental/instrumentation-xhr/tsconfig.spec.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.spec.json",
+  "compilerOptions": {
+    "declarationDir": "./dist/types",
+    "outDir": "./dist/spec",
+    "rootDir": "../../",
+    "tsBuildInfoFile": "../../.cache/tsc/instrumentationXHR.spec.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [{ "path": "../../packages/core/tsconfig.spec.json" }]
+}

rollup.config.base.js

@@ -46,6 +46,12 @@ const modules = {
     globalName: 'GrafanaFaroInstrumentationFetch',
     externals: [],
   },
+  instrumentationXHR: {
+    name: '@grafana/faro-instrumentation-xhr',
+    bundleName: 'faro-instrumentation-xhr',
+    globalName: 'GrafanaFaroInstrumentationXHR',
+    externals: [],
+  },
 };
 
 exports.getRollupConfigBase = (moduleName) => {

yarn.lock

@@ -525,6 +525,9 @@
     eslint-plugin-react-hooks "4.6.0"
     typescript "4.8.4"
 
+"@grafana/faro-instrumentation-xhr@link:experimental/instrumentation-xhr":
+  version "1.0.0"
+
 "@grpc/grpc-js@^1.7.1", "@grpc/grpc-js@^1.8.17":
   version "1.8.17"
   resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.8.17.tgz#a3a2f826fc033eae7d2f5ee41e0ab39cee948838"