-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy patherror.vue
More file actions
404 lines (363 loc) Β· 12.2 KB
/
error.vue
File metadata and controls
404 lines (363 loc) Β· 12.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
<script setup lang="ts">
// This goes in your root directory as ~/error.vue (NOT in layouts/ or pages/)
interface Props {
error: {
statusCode?: number
statusMessage?: string
message?: string
url?: string
data?: any
}
}
const props = defineProps<Props>()
// Check if we're in development and on client side
const isDev = process.dev
const isClientSide = process.client
// Comprehensive HTTP status code handling
const errorData = computed(() => {
const statusCode = props.error.statusCode || 500
const statusCodeStr = statusCode.toString()
// 4xx Client Errors
if (statusCode === 400) {
return {
title: 'Bad Request',
subtitle: 'That request didn\'t look quite right to our RACHA!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: false
}
}
if (statusCode === 401) {
return {
title: 'Unauthorized',
subtitle: 'You need to be logged in to access this page!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: false
}
}
if (statusCode === 403) {
return {
title: 'Forbidden',
subtitle: 'This area is off-limits, even for our RACHA!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: false
}
}
if (statusCode === 404) {
return {
title: 'Page Not Found',
subtitle: 'Oops! This page seems to have vanished into the decentralized void.',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: false
}
}
if (statusCode === 408) {
return {
title: 'Request Timeout',
subtitle: 'That took longer than our RACHA had patience for!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: true
}
}
if (statusCode === 410) {
return {
title: 'Gone',
subtitle: 'This page has been permanently removed!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: false
}
}
if (statusCode === 413) {
return {
title: 'Payload Too Large',
subtitle: 'Whoa! That\'s too much data for our website to handle!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: false
}
}
if (statusCode === 422) {
return {
title: 'Unprocessable Entity',
subtitle: 'Our RACHA couldn\'t understand that request!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: false
}
}
if (statusCode === 429) {
return {
title: 'Too Many Requests',
subtitle: 'Slow down! Our RACHA needs a breather!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '4xx',
showRetry: true
}
}
// 5xx Server Errors
if (statusCode === 500) {
return {
title: 'Internal Server Error',
subtitle: 'Our website encountered an unexpected problem!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: true
}
}
if (statusCode === 501) {
return {
title: 'Not Implemented',
subtitle: 'This feature isn\'t ready yet!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: false
}
}
if (statusCode === 502) {
return {
title: 'Bad Gateway',
subtitle: 'There\'s an issue with our web server!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: true
}
}
if (statusCode === 503) {
return {
title: 'Service Unavailable',
subtitle: 'Our website is temporarily down for maintenance!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: true
}
}
if (statusCode === 504) {
return {
title: 'Gateway Timeout',
subtitle: 'Our web server took too long to respond!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: true
}
}
if (statusCode === 505) {
return {
title: 'HTTP Version Not Supported',
subtitle: 'Your browser is using an outdated protocol!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: false
}
}
if (statusCode === 507) {
return {
title: 'Insufficient Storage',
subtitle: 'Our web server is running out of space!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: false
}
}
if (statusCode === 508) {
return {
title: 'Loop Detected',
subtitle: 'Our RACHA got stuck in an infinite loop!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: false
}
}
if (statusCode === 511) {
return {
title: 'Network Authentication Required',
subtitle: 'Network access requires authentication!',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: '5xx',
showRetry: false
}
}
// Default fallback for any other status codes
return {
title: statusCode >= 500 ? 'Server Error' : statusCode >= 400 ? 'Client Error' : 'Something Went Wrong',
subtitle: statusCode >= 500
? 'Our website is having technical difficulties!'
: statusCode >= 400
? 'That request confused our RACHA!'
: 'An unexpected error occurred.',
image: '/img/errors/error-confused-racha.svg',
statusCode: statusCodeStr,
category: statusCode >= 500 ? '5xx' : statusCode >= 400 ? '4xx' : 'unknown',
showRetry: statusCode >= 500
}
})
// SEO metadata - following best practices for all error codes
useSeoMeta({
title: `${errorData.value.statusCode} - ${errorData.value.title} | Storacha`,
description: errorData.value.subtitle,
robots: 'noindex, follow', // Best practice: don't index errors but allow link following
})
// Structured data for error pages
useHead({
script: [{
type: 'application/ld+json',
innerHTML: JSON.stringify({
"@context": "https://schema.org",
"@type": "WebPage",
"name": `${errorData.value.statusCode} Error`,
"description": errorData.value.subtitle,
"url": `https://storacha.network${props.error.url || ''}`,
"potentialAction": {
"@type": "Action",
"name": "Go to Homepage",
"target": "https://storacha.network"
}
})
}]
})
// Handle navigation with proper error recovery
function handleGoHome() {
return clearError({ redirect: '/' })
}
function handleGoBack() {
if (isClientSide && window.history.length > 1) {
window.history.back()
} else {
return clearError({ redirect: '/' })
}
}
function handleRetry() {
return clearError({ redirect: props.error.url || '/' })
}
// Automatic retry for certain server errors (after delay)
let retryTimeout: NodeJS.Timeout | null = null
onMounted(() => {
// Auto-retry for temporary server errors after 5 seconds
if (errorData.value.category === '5xx' && [502, 503, 504].includes(props.error.statusCode || 0)) {
retryTimeout = setTimeout(() => {
if (isClientSide) {
handleRetry()
}
}, 5000)
}
})
onUnmounted(() => {
if (retryTimeout) {
clearTimeout(retryTimeout)
}
})
</script>
<template>
<!-- Apply your default layout using NuxtLayout -->
<NuxtLayout>
<!-- Main error content with proper spacing to avoid header overlap -->
<div class="min-h-screen bg-brand-4 pt-24 pb-10">
<Section class="flex items-center justify-center min-h-[calc(100vh-6rem)]" padding>
<div class="max-w-5xl mx-auto">
<!-- Error content with side-by-side layout on large screens -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
<!-- Left side: Error code and text -->
<div class="order-2 lg:order-1 text-center lg:text-left">
<!-- Large error code -->
<div class="text-6xl md:text-8xl lg:text-9xl font-heading font-medium color-brand-3 opacity-20 leading-none mb-6">
{{ errorData.statusCode }}
</div>
<!-- Personal message with better sizing -->
<div class="h3 color-brand-3 font-medium mb-8">
{{ errorData.subtitle }} π₯
</div>
<!-- Auto-retry indicator for server errors -->
<div v-if="errorData.category === '5xx' && [502, 503, 504].includes(props.error.statusCode || 0)"
class="p4 color-brand-3 opacity-70 mb-8">
<span class="animate-pulse">π Automatically retrying in a few seconds...</span>
</div>
<!-- Action Buttons using your exact button styling -->
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
<Btn
@click="handleGoHome"
text="π Go to Homepage"
class="btn bg-brand-3 text-white"
/>
<Btn
@click="handleGoBack"
text="β¬
οΈ Go Back"
class="btn btn-secondary"
/>
<Btn
v-if="errorData.showRetry"
@click="handleRetry"
text="π Try Again"
class="btn btn-outline"
/>
</div>
<!-- Optional technical details for developers (collapsed by default) -->
<div v-if="isDev" class="mt-8 text-left">
<details class="bg-white/10 p-4 rounded-lg backdrop-blur-sm">
<summary class="cursor-pointer p4 font-medium mb-2">Debug Info (Dev Only)</summary>
<div class="text-xs space-y-2 p4">
<p><strong>Status Code:</strong> {{ errorData.statusCode }}</p>
<p><strong>URL:</strong> {{ props.error.url || 'Unknown' }}</p>
<p><strong>Timestamp:</strong> {{ new Date().toISOString() }}</p>
<details class="mt-2">
<summary class="cursor-pointer text-xs">Full Error Object</summary>
<pre class="text-xs whitespace-pre-wrap overflow-auto mt-2 bg-black/20 p-2 rounded">{{ JSON.stringify(props.error, null, 2) }}</pre>
</details>
</div>
</details>
</div>
</div>
<!-- Right side: RACHA image (smaller size) -->
<div class="order-1 lg:order-2 flex justify-center lg:justify-end">
<img
:src="errorData.image"
:alt="errorData.title"
class="w-full max-w-xs lg:max-w-sm h-auto"
loading="eager"
>
</div>
</div>
<!-- Contact Support for server errors -->
<div v-if="errorData.category === '5xx'" class="mt-16 text-center">
<div class="max-w-xl mx-auto p-8 bg-white/10 rounded-lg backdrop-blur-sm">
<div class="flex items-center justify-center mb-4">
<div class="text-4xl mr-4">π</div>
<div class="h5 color-brand-3">Need Help?</div>
</div>
<div class="p3 color-brand-3">
If this problem persists, our support team is here to help! Reach out at
<AppLink
href="mailto:[email protected]"
class="color-brand-3 hover:underline font-medium"
>
</AppLink>
</div>
</div>
</div>
</div>
</Section>
</div>
</NuxtLayout>
</template>