Skip to content

Commit 033ec10

Browse files
Lissy93Lissy93
committed
feat: advanced pages for debuggig complete
1 parent f729fec commit 033ec10

File tree

6 files changed

+237
-45
lines changed

6 files changed

+237
-45
lines changed

‎src/app/components/misc/breadcrumbs.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,9 @@ export class BreadcrumbsComponent implements OnInit, OnChanges {
153153
'advanced': 'bolt',
154154
'diagnostic-actions': 'wrench',
155155
'admin-links': 'link',
156+
'error-logs': 'exclamation-triangle',
157+
'debug-info': 'receipt',
158+
'status': 'wave-pulse',
156159
};
157160
const iconName = icons[path];
158161
if (!iconName) return;

‎src/app/pages/advanced/error-logs.page.html‎

Lines changed: 118 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,118 @@
1-
<h2 class="text-2xl">Client-Side Errors</h2>
2-
<div class="p-card px-3 py-3 flex flex-col gap-2">
3-
<div *ngFor="let error of errorLog; last as isLast" class="flex flex-col w-full">
4-
<div class="flex justify-between items-center w-full">
5-
<h3 class="m-0 text-lg">{{ error.message }}</h3>
6-
<p class="m-0 text-sm text-gray-500 font-mono">{{ error.date | date: 'short' }}</p>
7-
</div>
8-
<p *ngIf="error.location" class="m-0 text-sm text-gray-500 font-mono">Occurred in {{error.location}}</p>
9-
<div>
10-
<pre *ngIf="error.error && (error.error | json) !== '{}'"
11-
class="p-2 rounded-md text-sm overflow-x-auto bg-surface-0 text-red-400">{{ error.error | json }}</pre>
12-
</div>
13-
<p-divider *ngIf="!isLast" />
14-
</div>
15-
</div>
1+
2+
<p-tabView styleClass="mt-4">
3+
<p-tabPanel header="Client-Side Errors">
4+
<h2 class="text-2xl">Client-Side Errors</h2>
5+
<div class="p-card px-3 py-3 flex flex-col gap-2">
6+
<div *ngFor="let error of errorLog; last as isLast" class="flex flex-col w-full">
7+
<div class="flex justify-between items-center w-full">
8+
<h3 class="m-0 text-lg">{{ error.message }}</h3>
9+
<p class="m-0 text-sm text-gray-500 font-mono">{{ error.date | date: 'short' }}</p>
10+
</div>
11+
<p *ngIf="error.location" class="m-0 text-sm text-gray-500 font-mono">Occurred in {{error.location}}</p>
12+
<div>
13+
<pre *ngIf="error.error && (error.error | json) !== '{}'"
14+
class="p-2 rounded-md text-sm overflow-x-auto bg-surface-0 text-red-400">{{ error.error | json }}</pre>
15+
</div>
16+
<p-divider *ngIf="!isLast" />
17+
</div>
18+
</div>
19+
</p-tabPanel>
20+
<p-tabPanel header="Build Logs">
21+
<h2>Build Logs</h2>
22+
<div>
23+
<div class="flex gap-2">
24+
<p-button
25+
*ngFor="let action of actionsList"
26+
size="small"
27+
(click)="fetchBuildLogs(action)"
28+
label="{{ action.file }}"></p-button>
29+
</div>
30+
<p class="mt-2 opacity-70 text-sm">Click on the buttons above to view job details and the most recent build logs.</p>
31+
32+
<p-divider class="flex my-2" />
33+
34+
<div *ngIf="currentAction">
35+
<h3>{{ currentAction.name }}</h3>
36+
<p class="text-sm italic m-0 opacity-70">
37+
{{ currentAction.description }}
38+
<br>
39+
<span class="font-bold">Links: </span>
40+
<a href="https://github.com/Lissy93/domain-locker/actions/workflows/{{currentAction.file}}" target="_blank" rel="nofollow">View all Runs</a>
41+
|
42+
<a href="https://github.com/Lissy93/domain-locker/blob/main/.github/workflows/{{currentAction.file}}" target="_blank" rel="nofollow">View Source</a>
43+
</p>
44+
<pre *ngIf="currentLogs" class="p-2 bg-bluegray-900 text-bluegray-100 rounded-sm text-xs overflow-x-hidden overflow-y-auto max-h-72">{{ currentLogs }}</pre>
45+
</div>
46+
</div>
47+
</p-tabPanel>
48+
<p-tabPanel header="Server Logs">
49+
<div class="p-1">
50+
<h2 class="text-2xl mb-3">Reading Runtime Logs</h2>
51+
52+
<div class="mb-3">
53+
<h3 class="text-lg font-semibold flex items-center gap-2">
54+
<span>🐳</span> Runtime Logs in Docker
55+
</h3>
56+
<ol class="list-decimal list-inside ml-4 mt-1">
57+
<li>Open your terminal</li>
58+
<li>
59+
Run:
60+
<pre class="bg-surface-0 p-2 rounded text-xs my-1">docker compose logs -f</pre>
61+
</li>
62+
<li>
63+
To target a specific service (e.g. <code>web</code>, <code>api</code>):
64+
<pre class="bg-surface-0 p-2 rounded text-xs my-1">docker compose logs -f domain-locker</pre>
65+
</li>
66+
<li>
67+
To see only the last 100 lines:
68+
<pre class="bg-surface-0 p-2 rounded text-xs my-1">docker compose logs --tail=100 domain-locker</pre>
69+
</li>
70+
</ol>
71+
</div>
72+
73+
<div class="mb-3">
74+
<h3 class="text-lg font-semibold flex items-center gap-2">
75+
<span>▲</span> Runtime Logs in Vercel
76+
</h3>
77+
<ol class="list-decimal list-inside ml-4 mt-1">
78+
<li>
79+
Go to your project at
80+
<a href="https://vercel.com/dashboard" target="_blank" rel="noopener">vercel.com/dashboard</a>
81+
</li>
82+
<li>Click the latest deployment</li>
83+
<li>Scroll down to the <strong>Logs</strong> section to see real-time output</li>
84+
<li>Errors, warnings, and console output will be shown here</li>
85+
</ol>
86+
</div>
87+
88+
<div class="mb-3">
89+
<h3 class="text-lg font-semibold flex items-center gap-2">
90+
<span>💻</span> Runtime Logs from Source (Local Dev)
91+
</h3>
92+
<ol class="list-decimal list-inside ml-4 mt-1">
93+
<li>Start the dev server (<code>npm run dev</code> or <code>pnpm dev</code>)</li>
94+
<li>Logs will appear directly in your terminal</li>
95+
<li>Look for errors, warnings, or stack traces</li>
96+
<li>Add <code>console.log()</code> or <code>console.error()</code> in code for debugging</li>
97+
</ol>
98+
</div>
99+
100+
<div class="mb-3">
101+
<h3 class="text-lg font-semibold flex items-center gap-2">
102+
<span>🐘</span> Runtime Logs (Supabase Functions)
103+
</h3>
104+
<ol class="list-decimal list-inside ml-4 mt-1">
105+
<li>
106+
Go to your project at
107+
<a href="https://app.supabase.com" target="_blank" rel="noopener">app.supabase.com</a>
108+
</li>
109+
<li>Click <strong>Functions → Logs</strong></li>
110+
<li>View real-time logs for each Edge Function execution</li>
111+
</ol>
112+
</div>
113+
</div>
114+
</p-tabPanel>
115+
</p-tabView>
116+
117+
118+

‎src/app/pages/advanced/error-logs.page.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,73 @@ import { CommonModule } from '@angular/common';
33
import { PrimeNgModule } from '~/app/prime-ng.module';
44
import { ErrorHandlerService } from '~/app/services/error-handler.service';
55

6+
interface BuildLogChoice {
7+
file: string;
8+
name: string;
9+
description: string;
10+
}
11+
612
@Component({
713
standalone: true,
814
imports: [CommonModule, PrimeNgModule],
915
templateUrl: './error-logs.page.html',
16+
styles: [`
17+
:host ::ng-deep {
18+
.p-tabview-nav { gap: 0.5rem; }
19+
}
20+
`],
1021
})
1122
export default class ErrorLogs {
1223
public errorLog: { date: Date; message: string; location?: string; error?: any }[] = [];
1324

25+
public actionsList: BuildLogChoice[] = [];
26+
public currentAction: BuildLogChoice | null = null;
27+
public currentLogs: string = '';
28+
1429
constructor(
1530
private errorHandler: ErrorHandlerService,
1631

1732
) {}
1833

1934
ngOnInit(): void {
2035
this.errorLog = this.errorHandler.getRecentErrorLog();
36+
this.actionsList = [
37+
{
38+
file: 'docker.yml',
39+
name: '🐳 Build & Push Docker Image',
40+
description: 'Tests, compiles and publishes the cross-platform Docker image to registries.',
41+
},
42+
{
43+
file: 'tag.yml',
44+
name: '🏷️ Tag new versions',
45+
description: 'Create and push a new Git tag when the app\'s semantic version is updated.',
46+
},
47+
{
48+
file: 'release.yml',
49+
name: '🥏 Create GitHub Release',
50+
description: 'Builds the app and creates a new GitHub release with the compiled files.',
51+
},
52+
{
53+
file: 'mirror.yml',
54+
name: '🪞 Mirror to Codeberg',
55+
description: 'Mirrors the repository and it\'s contents to Codeberg, to provide a backup and alternative access.',
56+
},
57+
];
58+
}
59+
60+
public fetchBuildLogs(action: BuildLogChoice): void {
61+
this.currentAction = action;
62+
this.currentLogs = 'Loading...';
63+
fetch(`https://ghlogs.as93.workers.dev/?owner=lissy93&repo=domain-locker&workflow=${action.file}`)
64+
.then(async (res) => {
65+
if (!res.ok) {
66+
throw new Error(`Failed to fetch logs: ${res.statusText}`);
67+
}
68+
this.currentLogs = await res.text();
69+
})
70+
.catch((err) => {
71+
this.currentLogs = `Error fetching logs: ${err.message}`;
72+
});
73+
2174
}
2275
}

‎src/app/pages/advanced/index.page.html‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,30 @@ <h1>Advanced</h1>
99
</blockquote>
1010
</div>
1111

12-
<ng-container *ngFor="let section of sections">
13-
<h2 class="my-4">{{ section.heading }}</h2>
14-
15-
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 list-none p-0">
16-
<li *ngFor="let item of section.items">
17-
<a
18-
*ngIf="item.external; else internalLink"
19-
[href]="item.link"
20-
target="_blank"
21-
rel="noopener"
22-
class="p-card flex p-3 no-underline transition ease-in duration-300 border-transparent border-3 hover:border-primary-300 h-full"
23-
>
24-
<i [class]="item.icon + ' mr-3'"></i>
25-
<h4 class="m-0">{{ item.title }}</h4>
26-
</a>
27-
<ng-template #internalLink>
28-
<a
29-
[routerLink]="item.link"
30-
class="p-card flex p-3 no-underline transition ease-in duration-300 border-transparent border-3 hover:border-primary-300 h-full"
31-
>
32-
<i [class]="item.icon + ' mr-3'"></i>
33-
<h4 class="m-0">{{ item.title }}</h4>
34-
</a>
35-
</ng-template>
36-
</li>
37-
</ul>
38-
</ng-container>
12+
<p-accordion [activeIndex]="0">
13+
<p-accordionTab *ngFor="let section of sections" [header]="section.heading">
14+
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 list-none p-0">
15+
<li *ngFor="let item of section.items">
16+
<a
17+
*ngIf="item.external; else internalLink"
18+
[href]="item.link"
19+
target="_blank"
20+
rel="noopener"
21+
class="p-card flex p-3 no-underline transition ease-in duration-300 border-transparent border-3 hover:border-primary-300 h-full"
22+
>
23+
<i [class]="item.icon + ' mr-3'"></i>
24+
<h4 class="m-0">{{ item.title }}</h4>
25+
</a>
26+
<ng-template #internalLink>
27+
<a
28+
[routerLink]="item.link"
29+
class="p-card flex p-3 no-underline transition ease-in duration-300 border-transparent border-3 hover:border-primary-300 h-full"
30+
>
31+
<i [class]="item.icon + ' mr-3'"></i>
32+
<h4 class="m-0">{{ item.title }}</h4>
33+
</a>
34+
</ng-template>
35+
</li>
36+
</ul>
37+
</p-accordionTab>
38+
</p-accordion>

‎src/app/pages/advanced/index.page.ts‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,40 @@ type Section = {
1919
standalone: true,
2020
imports: [CommonModule, PrimeNgModule],
2121
templateUrl: './index.page.html',
22-
styles: [``],
22+
styles: [`
23+
:host ::ng-deep {
24+
.p-accordion {
25+
margin-top: 1rem;
26+
.p-accordion-header {
27+
.p-accordion-header-link {
28+
padding: 1.5rem 0 1rem 0;
29+
border: none;
30+
.p-accordion-header-text {
31+
font-size: 1.5rem;
32+
}
33+
}
34+
a {
35+
background-color: var(--surface-0);
36+
color: var(--text-color);
37+
font-weight: 600;
38+
39+
&:hover {
40+
background-color: var(--surface-0);
41+
opacity: 0.8;
42+
}
43+
}
44+
}
45+
46+
.p-accordion-content {
47+
background-color: var(--surface-0);
48+
color: var(--text-color);
49+
border: none;
50+
padding: 0;
51+
}
52+
}
53+
}
54+
55+
`],
2356
})
2457
export default class AdvancedIndexPage {
2558
public sections: Section[] = [

‎src/app/services/error-handler.service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -235,8 +235,8 @@ export class ErrorHandlerService {
235235
console.log('%cLanguage', s, navigator['language']);
236236
console.groupEnd();
237237
console.groupCollapsed('🔗 %cHelp Links','color:#dc8bfa;');
238-
console.log('%cSupport Docs', s, `${window.origin}/about/support`);
239-
console.log('%cDebug Info', s, `${window.origin}/advanced/debug-info`);
238+
console.log('%cDebug Tools', s, `${window.origin}/advanced`);
239+
console.log('%cSupport Docs', s, `${window.origin}/about/support`);
240240
console.log('%cGitHub', s, `https://github.com/lissy93/domain-locker`);
241241
console.groupEnd();
242242
console.groupEnd();

0 commit comments

Comments
 (0)