alex/agb
1
0
Fork 0
mirror of https://github.com/italicsjenga/agb.git synced 2024-12-23 08:11:33 +11:00
Code Issues Packages Projects Releases Wiki Activity

backtrace page with more detail

Browse source
This commit is contained in:
Corwin 2024-04-17 19:44:31 +01:00
parent 9fc52000fe
commit 72e7850152
No known key found for this signature in database
2 changed files with 68 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
website/agb/src/app/crash/backtrace.tsx
View file

@ -1,33 +1,84 @@
"use client"; "use client";
import { FC } from "react"; import { ContentBlock } from "../contentBlock";
import { useClientValue } from "../useClientValue.hook"; import { useClientValue } from "../useClientValue.hook";
import { styled } from "styled-components"; import { styled } from "styled-components";
const BacktraceWrapper = styled.section` export function BacktracePage() {
display: flex; return (
gap: 10px; <ContentBlock>
justify-content: center; <h1>agbrs crash backtrace viewer</h1>
`; <p>
You likely got here from the link / QR code that was displayed when a
function getBacktrace() { game you were playing crashed. This is the default crash page for games
return window.location.hash.slice(1); made using the agb library.
</p>
<p>
The creator of the game is <em>very</em> likely interested in the code
below <em>along with</em> a description of what you were doing at the
time.{" "}
<strong>Send these to the creator of the game you are playing.</strong>
</p>
<BacktraceDisplay />
<p>
<em>
The owners of this website are not necessarily the creators of the
game you are playing.
</em>
</p>
<h2>For game developers</h2>
<p>This page will eventually let you view backtraces in the browser.</p>
<p>
For now you can copy the backtrace code here and use it with{" "}
<code>agb-addr2line</code>.
</p>
<p>If you don&apos;t want players to be sent to this page, you can:</p>
<ol>
<li>Configure the backtrace page to point to your own site</li>
<li>Configure the backtrace page to not point to a site at all</li>
<li>Not use the backtrace feature</li>
</ol>
</ContentBlock>
);
} }
export function BacktraceDisplay() { function BacktraceDisplay() {
const backtrace = useClientValue(getBacktrace) ?? ""; const backtrace = useClientValue(getBacktrace) ?? "";
return ( return (
<BacktraceWrapper> <BacktraceWrapper>
<label>Backtrace:</label> <BacktraceCodeBlock>{backtrace}</BacktraceCodeBlock>
<input type="text" value={backtrace} /> <BacktraceCopyButton
<button
onClick={() => { onClick={() => {
navigator.clipboard.writeText(backtrace); navigator.clipboard.writeText(backtrace);
}} }}
> >
Copy Copy
</button> </BacktraceCopyButton>
</BacktraceWrapper> </BacktraceWrapper>
); );
} }
const BacktraceCodeBlock = styled.code`
font-size: 3rem;
background-color: #dddddd;
padding: 0px 40px;
overflow-x: scroll;
`;
const BacktraceWrapper = styled.section`
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
`;
const BacktraceCopyButton = styled.button`
padding: 10px;
overflow-x: scroll;
`;
function getBacktrace() {
return window.location.hash.slice(1);
}

16
website/agb/src/app/crash/page.tsx
View file

@ -1,21 +1,11 @@
import { Metadata } from "next"; import { Metadata } from "next";
import { BacktraceDisplay } from "./backtrace"; import { BacktracePage } from "./backtrace";
import { ContentBlock } from "../contentBlock"; import { ContentBlock } from "../contentBlock";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "agbrs crash backtrace", title: "agbrs crash backtrace",
}; };
export default function Crash() { export default function Backtrace() {
return ( return <BacktracePage />;
<ContentBlock>
<h1>agbrs crash backtrace viewer</h1>
<p>This page will eventually let you view backtraces in the browser.</p>
<p>
For now you can copy the backtrace code here and use it with{" "}
<code>agb-addr2line</code>
</p>
<BacktraceDisplay />
</ContentBlock>
);
} }