feat/scrapping browser data while catching incident

piotr-szewczyk · piotr-szewczyk · commit 1473c6a77e98 · 2023-03-11T17:03:05.000+01:00
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -23,7 +23,7 @@
         "test:watch": "jest --watch --notify"
     },
     "dependencies": {
-        "stacktrace-parser-node": "1.1.4"
+        "bowser": "2.11.0"
     },
     "publishConfig": {
         "access": "public"
diff --git a/packages/browser/src/client.ts b/packages/browser/src/client.ts
@@ -1,5 +1,6 @@
 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 };
@@ -16,18 +17,16 @@ export abstract class BrowserClient implements IBrowserClient {
   public abstract postInitSDK(): void;
 
   public sendError(error: Error): void {
-    const event = {
+    const browser = utils.browserDetails();
+    this.transport.send({
       type: error.name,
       message: error.message,
-      traces: [],
-      stack: error.stack,
-      platform: {}
-    };
-    this.transport.send(event, this.headers);
+      stack: error.stack as string,
+      browser
+    }, this.headers);
   }
 
   private initSDK(): void {
-    // TODO: we need to make something here?
     this.postInitSDK();
   }
 }
diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
@@ -1,2 +1,7 @@
 export { BrowserClient } from "./client";
-export type { Dictionary, IBrowserClient, TraceoOptions, TraceoError } from "./types/client";
+export type {
+  Dictionary,
+  IBrowserClient,
+  TraceoOptions,
+  TraceoBrowserError as TraceoError
+} from "./types/client";
diff --git a/packages/browser/src/transport/index.ts b/packages/browser/src/transport/index.ts
@@ -15,7 +15,7 @@ export class Transport {
       const options = this.requestOptions(body, headers);
       this.transport(options).request();
     } catch (error) {
-      console.log("Error on send data: ", error);
+      console.log("Error sending data to traceo: ", error);
     }
   }
 
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
@@ -4,10 +4,10 @@ export interface TraceoOptions {
   url: string;
 }
 
-export interface TraceoError extends Error {}
+export interface TraceoBrowserError extends Error {}
 
 export interface IBrowserClient {
-  sendError(error: TraceoError): void;
+  sendError(error: TraceoBrowserError): void;
 }
 
 export type Dictionary<T> = {
diff --git a/packages/browser/src/types/transport.ts b/packages/browser/src/types/transport.ts
@@ -1,3 +1,4 @@
+import { BrowserInfoType } from "./browser";
 import { Dictionary } from "./client";
 
 export interface ITransport {
@@ -13,3 +14,10 @@ export type RequestOptions = {
   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/node/src/client.ts b/packages/node/src/client.ts
@@ -18,7 +18,7 @@ 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
     };
diff --git a/packages/node/src/exceptions/handler.ts b/packages/node/src/exceptions/handler.ts
@@ -1,7 +1,7 @@
 import { stacktrace } from "stacktrace-parser-node";
 import { HttpModule } from "../core/http";
 import { isClientConnected } from "../core/is";
-import { TraceoError, Incident } from "../types";
+import { TraceoError, NodeIncidentType } from "../types";
 import { getOsDetails } from "../helpers";
 
 /**
@@ -27,7 +27,7 @@ export const catchException = async (error: any) => {
 };
 
 const handleException = async (error: TraceoError) => {
-  const event: Incident = await prepareException(error);
+  const event: NodeIncidentType = await prepareException(error);
   const httpModule = HttpModule.getInstance();
   httpModule.request({
     url: "/api/worker/incident",
@@ -41,12 +41,12 @@ const handleException = async (error: TraceoError) => {
   });
 };
 
-const prepareException = async (error: TraceoError): Promise<Incident> => {
+const prepareException = async (error: TraceoError): Promise<NodeIncidentType> => {
   const { stack } = error;
   const platform = getOsDetails();
 
   const { message, name, traces } = await stacktrace.parse(error);
-  const event: Incident = {
+  const event: NodeIncidentType = {
     type: name,
     message,
     traces,
diff --git a/packages/node/src/types/events.ts b/packages/node/src/types/events.ts
@@ -7,18 +7,16 @@ export interface EventResponse {
   body?: string;
 }
 
-export interface Incident {
+export type NodeIncidentType = {
   type: string;
   message: string;
   stack: string;
   traces: Trace[];
-  env?: Environment;
   platform: Platform;
-}
+};
 
 export interface Platform {
   arch: string;
   platform: string;
   release: string;
-  // version: string;
 }
diff --git a/packages/react/src/ErrorBoundary.tsx b/packages/react/src/ErrorBoundary.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { IBrowserClient } from "@traceo-sdk/browser";
+
+type FallbackProps = (props?: { error: Error; componentStack: string }) => React.ReactElement;
+
+type ErrorBoundaryProps = {
+  traceo: IBrowserClient;
+  children: React.ReactNode;
+  fallback?: FallbackProps;
+  onError?(error: Error, componentStack: string): void;
+};
+
+type ErrorBoundaryState = {
+  error?: Error;
+  stacktrace?: string;
+};
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  public state: ErrorBoundaryState = {
+    error: undefined,
+    stacktrace: undefined
+  };
+
+  public componentDidCatch(error: Error, { componentStack }: React.ErrorInfo): void {
+    const { traceo, onError } = this.props;
+
+    if (onError) {
+      onError(error, componentStack);
+    }
+
+    traceo.sendError(error);
+    this.setState({ error, stacktrace: componentStack });
+  }
+
+  public render(): React.ReactNode {
+    const { children, fallback } = this.props;
+    const { error, stacktrace } = this.state;
+
+    if (error) {
+      if (fallback) {
+        return fallback({
+          error,
+          componentStack: stacktrace as string
+        });
+      }
+
+      return null;
+    }
+
+    return children;
+  }
+}
diff --git a/packages/react/src/TraceoErrorBoundary.tsx b/packages/react/src/TraceoErrorBoundary.tsx
diff --git a/packages/react/src/client.ts b/packages/react/src/client.ts
@@ -1,17 +1,16 @@
 import { BrowserClient, TraceoOptions } from "@traceo-sdk/browser";
-const { version } = require('./package.json');
 
 export class Client extends BrowserClient {
   constructor(options: TraceoOptions) {
     super(options);
 
     this.options = options;
     this.headers = {
-      "x-sdk-name": "React",
-      "x-sdk-version": version,
+      "x-sdk-name": "react",
+      "x-sdk-version": "0.31.8",
       "x-sdk-key": this.options.apiKey
     };
   }
 
-  public postInitSDK(): void { }
+  public postInitSDK(): void {}
 }
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -1,2 +1,2 @@
-export { TraceoErrorBoundary } from "./TraceoErrorBoundary";
+export { ErrorBoundary } from "./ErrorBoundary";
 export { Client as TraceoClient } from "./client";

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export class Transport {`
`15`	`15`	`const options = this.requestOptions(body, headers);`
`16`	`16`	`this.transport(options).request();`
`17`	`17`	`} catch (error) {`
`18`		`- console.log("Error on send data: ", error);`
	`18`	`+ console.log("Error sending data to traceo: ", error);`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`
Original file line number	Diff line number	Diff line change
`@@ -4,10 +4,10 @@ export interface TraceoOptions {`
`4`	`4`	`url: string;`
`5`	`5`	`}`
`6`	`6`
`7`		`-export interface TraceoError extends Error {}`
	`7`	`+export interface TraceoBrowserError extends Error {}`
`8`	`8`
`9`	`9`	`export interface IBrowserClient {`
`10`		`- sendError(error: TraceoError): void;`
	`10`	`+ sendError(error: TraceoBrowserError): void;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`export type Dictionary<T> = {`