browser-error-log-react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hyeonse Im
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,63 @@
-# Temporary Holding Version
+# browser-error-log-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React Error Boundary for Browser Error Log. It forwards render errors and React component stacks to an existing browser SDK client, so React errors use the same collector and collection policies as the rest of your app.
+
+The declared React peer range is `>=18 <20`; this range is not a claim of verification against every React version or framework.
+
+## Install
+
+In a React app, install the browser SDK and adapter:
+
+```sh
+npm install browser-error-log browser-error-log-react
+```
+
+React must already be installed in your app. The adapter does not bundle React. For local source-checkout tarballs before publication, follow the [SDK guide](https://github.com/hyeonse-swing/browser-error-log/blob/main/docs/personal-sdk.md) to install protocol, browser, and React tarballs together.
+
+## Use in your browser entry point
+
+Start the repository's self-hosted collector with your app origin allowed:
+
+```sh
+MICRO_PROJECTS=my-web MICRO_ALLOWED_ORIGINS=http://localhost:5173 npm run micro
+```
+
+Initialize a client once in browser code, then wrap the part of the UI you want to protect:
+
+```tsx
+import { init } from 'browser-error-log';
+import { ErrorBoundary } from 'browser-error-log-react';
+
+const errorLog = init({
+  project: 'my-web',
+  endpoint: 'http://127.0.0.1:4319/api/events',
+  environment: 'development',
+  release: 'my-release',
+});
+
+export function Root() {
+  return (
+    <ErrorBoundary
+      client={errorLog}
+      fallback={(_error, reset) => (
+        <section>
+          <p>This view could not be displayed.</p>
+          <button onClick={reset}>Try again</button>
+        </section>
+      )}
+    >
+      <App />
+    </ErrorBoundary>
+  );
+}
+```
+
+`App` above is your application component. The fallback can be a React node or a function receiving the error and a reset callback. Reset clears the boundary's error state and retries rendering its children; fix the underlying state if rendering would fail again. With no fallback, a failed boundary renders nothing.
+
+Use a client entry point in SSR frameworks. Importing the SDK on the server is safe but does not collect server errors. This boundary handles errors React passes to `componentDidCatch`; use `captureException` for handled errors and the base SDK for global JavaScript, promise, and network error capture. It is not native crash monitoring or a server-side error handler.
+
+Open `http://127.0.0.1:4319/` to inspect collected events. For an externally accessible deployment, use your own HTTPS collector and the [self-hosting guide](https://github.com/hyeonse-swing/browser-error-log/blob/main/docs/micro-server.md). Never put the viewer password in browser code.
+
+## Hosting and costs
+
+Infrastructure is not included. Hosting, servers, databases, storage, bandwidth, domains, backups, and third-party services are selected and paid for by each operator. Any charges are billed independently by their providers, not by this project or its maintainers.

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var l=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var h=(r,e,t)=>e in r?a(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var R=(r,e)=>{for(var t in e)a(r,t,{get:e[t],enumerable:!0})},i=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of u(e))!f.call(r,o)&&o!==t&&a(r,o,{get:()=>e[o],enumerable:!(n=d(e,o))||n.enumerable});return r};var y=(r,e,t)=>(t=r!=null?l(E(r)):{},i(e||!r||!r.__esModule?a(t,"default",{value:r,enumerable:!0}):t,r)),m=r=>i(a({},"__esModule",{value:!0}),r);var c=(r,e,t)=>h(r,typeof e!="symbol"?e+"":e,t);var S={};R(S,{ErrorBoundary:()=>s});module.exports=m(S);var p=y(require("react"),1);var s=class extends p.Component{constructor(){super(...arguments);c(this,"state",{error:null});c(this,"reset",()=>{this.setState({error:null})})}static getDerivedStateFromError(t){return{error:t}}componentDidCatch(t,n){try{this.props.client.captureException(t,{type:"react",componentStack:n.componentStack??void 0})}catch{}}render(){let t=this.state.error;return t?typeof this.props.fallback=="function"?this.props.fallback(t,this.reset):this.props.fallback??null:this.props.children}};
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nimport type { BrowserErrorLogClient } from 'browser-error-log';\n\nexport interface ErrorBoundaryProps {\n  client: BrowserErrorLogClient;\n  children: React.ReactNode;\n  fallback?: React.ReactNode | ((error: Error, reset: () => void) => React.ReactNode);\n}\n\ninterface ErrorBoundaryState { error: Error | null }\n\nexport class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = { error: null };\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, info: React.ErrorInfo): void {\n    try {\n      this.props.client.captureException(error, {\n        type: 'react',\n        componentStack: info.componentStack ?? undefined,\n      });\n    } catch { /* a diagnostics hook must not replace the render error */ }\n  }\n\n  private readonly reset = (): void => { this.setState({ error: null }); };\n\n  render(): React.ReactNode {\n    const error = this.state.error;\n    if (!error) return this.props.children;\n    return typeof this.props.fallback === 'function'\n      ? this.props.fallback(error, this.reset)\n      : (this.props.fallback ?? null);\n  }\n}\n"],
+  "mappings": "ksBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,sBAWhB,IAAMC,EAAN,cAAkC,WAAkD,CAApF,kCACLC,EAAA,aAA4B,CAAE,MAAO,IAAK,GAe1CA,EAAA,KAAiB,QAAQ,IAAY,CAAE,KAAK,SAAS,CAAE,MAAO,IAAK,CAAC,CAAG,GAbvE,OAAO,yBAAyBC,EAAkC,CAChE,MAAO,CAAE,MAAAA,CAAM,CACjB,CAEA,kBAAkBA,EAAcC,EAA6B,CAC3D,GAAI,CACF,KAAK,MAAM,OAAO,iBAAiBD,EAAO,CACxC,KAAM,QACN,eAAgBC,EAAK,gBAAkB,MACzC,CAAC,CACH,MAAQ,CAA6D,CACvE,CAIA,QAA0B,CACxB,IAAMD,EAAQ,KAAK,MAAM,MACzB,OAAKA,EACE,OAAO,KAAK,MAAM,UAAa,WAClC,KAAK,MAAM,SAASA,EAAO,KAAK,KAAK,EACpC,KAAK,MAAM,UAAY,KAHT,KAAK,MAAM,QAIhC,CACF",
+  "names": ["index_exports", "__export", "ErrorBoundary", "__toCommonJS", "React", "ErrorBoundary", "__publicField", "error", "info"]
+}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { BrowserErrorLogClient } from 'browser-error-log';
+export interface ErrorBoundaryProps {
+    client: BrowserErrorLogClient;
+    children: React.ReactNode;
+    fallback?: React.ReactNode | ((error: Error, reset: () => void) => React.ReactNode);
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    private readonly reset;
+    render(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE/D,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACrF;AAED,UAAU,kBAAkB;IAAG,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE;AAEpD,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IACxF,KAAK,EAAE,kBAAkB,CAAmB;IAE5C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB,CAEhE;IAED,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAO3D;IAED,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAmD;IAEzE,MAAM,IAAI,KAAK,CAAC,SAAS,CAMxB;CACF"}

package/dist/index.js

@@ -0,0 +1,2 @@
+var s=Object.defineProperty;var i=(t,e,r)=>e in t?s(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var o=(t,e,r)=>i(t,typeof e!="symbol"?e+"":e,r);import*as n from"react";var a=class extends n.Component{constructor(){super(...arguments);o(this,"state",{error:null});o(this,"reset",()=>{this.setState({error:null})})}static getDerivedStateFromError(r){return{error:r}}componentDidCatch(r,c){try{this.props.client.captureException(r,{type:"react",componentStack:c.componentStack??void 0})}catch{}}render(){let r=this.state.error;return r?typeof this.props.fallback=="function"?this.props.fallback(r,this.reset):this.props.fallback??null:this.props.children}};export{a as ErrorBoundary};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nimport type { BrowserErrorLogClient } from 'browser-error-log';\n\nexport interface ErrorBoundaryProps {\n  client: BrowserErrorLogClient;\n  children: React.ReactNode;\n  fallback?: React.ReactNode | ((error: Error, reset: () => void) => React.ReactNode);\n}\n\ninterface ErrorBoundaryState { error: Error | null }\n\nexport class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = { error: null };\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, info: React.ErrorInfo): void {\n    try {\n      this.props.client.captureException(error, {\n        type: 'react',\n        componentStack: info.componentStack ?? undefined,\n      });\n    } catch { /* a diagnostics hook must not replace the render error */ }\n  }\n\n  private readonly reset = (): void => { this.setState({ error: null }); };\n\n  render(): React.ReactNode {\n    const error = this.state.error;\n    if (!error) return this.props.children;\n    return typeof this.props.fallback === 'function'\n      ? this.props.fallback(error, this.reset)\n      : (this.props.fallback ?? null);\n  }\n}\n"],
+  "mappings": "oKAAA,UAAYA,MAAW,QAWhB,IAAMC,EAAN,cAAkC,WAAkD,CAApF,kCACLC,EAAA,aAA4B,CAAE,MAAO,IAAK,GAe1CA,EAAA,KAAiB,QAAQ,IAAY,CAAE,KAAK,SAAS,CAAE,MAAO,IAAK,CAAC,CAAG,GAbvE,OAAO,yBAAyBC,EAAkC,CAChE,MAAO,CAAE,MAAAA,CAAM,CACjB,CAEA,kBAAkBA,EAAcC,EAA6B,CAC3D,GAAI,CACF,KAAK,MAAM,OAAO,iBAAiBD,EAAO,CACxC,KAAM,QACN,eAAgBC,EAAK,gBAAkB,MACzC,CAAC,CACH,MAAQ,CAA6D,CACvE,CAIA,QAA0B,CACxB,IAAMD,EAAQ,KAAK,MAAM,MACzB,OAAKA,EACE,OAAO,KAAK,MAAM,UAAa,WAClC,KAAK,MAAM,SAASA,EAAO,KAAK,KAAK,EACpC,KAAK,MAAM,UAAY,KAHT,KAAK,MAAM,QAIhC,CACF",
+  "names": ["React", "ErrorBoundary", "__publicField", "error", "info"]
+}

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "browser-error-log-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A React Error Boundary adapter for the self-hosted Browser Error Log SDK.",
+  "keywords": [
+    "react",
+    "error-boundary",
+    "error-monitoring",
+    "self-hosted"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18 <20"
+  },
+  "dependencies": {
+    "browser-error-log": "0.1.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hyeonse-swing/browser-error-log.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/hyeonse-swing/browser-error-log#readme",
+  "bugs": {
+    "url": "https://github.com/hyeonse-swing/browser-error-log/issues"
+  }
+}