Commit 9eab54e0 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

feat: add instructions on production error page to ease Castopod debugging process

closes #224
parent b2db783c
Loading
Loading
Loading
Loading
Loading
+39 −67

File changed.

Preview size limit exceeded, changes collapsed.

+15 −0
Original line number Diff line number Diff line
import "@github/clipboard-copy-element";

document.addEventListener("clipboard-copy", function (event) {
  const button = event.target as HTMLButtonElement;
  button.classList.add(
    "[&>.copy-base]:hidden",
    "[&>.copy-success]:inline-flex"
  );
  setTimeout(() => {
    button.classList.remove(
      "[&>.copy-base]:hidden",
      "[&>.copy-success]:inline-flex"
    );
  }, 1000);
});
+1 −0
Original line number Diff line number Diff line
@@ -10,6 +10,7 @@ const Clipboard = (): void => {
      );
      if (element) {
        button.addEventListener("click", () => {
          console.log(element);
          element.select();
          element.setSelectionRange(0, element.value.length);
          document.execCommand("copy");
+2 −0
Original line number Diff line number Diff line
@@ -4,6 +4,8 @@

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>404 Page Not Found</title>
    <link rel='stylesheet' type='text/css' href='<?= route_to('themes-colors-css') ?>' />
    <?= service('vite')->asset('styles/index.css', 'css') ?>
+39 −5
Original line number Diff line number Diff line
@@ -5,17 +5,51 @@
<head>
	<meta charset="UTF-8">
	<meta name="robots" content="noindex">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<title>Whoops!</title>
	<link rel='stylesheet' type='text/css' href='<?= route_to('themes-colors-css') ?>' />
    <?= service('vite')->asset('styles/index.css', 'css') ?>
	<?php if (service('authentication')->isLoggedIn()): ?>
		<?= service('vite')->asset('js/error.ts', 'js') ?>
	<?php endif; ?>
</head>

<body class="flex flex-col items-center justify-center min-h-screen px-2 text-center bg-base theme-<?= service('settings')
<body class="flex flex-col items-center justify-center min-h-screen px-4 bg-base gap-y-12 theme-<?= service('settings')
        ->get('App.theme') ?>">
	<?= svg('castopod-mascot_confused', 'h-64') ?>
	<?php if (service('authentication')->isLoggedIn()): ?>
	<div class="flex flex-col items-center justify-center flex-1 gap-6">
		<div class="flex flex-col items-center">
			<?= svg('castopod-mascot_confused', 'w-full max-w-xs p-6') ?>
			<h1 class="text-3xl font-bold font-display md:text-4xl lg:text-5xl">Whoops!</h1>
	<p class="mb-6 text-lg text-skin-muted md:text-xl lg:text-2xl">We seem to have hit a snag. Please try again later...</p>
			<p class="text-lg text-skin-muted md:text-xl lg:text-2xl">We seem to have hit a snag. Please try again later...</p>
		</div>
		<div class="flex flex-col items-start max-w-xl">
			<h2 class="font-mono font-semibold"><?= esc($title), esc($exception->getCode() ? ' #' . $exception->getCode() : '') ?></h2>
			<p class="font-mono"><?= nl2br(esc($exception->getMessage())) ?><br/><span class="pl-4">at <span class="select-all bg-elevated"><?= nl2br(esc($exception->getFile())) ?>:<?= esc($exception->getLine()) ?></span></span></p>
			<p id="error-stack-trace" class="hidden"><?= nl2br(esc($exception)) ?></p>
			<clipboard-copy for="error-stack-trace" class="items-center self-end px-3 py-1 mt-2 font-semibold leading-8 transition-all rounded-full shadow group text-accent-contrast hover:bg-accent-hover bg-accent-base focus:ring-accent">
				<span class="inline-flex items-center copy-base"><?= icon('file-copy', 'mr-2') ?>Copy stack trace</span>
				<span class="items-center hidden copy-success"><?= icon('check', 'mr-2') ?>Copied</span>
			</clipboard-copy>
		</div>
	</div>
	<div class="flex flex-col justify-center w-full gap-6 py-12 border-t-2 md:flex-row border-subtle">
		<div class="w-full max-w-md mx-auto md:mx-0">
			<h2 class="text-xl font-semibold font-display">Found a bug?</h2>
			<p>You can help get it fixed by <a href="https://castopod.org/new-issue_bug" target="_blank" rel="noopener noreferrer" class="underline decoration-3 hover:no-underline focus:ring-accent decoration-accent">creating an issue on the Castopod issue tracker</a>. Please check that the issue does not already exist beforehand.</p>
		</div>	
		<div class="w-full max-w-md mx-auto md:mx-0">
			<h2 class="text-xl font-semibold font-display">Not sure what's happening?</h2>
			<p>You can ask for help in the <a href="https://castopod.org/chat" target="_blank" rel="noopener noreferrer" class="underline decoration-2 hover:no-underline focus:ring-accent decoration-accent">Castopod community chat</a>!</p>
		</div>
	</div>
	<?php else: ?>
		<div class="flex flex-col items-center">
			<?= svg('castopod-mascot_confused', 'w-full max-w-xs p-6') ?>
			<h1 class="text-3xl font-bold font-display md:text-4xl lg:text-5xl">Whoops!</h1>
			<p class="text-lg text-skin-muted md:text-xl lg:text-2xl">We seem to have hit a snag. Please try again later...</p>
		</div>
	<?php endif; ?>
</body>

</html>
Loading