Merge pull request #3 from traceo-dev/feat/browser-sdks

Feat/browser sdks

Author: piotr-szewczyk

.prettierrc

@@ -0,0 +1,11 @@
+{
+    "trailingComma": "none",
+    "tabWidth": 2,
+    "printWidth": 98,
+    "semi": true,
+    "quoteProps": "as-needed",
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "endOfLine": "lf",
+    "singleQuote": false
+}

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
 }

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,

.prettierc.json packages/browser/.eslintrc.js.prettierc.json renamed to packages/browser/.eslintrc.js

@@ -0,0 +1 @@
+# Traceo SDK Browser

packages/browser/README.md

@@ -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
+    }
+}

packages/browser/package.json

@@ -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();
+  }
+}

packages/browser/src/client.ts

@@ -0,0 +1,7 @@
+export { BrowserClient } from "./client";
+export type {
+  Dictionary,
+  IBrowserClient,
+  TraceoOptions,
+  TraceoBrowserError as TraceoError
+} from "./types/client";

packages/browser/src/index.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);
+  }
+}

packages/browser/src/transport/fetch.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);
+  }
+}