(null);
39 |
40 | // This form works without JavaScript, but when we have JavaScript we can make
41 | // the experience better by selecting the input on wrong answers! Go ahead, disable
42 | // JavaScript in your browser and see what happens.
43 | useEffect(() => {
44 | if (actionMessage && answerRef.current) {
45 | answerRef.current.select();
46 | }
47 | }, [actionMessage]);
48 |
49 | return (
50 |
51 |
52 | Actions!
53 |
54 | This form submission will send a post request that we handle in our
55 | `action` export. Any route can export an action to handle data
56 | mutations.
57 |
58 |
76 |
77 |
78 |
79 | Additional Resources
80 |
98 |
99 |
You got it right! ;
3 | }
4 |
--------------------------------------------------------------------------------
/examples/v1.0.5/app/routes/demos/params.tsx:
--------------------------------------------------------------------------------
1 | import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
2 |
3 | export function meta() {
4 | return { title: "Boundaries Demo" };
5 | }
6 |
7 | export default function Boundaries() {
8 | return (
9 |
10 |
11 |
13 |
14 |
15 | Click these Links
16 |
17 |
18 |
20 |
21 | one
23 |
24 |
25 |
26 | two
28 |
29 |
30 |
31 |
33 |
34 |
36 |
37 |
39 |
40 |
41 |
44 | The param is {data.param}
45 |
46 | );
47 | }
48 |
49 | // https://remix.run/api/conventions#catchboundary
50 | // https://remix.run/api/remix#usecatch
51 | // https://remix.run/api/guides/not-found
52 | export function CatchBoundary() {
53 | let caught = useCatch();
54 |
55 | let message: React.ReactNode;
56 | switch (caught.status) {
57 | case 401:
58 | message = (
59 |
60 | Looks like you tried to visit a page that you do not have access to.
61 | Maybe ask the webmaster ({caught.data.webmasterEmail}) for access.
62 |
63 | );
64 | case 404:
65 | message = (
66 | Looks like you tried to visit a page that does not exist.
67 | );
68 | default:
69 | message = (
70 |
71 | There was a problem with your request!
72 |
75 | );
76 | }
77 |
78 | return (
79 | <>
80 | Oops!
81 | {message}
82 |
83 | (Isn't it cool that the user gets to stay in context and try a different
84 | link in the parts of the UI that didn't blow up?)
85 |
86 |
87 | );
88 | }
89 |
90 | // https://remix.run/api/conventions#errorboundary
91 | // https://remix.run/api/guides/not-found
92 | export function ErrorBoundary({ error }: { error: Error }) {
93 | console.error(error);
94 | return (
95 | <>
96 | Error!
97 | {error.message}
98 |
99 | (Isn't it cool that the user gets to stay in context and try a different
100 | link in the parts of the UI that didn't blow up?)
101 |
102 |
103 | );
104 | }
105 |
106 | export let meta: MetaFunction = ({ data }) => {
107 | return {
108 | title: data ? `Param: ${data.param}` : "Oops...",
109 | };
110 | };
111 |
--------------------------------------------------------------------------------
/examples/v1.0.5/app/routes/demos/params/index.tsx:
--------------------------------------------------------------------------------
1 | import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
2 | import type { LoaderFunction } from "remix";
3 |
4 | export default function Boundaries() {
5 | return (
6 | <>
7 | Params
8 |
9 | When you name a route segment with $ like{" "}
10 | routes/users/$userId.js, the $ segment will be parsed from
11 | the URL and sent to your loaders and actions by the same name.
12 |
13 | Errors
14 |
15 | When a route throws and error in it's action, loader, or component,
16 | Remix automatically catches it, won't even try to render the component,
17 | but it will render the route's ErrorBoundary instead. If the route
18 | doesn't have one, it will bubble up to the routes above it until it hits
19 | the root.
20 |
21 | So be as granular as you want with your error handling.
22 | Not Found
23 |
24 | (and other{" "}
25 |
26 | client errors
27 |
28 | )
29 |
30 |
31 | Loaders and Actions can throw a Response instead of an
32 | error and Remix will render the CatchBoundary instead of the component.
33 | This is great when loading data from a database isn't found. As soon as
34 | you know you can't render the component normally, throw a 404 response
35 | and send your app into the catch boundary. Just like error boundaries,
36 | catch boundaries bubble, too.
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/examples/v1.0.5/app/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction, LoaderFunction } from "remix";
2 | import { useLoaderData, json, Link } from "remix";
3 |
4 | type IndexData = {
5 | resources: Array<{ name: string; url: string }>;
6 | demos: Array<{ name: string; to: string }>;
7 | };
8 |
9 | // Loaders provide data to components and are only ever called on the server, so
10 | // you can connect to a database or run any server side code you want right next
11 | // to the component that renders it.
12 | // https://remix.run/api/conventions#loader
13 | export let loader: LoaderFunction = () => {
14 | user.test();
15 | let data: IndexData = {
16 | resources: [
17 | {
18 | name: "Remix Docs",
19 | url: "https://remix.run/docs",
20 | },
21 | {
22 | name: "React Router Docs",
23 | url: "https://reactrouter.com/docs",
24 | },
25 | {
26 | name: "Remix Discord",
27 | url: "https://discord.gg/VBePs6d",
28 | },
29 | ],
30 | demos: [
31 | {
32 | to: "demos/actions",
33 | name: "Actions",
34 | },
35 | {
36 | to: "demos/about",
37 | name: "Nested Routes, CSS loading/unloading",
38 | },
39 | {
40 | to: "demos/params",
41 | name: "URL Params and Error Boundaries",
42 | },
43 | ],
44 | };
45 |
46 | // https://remix.run/api/remix#json
47 | return json(data);
48 | };
49 |
50 | // https://remix.run/api/conventions#meta
51 | export let meta: MetaFunction = () => {
52 | return {
53 | title: "Remix Starter",
54 | description: "Welcome to remix!",
55 | };
56 | };
57 |
58 | // https://remix.run/guides/routing#index-routes
59 | export default function Index() {
60 | let data = useLoaderData();
61 |
62 | return (
63 |
64 |
65 | Welcome to Remix!
66 | We're stoked that you're here. 🥳
67 |
68 | Feel free to take a look around the code to see how Remix does things,
69 | it might be a bit different than what you’re used to. When you're
70 | ready to dive deeper, we've got plenty of resources to get you
71 | up-and-running quickly.
72 |
73 |
74 | Check out all the demos in this starter, and then just delete the{" "}
75 | app/routes/demos and app/styles/demos{" "}
76 | folders when you're ready to turn this into your next project.
77 |
78 |
79 |
80 | Demos In This App
81 |
82 | {data.demos.map((demo) => (
83 |
84 |
88 | ))}
89 |
90 | Resources
91 |
92 | {data.resources.map((resource) => (
93 |
94 | {resource.name}
95 |
96 | ))}
97 |
98 |
99 |
;
16 |
17 | export type SanitizedStacktrace = Array<{
18 | methodName: string;
19 | file: string;
20 | line: number;
21 | column: number;
22 | } | null>;
23 |
24 | export type ErrorState = {
25 | loading: boolean;
26 | stacktrace: Stacktrace;
27 | sanitizedStacktrace: SanitizedStacktrace;
28 | convertedStacktrace: Array<{
29 | file: string;
30 | sourceContent: string;
31 | line: number;
32 | }>;
33 | selectedIndex: number | null;
34 | setSelectedIndex: (value: number | null) => void;
35 | };
36 |
37 | export const defaultErrorState: ErrorState = {
38 | stacktrace: [],
39 | sanitizedStacktrace: [],
40 | loading: true,
41 | convertedStacktrace: [],
42 | setSelectedIndex: () => {},
43 | selectedIndex: null,
44 | };
45 |
46 | export const ErrorContext = createContext(defaultErrorState);
47 |
48 | export const ErrorContextProvider: FunctionComponent<{
49 | stacktrace: Stacktrace;
50 | }> = ({ children, stacktrace }) => {
51 | const sanitizedStacktrace = useMemo(() => {
52 | return stacktrace.map((line) => {
53 | const sanitizedLine = line.replace("at", "").trim();
54 |
55 | let result = null;
56 |
57 | result = new RegExp(/(.+) \((.+):(\d+):(\d+)\)/, "g").exec(sanitizedLine);
58 |
59 | if (result) {
60 | const [, methodName, file, line, column] = result;
61 |
62 | return {
63 | methodName,
64 | file,
65 | line,
66 | column,
67 | };
68 | }
69 |
70 | result = new RegExp(/^(\/.+):(\d+):(\d+)/, "g").exec(sanitizedLine);
71 |
72 | if (result) {
73 | const [, file, line, column] = result;
74 |
75 | return {
76 | file,
77 | line,
78 | column,
79 | };
80 | }
81 | });
82 | }, [stacktrace]);
83 |
84 | const [convertedStacktrace, setConvertedStacktrace] = useState([]);
85 | const [loading, setLoading] = useState(true);
86 |
87 | useEffect(() => {
88 | Promise.all(
89 | sanitizedStacktrace.map(async (sanitizedStacktraceLine) => {
90 | if (!sanitizedStacktraceLine) return null;
91 |
92 | // @ts-ignore
93 | const params = new URLSearchParams(sanitizedStacktraceLine);
94 |
95 | return fetch(`/_remix-crash?${params.toString()}`, {
96 | method: "POST",
97 | }).then((response) => {
98 | if (!response.ok) return null;
99 | return response.json();
100 | });
101 | })
102 | )
103 | .then((data) => {
104 | // @ts-ignore
105 | setConvertedStacktrace(data);
106 | })
107 | .finally(() => {
108 | setLoading(false);
109 | });
110 | }, [sanitizedStacktrace]);
111 |
112 | const [selectedIndex, setSelectedIndex] = useState(null);
113 |
114 | useEffect(() => {
115 | setSelectedIndex(stacktrace.length ? 0 : null);
116 | }, [stacktrace]);
117 |
118 | return (
119 |
130 | {children}
131 |
132 | );
133 | };
134 |
135 | export const useError = () => {
136 | return useContext(ErrorContext);
137 | };
138 |
139 | export function ErrorBoundary({ error }: { error: Error }) {
140 | console.error(error);
141 |
142 | if (process.env.NODE_ENV !== "development") {
143 | return
175 | 500
176 | Internal Server Error.
184 |
185 |
186 | {`💥 ${type}: ${message}`}
208 |
229 |
230 |
{type}
231 |
{message}
232 |
235 |
236 |
238 |
239 |
240 |
242 |
243 |
244 |
245 |
262 | {stacktrace.map((line, index) => {
263 | return (
264 |
265 | {line}
266 |
267 | );
268 | })}
269 |
270 | );
271 | };
272 |
273 | export const StackTraceLine: FunctionComponent<{ index: number }> = ({
274 | index,
275 | children,
276 | }) => {
277 | const { convertedStacktrace, setSelectedIndex, loading, selectedIndex } =
278 | useError();
279 |
280 | if (loading) return null;
281 |
282 | const line = convertedStacktrace[index];
283 |
284 | return (
285 |
286 | {
289 | e.preventDefault();
290 | setSelectedIndex(index);
291 | }}
292 | className={[
293 | "p-8 border border-slate-900 w-full text-left break-words",
294 | selectedIndex === index ? "bg-gray-700 bg-opacity-40" : "",
295 | ].join(" ")}
296 | >
297 | {line ? {line.file} : children}
298 |
299 |
300 | );
301 | };
302 |
303 | const CodeFrame = () => {
304 | const { convertedStacktrace, selectedIndex } = useError();
305 |
306 | const convertedStacktraceLine =
307 | selectedIndex !== null ? convertedStacktrace[selectedIndex] : null;
308 |
309 | useLayoutEffect(() => {
310 | document.querySelector(".selected")?.scrollIntoView({ block: "center" });
311 | }, [convertedStacktraceLine]);
312 |
313 | if (!convertedStacktraceLine) return null;
314 |
315 | return (
316 |
317 |
318 | {hljs
319 | .highlight(convertedStacktraceLine.sourceContent, {
320 | language: "tsx",
321 | })
322 | .value.split("\n")
323 | .map((line, index) => {
324 | const selected = index + 1 === convertedStacktraceLine.line;
325 |
326 | return (
327 |
335 |
342 | {index + 1}
343 |
344 |
351 |
355 |
356 | );
357 | };
358 |
--------------------------------------------------------------------------------
/src/client/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/src/client/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./ErrorBoundary";
2 |
--------------------------------------------------------------------------------
/src/server/endpoints.ts:
--------------------------------------------------------------------------------
1 | import { ActionFunction, LoaderFunction, json } from "remix";
2 | import { SourceMapConsumer } from "source-map";
3 | import { CORSResponse } from "./utils";
4 | import { readFile } from "fs/promises";
5 | import axios from "axios";
6 |
7 | async function getFileContent(pathOrURL: string): Promise {
8 | const isRemote = new RegExp(/^http(s)?:\/\//).test(pathOrURL);
9 |
10 | if (isRemote) {
11 | return axios.get(pathOrURL).then((response) => response.data);
12 | }
13 |
14 | return readFile(pathOrURL, { encoding: "utf-8" });
15 | }
16 |
17 | async function extractSourceMap(data: string, pathOrURL: string) {
18 | let sourceMapResult;
19 |
20 | sourceMapResult = new RegExp(
21 | /\n\/\/\# sourceMappingURL\=data\:application\/json\;base64\,(.*)/,
22 | "g"
23 | ).exec(data);
24 |
25 | if (sourceMapResult?.length) {
26 | const [_, base64SourceMap] = sourceMapResult;
27 |
28 | return JSON.parse(Buffer.from(base64SourceMap, "base64").toString("utf-8"));
29 | }
30 |
31 | sourceMapResult = new RegExp(
32 | /\/\/\# sourceMappingURL\=(\/(.*)\.map)/,
33 | "g"
34 | ).exec(data);
35 |
36 | if (sourceMapResult?.length) {
37 | const bundledFileURL = new URL(pathOrURL);
38 | const [_, sourceMapPath] = sourceMapResult;
39 |
40 | const rawSourceMap = await axios
41 | .get(sourceMapPath, { baseURL: bundledFileURL.origin })
42 | .then((response) => response.data);
43 |
44 | return rawSourceMap;
45 | }
46 |
47 | return null;
48 | }
49 |
50 | export const loader: LoaderFunction = () => {
51 | if (process.env.NODE_ENV !== "development") {
52 | throw new Response(null, { status: 404 });
53 | }
54 |
55 | return new CORSResponse();
56 | };
57 |
58 | export const action: ActionFunction = async ({ request }) => {
59 | if (process.env.NODE_ENV !== "development") {
60 | throw new Response(null, { status: 404 });
61 | }
62 |
63 | const url = new URL(request.url);
64 | const root = process.cwd();
65 |
66 | const bundledFile = url.searchParams.get("file");
67 | const line = url.searchParams.get("line");
68 | const column = url.searchParams.get("column");
69 |
70 | if (!bundledFile || !line || !column) {
71 | throw new Response(null, { status: 422 });
72 | }
73 |
74 | const data = await getFileContent(bundledFile);
75 |
76 | const rawSourceMap = await extractSourceMap(data, bundledFile);
77 |
78 | if (!rawSourceMap) {
79 | return json({
80 | root,
81 | file: bundledFile.replace(root, ""),
82 | sourceContent: data,
83 | line: line ? parseInt(line) : null,
84 | column: column ? parseInt(column) : null,
85 | });
86 | }
87 |
88 | const consumer = await new SourceMapConsumer(rawSourceMap);
89 |
90 | if (!line || !column) {
91 | throw new Error("Failed to load source map");
92 | }
93 |
94 | const sourcePosition = consumer.originalPositionFor({
95 | line: +line,
96 | column: +column ?? 0,
97 | });
98 |
99 | if (!sourcePosition.source) {
100 | throw new Error("Failed to load source map");
101 | }
102 |
103 | const sourceContent =
104 | consumer.sourceContentFor(
105 | sourcePosition.source,
106 | /* returnNullOnMissing */ true
107 | ) ?? null;
108 |
109 | const file = sourcePosition.source.replace("route-module:", "");
110 |
111 | return json({
112 | root,
113 | file: file.replace(root, ""),
114 | sourceContent,
115 | line: sourcePosition.line,
116 | column: sourcePosition.column,
117 | });
118 | };
119 |
--------------------------------------------------------------------------------
/src/server/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./endpoints";
2 |
--------------------------------------------------------------------------------
/src/server/utils.ts:
--------------------------------------------------------------------------------
1 | export class CORSHeaders extends Headers {
2 | constructor() {
3 | super();
4 |
5 | this.append("Access-Control-Allow-Origin", "*");
6 |
7 | this.append(
8 | "Access-Control-Allow-Methods",
9 | "GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD"
10 | );
11 |
12 | this.append(
13 | "Access-Control-Allow-Headers",
14 | "Content-Type, Accept, Authorization"
15 | );
16 | }
17 | }
18 |
19 | export class CORSResponse extends Response {
20 | constructor() {
21 | super(null, { status: 204, headers: new CORSHeaders() });
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///