traceo-dev · piotr-szewczyk · Mar 12, 2023 · Mar 10, 2023 · Mar 11, 2023
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+    "trailingComma": "none",
+    "tabWidth": 2,
+    "printWidth": 98,
+    "semi": true,
+    "quoteProps": "as-needed",
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "endOfLine": "lf",
+    "singleQuote": false
+}
diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
     "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+    "version": "0.31.8",
     "npmClient": "yarn",
-    "version": "0.31.5",
     "useWorkspaces": true
 }
diff --git a/package.json b/package.json
@@ -3,11 +3,15 @@
   "name": "traceo-sdk",
   "private": true,
   "scripts": {
+    "bootstrap": "lerna bootstrap",
     "build": "lerna run build",
-    "build:tarball": "lerna run build:tarball"
+    "build:tarball": "lerna run build:tarball",
+    "lint:prettier": "lerna run lint:prettier"
   },
   "workspaces": [
-    "packages/node"
+    "packages/node",
+    "packages/browser",
+    "packages/react"
   ],
   "devDependencies": {
     "@types/node": "10.17.0",
@@ -20,14 +24,20 @@
     "@types/jest": "^29.2.0",
     "eslint": "^8.8.0",
     "jest": "^26.5.5",
-    "npm-run-all": "^4.1.2",
     "os": "^0.1.2",
-    "prettier": "^2.5.1",
     "prettier-check": "^2.0.0",
-    "rimraf": "^3.0.2",
     "rollup": "^2.66.1",
     "ts-node": "^10.4.0",
-    "tslint": "^5.11.0"
+    "tslint": "^5.11.0",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "lint-staged": "^10.5.3",
+    "npm-run-all": "^4.1.5",
+    "prettier": "2.1.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "rimraf": "^3.0.2",
+    "webpack": "^5.11.0"
   },
   "jest": {
     "verbose": false,

diff --git a/.prettierc.json → packages/browser/.eslintrc.js b/.prettierc.json → packages/browser/.eslintrc.js
diff --git a/packages/browser/README.md b/packages/browser/README.md
@@ -0,0 +1 @@
+# Traceo SDK Browser
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -0,0 +1,35 @@
+{
+    "name": "@traceo-sdk/browser",
+    "version": "0.31.8",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "license": "MIT",
+    "files": [
+        "dist"
+    ],
+    "homepage": "https://github.com/traceo-dev/traceo-sdk",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/traceo-dev/traceo-sdk.git"
+    },
+    "scripts": {
+        "build": "tsc -p ./tsconfig.json --outDir dist",
+        "build:tarball": "yarn build && npm pack",
+        "prebuild": "rimraf ./dist",
+        "lint": "run-s lint:prettier",
+        "lint:prettier": "prettier ./src/**/*.{js,ts,tsx} --write",
+        "prepack": "yarn lint",
+        "test": "jest",
+        "test:watch": "jest --watch --notify"
+    },
+    "dependencies": {
+        "bowser": "2.11.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "browser": {
+        "http": false,
+        "https": false
+    }
+}
diff --git a/packages/browser/src/client.ts b/packages/browser/src/client.ts
@@ -0,0 +1,32 @@
+import { IBrowserClient, TraceoOptions } from "./types/client";
+import { Transport } from "./transport";
+import { utils } from "./utils";
+
+export abstract class BrowserClient implements IBrowserClient {
+  public headers!: { [key: string]: any };
+  public options: TraceoOptions;
+  public transport: Transport;
+
+  constructor(options: TraceoOptions) {
+    this.options = options;
+    this.transport = new Transport(this.options);
+
+    this.initSDK();
+  }
+
+  public abstract postInitSDK(): void;
+
+  public sendError(error: Error): void {
+    const browser = utils.browserDetails();
+    this.transport.send({
+      type: error.name,
+      message: error.message,
+      stack: error.stack as string,
+      browser
+    }, this.headers);
+  }
+
+  private initSDK(): void {
+    this.postInitSDK();
+  }
+}
diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
@@ -0,0 +1,7 @@
+export { BrowserClient } from "./client";
+export type {
+  Dictionary,
+  IBrowserClient,
+  TraceoOptions,
+  TraceoBrowserError as TraceoError
+} from "./types/client";
diff --git a/packages/browser/src/transport/fetch.ts b/packages/browser/src/transport/fetch.ts
@@ -0,0 +1,19 @@
+import { ITransport, RequestOptions } from "../types/transport";
+
+export class FetchTransport implements ITransport {
+  private _options: RequestOptions;
+
+  constructor(options: RequestOptions) {
+    this._options = options;
+  }
+
+  public async request(): Promise<any> {
+    const options: RequestInit = {
+      method: this._options.method,
+      headers: this._options.headers,
+      body: JSON.stringify(this._options.body)
+    };
+
+    await fetch(this._options.url, options);
+  }
+}
diff --git a/packages/browser/src/transport/index.ts b/packages/browser/src/transport/index.ts
@@ -0,0 +1,53 @@
+import { Dictionary, TraceoOptions } from "../types/client";
+import { RequestOptions } from "../types/transport";
+import { FetchTransport } from "./fetch";
+import { XhrTransport } from "./xhr";
+
+export class Transport {
+  private _options: TraceoOptions;
+
+  constructor(options: TraceoOptions) {
+    this._options = options;
+  }
+
+  public send(body: object, headers: Dictionary<string>) {
+    try {
+      const options = this.requestOptions(body, headers);
+      this.transport(options).request();
+    } catch (error) {
+      console.log("Error sending data to traceo: ", error);
+    }
+  }
+
+  private transport(options: RequestOptions) {
+    if (window.XMLHttpRequest && !window.fetch) {
+      return new XhrTransport(options);
+    }
+
+    return new FetchTransport(options);
+  }
+
+  private requestOptions(body: {}, headers: Dictionary<string>): RequestOptions {
+    const reqUrl = this.clientURL;
+
+    // http://localhost:3000/api/worker/incident/app-id
+    const url = `${reqUrl.origin}/api/worker/incident/${this._options.appId}`;
+
+    return {
+      protocol: reqUrl.protocol,
+      headers: {
+        "Content-Type": "application/json",
+        ...headers
+      },
+      host: reqUrl.hostname,
+      method: "POST",
+      url,
+      port: reqUrl.port,
+      body
+    };
+  }
+
+  private get clientURL(): URL {
+    return new URL(this._options.url);
+  }
+}
diff --git a/packages/browser/src/transport/xhr.ts b/packages/browser/src/transport/xhr.ts
@@ -0,0 +1,36 @@
+import { ITransport, RequestOptions } from "../types/transport";
+
+const XHR_DONE = 4;
+export class XhrTransport implements ITransport {
+  public _options: RequestOptions;
+
+  constructor(options: RequestOptions) {
+    this._options = options;
+  }
+
+  public async request(): Promise<void> {
+    new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open(this._options.method, this._options.url, true);
+
+      this.setRequestHeaders(xhr);
+
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === XHR_DONE) {
+          resolve({
+            status: xhr.status
+          });
+        }
+      };
+
+      xhr.onerror = reject;
+      xhr.send(JSON.stringify(this._options.body));
+    });
+  }
+
+  private setRequestHeaders(xhr: XMLHttpRequest): void {
+    Object.entries(this._options.headers).map(([value, key]) => {
+      xhr.setRequestHeader(key, value);
+    });
+  }
+}
diff --git a/packages/browser/src/types/browser.ts b/packages/browser/src/types/browser.ts
@@ -0,0 +1,19 @@
+export type BrowserInfoType = {
+  browser: {
+    name?: string;
+    version?: string;
+  };
+  os: {
+    name?: string;
+    version?: string;
+    versionName?: string;
+  };
+  platform: {
+    type?: string;
+  };
+  engine: {
+    name?: string;
+    version?: string;
+  };
+  url: string;
+};
diff --git a/packages/browser/src/types/client.ts b/packages/browser/src/types/client.ts
@@ -0,0 +1,15 @@
+export interface TraceoOptions {
+  apiKey: string;
+  appId: string;
+  url: string;
+}
+
+export interface TraceoBrowserError extends Error {}
+
+export interface IBrowserClient {
+  sendError(error: TraceoBrowserError): void;
+}
+
+export type Dictionary<T> = {
+  [key: string]: T;
+};
diff --git a/packages/browser/src/types/transport.ts b/packages/browser/src/types/transport.ts
@@ -0,0 +1,23 @@
+import { BrowserInfoType } from "./browser";
+import { Dictionary } from "./client";
+
+export interface ITransport {
+  request(): Promise<void>;
+}
+
+export type RequestOptions = {
+  body: object;
+  headers: Dictionary<string>;
+  url: string;
+  protocol: string; //"http" | "https"
+  port: string | number;
+  host: string;
+  method: "POST" | "GET" | "PATCH" | "DELETE";
+};
+
+export type BrowserIncidentType = {
+  type: string;
+  message: string;
+  stack: string;
+  browser: BrowserInfoType;
+};
diff --git a/packages/browser/src/utils.ts b/packages/browser/src/utils.ts
@@ -0,0 +1,24 @@
+import Bowser from "bowser";
+import { BrowserInfoType } from "./types/browser";
+
+const bowser = Bowser.getParser(window.navigator.userAgent);
+
+const browserDetails = (): BrowserInfoType => {
+  const browser = bowser.getBrowser();
+  const engine = bowser.getEngine();
+  const platform = bowser.getPlatform();
+  const os = bowser.getOS();
+  const url = window.location.href;
+
+  return {
+    browser,
+    engine,
+    platform,
+    os,
+    url
+  };
+};
+
+export const utils = {
+  browserDetails
+};
diff --git a/packages/browser/tsconfig.json b/packages/browser/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "alwaysStrict": false,
+    "declaration": true,
+    "declarationMap": true,
+    "downlevelIteration": true,
+    "importHelpers": true,
+    "inlineSources": true,
+    "isolatedModules": true,
+    "lib": ["es6", "dom"],
+    "moduleResolution": "node",
+    "noErrorTruncation": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "sourceMap": true,
+    "strict": true,
+    "strictBindCallApply": false,
+    "target": "es6",
+    "esModuleInterop": true
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src/**/*"]
+}
diff --git a/packages/node/package.json b/packages/node/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@traceo-sdk/node",
-    "version": "0.31.7",
+    "version": "0.31.8",
     "author": "Traceo",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
         "build:tarball": "yarn build && npm pack",
         "prebuild": "rimraf ./dist",
         "lint": "run-s lint:prettier",
-        "lint:prettier": "prettier */**/*.{js,ts} --write",
+        "lint:prettier": "prettier ./src/**/*.{js,ts,tsx} --write",
         "prepack": "yarn lint",
         "test": "jest",
         "test:watch": "jest --watch --notify"

diff --git a/packages/node/src/client.ts b/packages/node/src/client.ts
@@ -18,9 +18,9 @@ export class Client {
 
     this.options = options;
     this.headers = {
-      "x-sdk-name": "Node.js",
+      "x-sdk-name": "node",
       "x-sdk-version": TRACEO_SDK_VERSION,
-      "x-sdk-key": this.options.apiKey,
+      "x-sdk-key": this.options.apiKey
     };
 
     this.logger = new Logger();