98 lines
2.5 KiB
JavaScript
98 lines
2.5 KiB
JavaScript
"use client";
|
|
import * as React$1 from "react";
|
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
//#region src/CatchBoundary.tsx
|
|
function CatchBoundary(props) {
|
|
const errorComponent = props.errorComponent ?? ErrorComponent;
|
|
return /* @__PURE__ */ jsx(CatchBoundaryImpl, {
|
|
getResetKey: props.getResetKey,
|
|
onCatch: props.onCatch,
|
|
children: ({ error, reset }) => {
|
|
if (error) return React$1.createElement(errorComponent, {
|
|
error,
|
|
reset
|
|
});
|
|
return props.children;
|
|
}
|
|
});
|
|
}
|
|
var CatchBoundaryImpl = class extends React$1.Component {
|
|
constructor(..._args) {
|
|
super(..._args);
|
|
this.state = { error: null };
|
|
}
|
|
static getDerivedStateFromProps(props, state) {
|
|
const resetKey = props.getResetKey();
|
|
if (state.error && state.resetKey !== resetKey) return {
|
|
resetKey,
|
|
error: null
|
|
};
|
|
return { resetKey };
|
|
}
|
|
static getDerivedStateFromError(error) {
|
|
return { error };
|
|
}
|
|
reset() {
|
|
this.setState({ error: null });
|
|
}
|
|
componentDidCatch(error, errorInfo) {
|
|
if (this.props.onCatch) this.props.onCatch(error, errorInfo);
|
|
}
|
|
render() {
|
|
return this.props.children({
|
|
error: this.state.error,
|
|
reset: () => {
|
|
this.reset();
|
|
}
|
|
});
|
|
}
|
|
};
|
|
function ErrorComponent({ error }) {
|
|
const [show, setShow] = React$1.useState(process.env.NODE_ENV !== "production");
|
|
return /* @__PURE__ */ jsxs("div", {
|
|
style: {
|
|
padding: ".5rem",
|
|
maxWidth: "100%"
|
|
},
|
|
children: [
|
|
/* @__PURE__ */ jsxs("div", {
|
|
style: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: ".5rem"
|
|
},
|
|
children: [/* @__PURE__ */ jsx("strong", {
|
|
style: { fontSize: "1rem" },
|
|
children: "Something went wrong!"
|
|
}), /* @__PURE__ */ jsx("button", {
|
|
style: {
|
|
appearance: "none",
|
|
fontSize: ".6em",
|
|
border: "1px solid currentColor",
|
|
padding: ".1rem .2rem",
|
|
fontWeight: "bold",
|
|
borderRadius: ".25rem"
|
|
},
|
|
onClick: () => setShow((d) => !d),
|
|
children: show ? "Hide Error" : "Show Error"
|
|
})]
|
|
}),
|
|
/* @__PURE__ */ jsx("div", { style: { height: ".25rem" } }),
|
|
show ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("pre", {
|
|
style: {
|
|
fontSize: ".7em",
|
|
border: "1px solid red",
|
|
borderRadius: ".25rem",
|
|
padding: ".3rem",
|
|
color: "red",
|
|
overflow: "auto"
|
|
},
|
|
children: error.message ? /* @__PURE__ */ jsx("code", { children: error.message }) : null
|
|
}) }) : null
|
|
]
|
|
});
|
|
}
|
|
//#endregion
|
|
export { CatchBoundary, ErrorComponent };
|
|
|
|
//# sourceMappingURL=CatchBoundary.js.map
|