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";
import { FC } from "react";
import { ContentBlock } from "../contentBlock";
import { useClientValue } from "../useClientValue.hook";
import { styled } from "styled-components";
const BacktraceWrapper = styled.section`
display: flex;
gap: 10px;
justify-content: center;
`;
function getBacktrace() {
return window.location.hash.slice(1);
export function BacktracePage() {
return (
<ContentBlock>
<h1>agbrs crash backtrace viewer</h1>
<p>
You likely got here from the link / QR code that was displayed when a
game you were playing crashed. This is the default crash page for games
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) ?? "";
return (
<BacktraceWrapper>
<label>Backtrace:</label>
<input type="text" value={backtrace} />
<button
<BacktraceCodeBlock>{backtrace}</BacktraceCodeBlock>
<BacktraceCopyButton
onClick={() => {
navigator.clipboard.writeText(backtrace);
}}
>
Copy
</button>
</BacktraceCopyButton>
</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 { BacktraceDisplay } from "./backtrace";
import { BacktracePage } from "./backtrace";
import { ContentBlock } from "../contentBlock";
export const metadata: Metadata = {
title: "agbrs crash backtrace",
};
export default function Crash() {
return (
<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>
);
export default function Backtrace() {
return <BacktracePage />;
}