@xrayradar/react 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,32 @@
+import { Component, ReactNode, ErrorInfo } from 'react';
+import { BrowserClient } from '@xrayradar/browser';
+export { BrowserClient, addBreadcrumb, captureException, captureMessage, getClient, init, resetGlobal, setContext, setExtra, setTag, setUser } from '@xrayradar/browser';
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    reset: () => void;
+    render(): ReactNode;
+}
+
+interface XrayRadarProviderProps {
+    children: ReactNode;
+    client?: BrowserClient | null;
+}
+/**
+ * Optional provider to expose the client via useXrayRadar().
+ * If client is not provided, useXrayRadar() returns getClient() (global).
+ */
+declare function XrayRadarProvider({ children, client }: XrayRadarProviderProps): ReactNode;
+declare function useXrayRadar(): BrowserClient | null;
+
+export { ErrorBoundary, type ErrorBoundaryProps, XrayRadarProvider, type XrayRadarProviderProps, useXrayRadar };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import { Component, ReactNode, ErrorInfo } from 'react';
+import { BrowserClient } from '@xrayradar/browser';
+export { BrowserClient, addBreadcrumb, captureException, captureMessage, getClient, init, resetGlobal, setContext, setExtra, setTag, setUser } from '@xrayradar/browser';
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    reset: () => void;
+    render(): ReactNode;
+}
+
+interface XrayRadarProviderProps {
+    children: ReactNode;
+    client?: BrowserClient | null;
+}
+/**
+ * Optional provider to expose the client via useXrayRadar().
+ * If client is not provided, useXrayRadar() returns getClient() (global).
+ */
+declare function XrayRadarProvider({ children, client }: XrayRadarProviderProps): ReactNode;
+declare function useXrayRadar(): BrowserClient | null;
+
+export { ErrorBoundary, type ErrorBoundaryProps, XrayRadarProvider, type XrayRadarProviderProps, useXrayRadar };

package/dist/index.js

@@ -0,0 +1,109 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  ErrorBoundary: () => ErrorBoundary,
+  XrayRadarProvider: () => XrayRadarProvider,
+  addBreadcrumb: () => import_browser3.addBreadcrumb,
+  captureException: () => import_browser3.captureException,
+  captureMessage: () => import_browser3.captureMessage,
+  getClient: () => import_browser3.getClient,
+  init: () => import_browser3.init,
+  resetGlobal: () => import_browser3.resetGlobal,
+  setContext: () => import_browser3.setContext,
+  setExtra: () => import_browser3.setExtra,
+  setTag: () => import_browser3.setTag,
+  setUser: () => import_browser3.setUser,
+  useXrayRadar: () => useXrayRadar
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ErrorBoundary.tsx
+var import_react = require("react");
+var import_browser = require("@xrayradar/browser");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react.Component {
+  constructor(props) {
+    super(props);
+    this.reset = () => {
+      this.setState({ error: null });
+    };
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    (0, import_browser.captureException)(error, { message: errorInfo.componentStack ?? void 0 });
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    const { error } = this.state;
+    if (error) {
+      const { fallback } = this.props;
+      if (typeof fallback === "function") {
+        return fallback(error, this.reset);
+      }
+      if (fallback !== void 0) {
+        return fallback;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "alert", style: { padding: 16, border: "1px solid #ccc" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Something went wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { style: { overflow: "auto" }, children: error.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: this.reset, children: "Try again" })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/provider.tsx
+var import_react2 = require("react");
+var import_browser2 = require("@xrayradar/browser");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var XrayRadarContext = (0, import_react2.createContext)(null);
+function XrayRadarProvider({ children, client }) {
+  const value = (0, import_react2.useMemo)(() => client ?? (0, import_browser2.getClient)(), [client]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(XrayRadarContext.Provider, { value, children });
+}
+function useXrayRadar() {
+  const context = (0, import_react2.useContext)(XrayRadarContext);
+  return context ?? (0, import_browser2.getClient)();
+}
+
+// src/index.tsx
+var import_browser3 = require("@xrayradar/browser");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ErrorBoundary,
+  XrayRadarProvider,
+  addBreadcrumb,
+  captureException,
+  captureMessage,
+  getClient,
+  init,
+  resetGlobal,
+  setContext,
+  setExtra,
+  setTag,
+  setUser,
+  useXrayRadar
+});

package/dist/index.mjs

@@ -0,0 +1,81 @@
+// src/ErrorBoundary.tsx
+import { Component } from "react";
+import { captureException } from "@xrayradar/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.reset = () => {
+      this.setState({ error: null });
+    };
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    captureException(error, { message: errorInfo.componentStack ?? void 0 });
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    const { error } = this.state;
+    if (error) {
+      const { fallback } = this.props;
+      if (typeof fallback === "function") {
+        return fallback(error, this.reset);
+      }
+      if (fallback !== void 0) {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsxs("div", { role: "alert", style: { padding: 16, border: "1px solid #ccc" }, children: [
+        /* @__PURE__ */ jsx("h3", { children: "Something went wrong" }),
+        /* @__PURE__ */ jsx("pre", { style: { overflow: "auto" }, children: error.message }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: this.reset, children: "Try again" })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/provider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { getClient } from "@xrayradar/browser";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var XrayRadarContext = createContext(null);
+function XrayRadarProvider({ children, client }) {
+  const value = useMemo(() => client ?? getClient(), [client]);
+  return /* @__PURE__ */ jsx2(XrayRadarContext.Provider, { value, children });
+}
+function useXrayRadar() {
+  const context = useContext(XrayRadarContext);
+  return context ?? getClient();
+}
+
+// src/index.tsx
+import {
+  init,
+  getClient as getClient2,
+  resetGlobal,
+  captureException as captureException2,
+  captureMessage,
+  addBreadcrumb,
+  setUser,
+  setTag,
+  setExtra,
+  setContext
+} from "@xrayradar/browser";
+export {
+  ErrorBoundary,
+  XrayRadarProvider,
+  addBreadcrumb,
+  captureException2 as captureException,
+  captureMessage,
+  getClient2 as getClient,
+  init,
+  resetGlobal,
+  setContext,
+  setExtra,
+  setTag,
+  setUser,
+  useXrayRadar
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@xrayradar/react",
+  "version": "0.1.0",
+  "description": "XrayRadar SDK for React – ErrorBoundary, hooks, provider",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean",
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint src",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "dependencies": {
+    "@xrayradar/browser": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3",
+    "vitest": "^4.0.0"
+  }
+}