@argusdev/sdk-react 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# @argusdev/sdk-react
+
+React SDK for [Argus](https://github.com/oluwatobicode/argus) — an error boundary on top of `@argusdev/sdk-browser`. Catches render crashes that `window.onerror` misses.
+
+## Install
+
+```bash
+npm install @argusdev/sdk-react
+```
+
+## Usage
+
+```tsx
+import { init, ArgusErrorBoundary } from "@argusdev/sdk-react";
+
+init({ dsn: "https://<publicKey>@<host>/<projectId>" });
+
+function Root() {
+  return (
+    <ArgusErrorBoundary fallback={<p>Something went wrong.</p>}>
+      <App />
+    </ArgusErrorBoundary>
+  );
+}
+```
+
+`init()` sets up the same global handlers as `@argusdev/sdk-browser` (so you only need one import), and the boundary reports React render errors with the crashing component.
+
+MIT © Treasure Odetokun

package/dist/ErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+interface Props {
+    children?: ReactNode;
+    fallback?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+export declare class ArgusErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/ErrorBoundary.js

@@ -0,0 +1,36 @@
+import { Component } from "react";
+import { captureException } from "@argusdev/sdk-browser";
+/*
+ * Usage:
+ *   <ArgusErrorBoundary fallback={<p>Something went wrong</p>}>
+ *     <App />
+ *   </ArgusErrorBoundary>
+ *
+ * React render crashes don't reach window.onerror in production builds —
+ * boundaries are the only reliable hook, and they must be class components
+ * (React exposes componentDidCatch nowhere else).
+ */
+export class ArgusErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, info) {
+        void captureException(error, {
+            /* componentStack is the React tree path to the crash — goldmine for debugging */
+            tags: info.componentStack
+                ? { componentStack: info.componentStack.trim().split("\n")[0] ?? "" }
+                : undefined,
+        });
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback ?? null;
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../src/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAYzD;;;;;;;;;GASG;AACH,MAAM,OAAO,kBAAmB,SAAQ,SAAuB;IAA/D;;QACE,UAAK,GAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IAqBrC,CAAC;IAnBC,MAAM,CAAC,wBAAwB;QAC7B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,IAAe;QAC7C,KAAK,gBAAgB,CAAC,KAAK,EAAE;YAC3B,iFAAiF;YACjF,IAAI,EAAE,IAAI,CAAC,cAAc;gBACvB,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrE,CAAC,CAAC,SAAS;SACd,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC;QACrC,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ArgusErrorBoundary } from "./ErrorBoundary";
+export { init, captureException } from "@argusdev/sdk-browser";
+export type { InitOptions } from "@argusdev/sdk-browser";

package/dist/index.js

@@ -0,0 +1,6 @@
+/* Public surface of @argusdev/sdk-react */
+export { ArgusErrorBoundary } from "./ErrorBoundary";
+/* re-export the browser SDK so React users need exactly one import:
+   import { init, ArgusErrorBoundary } from "@argusdev/sdk-react" */
+export { init, captureException } from "@argusdev/sdk-browser";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD;oEACoE;AACpE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@argusdev/sdk-react",
+  "version": "0.1.0",
+  "description": "Argus SDK for React — ErrorBoundary component on top of @argusdev/sdk-browser.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@argusdev/sdk-browser": "workspace:*",
+    "@argusdev/sdk-core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "typescript": "~6.0.3"
+  },
+  "license": "MIT",
+  "author": "Treasure Odetokun",
+  "homepage": "https://github.com/oluwatobicode/argus#readme",
+  "keywords": [
+    "argus",
+    "error-tracking",
+    "monitoring",
+    "sdk",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oluwatobicode/argus.git",
+    "directory": "packages/sdk-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}