✨ Add basic error boundary to catch errors

src/components/VisualErrorBoundary/Readme.md

@@ -0,0 +1,15 @@
+A basic error boundary which detects errors and displays them.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+function ErrorMaker() {
+    throw new Error("ErrorMaker threw an error.");
+}
+
+<Bluelib>
+    <VisualErrorBoundary>
+        <ErrorMaker/>
+    </VisualErrorBoundary>
+</Bluelib>
+```

src/components/VisualErrorBoundary/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+import VisualLog from "../VisualLog";
+
+
+export default class VisualErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {"error": null, "errorInfo": null};
+    }
+
+    componentDidCatch(error, errorInfo) {
+        this.setState({"error": error, "errorInfo": errorInfo});
+    }
+
+    render() {
+        if(this.state.error) {
+            return (
+                <VisualLog level={"error"}>{this.state.error.toString()}</VisualLog>
+            )
+        }
+        else {
+            return this.props.children;
+        }
+    }
+}

src/components/VisualLog/Readme.md

@@ -0,0 +1,31 @@
+A displayer of debug information.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <div>
+        <VisualLog level={"debug"}>
+            Debug: Shields are active.
+        </VisualLog>
+    </div>
+
+    <div>
+        <VisualLog level={"info"}>
+            Info: Asteroid approaching.
+        </VisualLog>
+    </div>
+
+    <div>
+        <VisualLog level={"warning"}>
+            Warning: An asteroid damaged our shield.
+        </VisualLog>
+    </div>
+
+    <div>
+        <VisualLog level={"error"}>
+            Error: Shields are not responsive.
+        </VisualLog>
+    </div>
+</Bluelib>
+```

src/components/VisualLog/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import Color from "../Color";
+import PropTypes from "prop-types";
+
+
+const COLORS = {
+    "error": "red",
+    "warning": "yellow",
+    "info": "blue",
+    "debug": "magenta",
+}
+
+const EMOJIS = {
+    "error": "⛔️",
+    "warning": "⚠️",
+    "info": "ℹ️",
+    "debug": "🐛",
+}
+
+
+export default function VisualLog({children, level}) {
+    return (
+        <Color value={COLORS[level]}>
+            {EMOJIS[level]} {children}
+        </Color>
+    )
+}
+
+
+VisualLog.propTypes = {
+    children: PropTypes.node,
+    level: PropTypes.oneOf(["error", "warning", "info", "debug"])
+}

src/components/index.js

@@ -22,3 +22,5 @@ export {default as Table} from "./Table";
 export {default as Title} from "./Title";
 export {default as Underline} from "./Underline";
 export {default as BaseLink} from "./BaseLink";
+export {default as VisualErrorBoundary} from "./VisualErrorBoundary";
+export {default as VisualLog} from "./VisualLog";