()(fetchUser(id));
+
+async function UserPage({ id }: { id: number }) {
+ const [user, error] = await getUser(id);
+
+ if (error) {
+ // Handle specific errors or show a generic message
+ if (error instanceof SpecificError) {
+ return A specific error occurred.
;
+ }
+ return User not found or an error occurred.
;
+ }
+
+ return Hello {user.name}!
;
+}
+```
+
+## Comparison with `try...catch`
+
+`tryCatch` helps avoid deeply nested `try...catch` blocks, especially when handling sequential operations that can fail.
+
+```ts
+// ✅ Using tryCatch for sequential fallbacks
+const getData = async () => {
+ let [data, err] = await tryCatch(failingOperation1);
+ if (!err) return Response.json({ data });
+
+ [data, err] = await tryCatch(failingOperation2);
+ if (!err) return Response.json({ data });
+
+ [data, err] = await tryCatch(successfulOperation);
+ if (!err) return Response.json({ data });
+
+ return Response.error();
+};
+
+// ❌ Traditional try...catch leads to deep nesting
+const getDataStandard = async () => {
+ try {
+ const data = await failingOperation1();
+ return Response.json({ data });
+ } catch (err) {
+ try {
+ const data = await failingOperation2();
+ return Response.json({ data });
+ } catch (err) {
+ try {
+ const data = await successfulOperation();
+ return Response.json({ data });
+ } catch (err) {
+ return Response.error();
+ }
+ }
+ }
+};
+```
+
+## API Reference
+
+### Main Function
+
+```ts
+tryCatch(
+ fn?: (() => T) | T | Promise | (() => Promise),
+ operationName?: string
+): Result
+```
+
+- Handles values, sync/async functions, and promises automatically.
+
+### Explicit Synchronous Handling
+
+```ts
+tryCatch.sync(
+ fn: () => T,
+ operationName?: string
+): Result
+```
+
+### Explicit Asynchronous Handling
+
+```ts
+tryCatch.async(
+ fn: Promise | (() => Promise),
+ operationName?: string
+): Promise>
+```
+
+### Result Type
+
+The utility returns a branded tuple to enable static analysis by the [validation tooling](/try-catch-tuple/tooling-api/).
+
+```ts
+type Result = ([data: T, error: null] | [data: null, error: E]) &
+ { __tryCatchTupleResult: "marker" };
+```
+
+## Edge Cases
+
+```ts
+// Handles undefined and null inputs gracefully
+tryCatch(undefined); // Returns [undefined, null]
+tryCatch(null); // Returns [null, null]
+
+// Catches and normalizes thrown errors
+tryCatch(() => { throw new Error("Unexpected Error"); }); // Returns [null, Error]
+
+// Handles rejected promises
+tryCatch(Promise.reject(new Error("Promise rejected")));
\ No newline at end of file
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
new file mode 100644
index 0000000..b4df855
--- /dev/null
+++ b/website/src/styles/global.css
@@ -0,0 +1,77 @@
+@layer base, starlight, theme, components, utilities;
+
+@import "@astrojs/starlight-tailwind";
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@theme {
+ --font-sans: "Inter Variable";
+ --font-mono: "Commit Mono";
+
+ /* Generated accent color palettes. */
+ --color-accent-200: #cec3de;
+ --color-accent-600: #623e86;
+ --color-accent-900: #392a4a;
+ --color-accent-950: #281f33;
+ /* Generated gray color palettes. */
+ --color-gray-100: #f6f6fa;
+ --color-gray-200: #ecedf6;
+ --color-gray-300: #c0c1cc;
+ --color-gray-400: #89899e;
+ --color-gray-500: #565669;
+ --color-gray-700: #363648;
+ --color-gray-800: #252535;
+ --color-gray-900: #17171f;
+}
+
+@layer starlight.components {
+ .expressive-code .twoslash-popup-container,
+ .expressive-code .twoslash-static-container {
+ --ec-twoSlash-bg: var(--sl-color-bg-inline-code);
+ --ec-twoSlash-brdCol: var(--sl-color-accent-high);
+ border-radius: 0 !important;
+ /* padding-left: 0.5rem; */
+ }
+
+ .expressive-code .twoslash-static-container {
+ transform: translateX(-9px);
+ margin-top: 4px !important;
+ }
+
+ .expressive-code .twoslash-popup-container::before {
+ top: -4.8px !important;
+ left: 8px !important;
+ }
+
+ .expressive-code .twoslash-static-container::before {
+ top: -5.8px !important;
+ left: 8px !important;
+ }
+
+ .expressive-code .frame pre {
+ background-image: url("../assets/nnnoise.svg") !important;
+ }
+}
+
+@layer starlight {
+ @layer reset {
+ /* Override margin reset for file tree elements */
+ starlight-file-tree {
+ --x-space: 0.5rem;
+
+ & .tree-entry svg {
+ margin-inline: 0.25rem 0.375rem;
+ }
+
+ & .file.empty {
+ margin-inline: 1.25rem 0.375rem;
+ }
+ }
+
+ @media print {
+ starlight-file-tree {
+ font-size: .7em;
+ }
+ }
+ }
+}
diff --git a/website/tsconfig.json b/website/tsconfig.json
new file mode 100644
index 0000000..8bf91d3
--- /dev/null
+++ b/website/tsconfig.json
@@ -0,0 +1,5 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "include": [".astro/types.d.ts", "**/*"],
+ "exclude": ["dist"]
+}