cdata/error.vue at main · datagouv/cdata · GitHub

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
<template>
  <div>
    <!-- Teleport target for Toggletip (rendered by SiteHeader). app.vue
         provides it, but app.vue isn't mounted on the error page, so we must
         provide it here too, before NuxtLayout mounts the header. -->
    <div
      id="tooltips"
      class="datagouv-components h-0"
    />
    <NuxtLayout>
      <div
        v-if="error"
        class="min-h-screen bg-white flex items-center justify-center px-8 md:px-4"
      >
        <div class="flex flex-col items-center text-center max-w-2xl w-full gap-6">
          <div class="w-37 h-35 flex items-center justify-center md:w-25 md:h-24">
            <img
              v-if="statusCode === 404"
              :src="error404Svg"
              alt="Erreur 404"
              class="w-full h-full object-contain"
            >
            <img
              v-else-if="statusCode === 403"
              :src="error403Svg"
              alt="Erreur 403"
              class="w-full h-full object-contain"
            >
            <img
              v-else-if="statusCode === 410"
              :src="error410Svg"
              alt="Erreur 410"
              class="w-full h-full object-contain"
            >
            <img
              v-else-if="statusCode >= 500"
              :src="error500Svg"
              alt="Erreur serveur"
              class="w-full h-full object-contain"
            >
            <img
              v-else
              :src="error500Svg"
              alt="Erreur"
              class="w-full h-full object-contain"
            >
          </div>

          <h1 class="text-6xl font-extrabold leading-none text-gray-title m-0 md:text-5xl">
            <template v-if="statusCode">
              {{ statusCode }}
            </template>
            <template v-else>
              {{ $t('Erreur') }}
            </template>
          </h1>

          <h2 class="text-2xl font-extrabold leading-9 text-gray-title m-0 md:text-xl md:leading-8">
            <template v-if="statusCode === 404">
              {{ $t('Page non trouvée') }}
            </template>
            <template v-else-if="statusCode === 403">
              {{ $t('Accès interdit') }}
            </template>
            <template v-else-if="statusCode === 410">
              {{ $t('Contenu supprimé') }}
            </template>
            <template v-else-if="statusCode >= 500">
              {{ $t('Erreur interne du serveur') }}
            </template>
            <template v-else>
              {{ $t('Erreur inattendue') }}
            </template>
          </h2>

          <p class="text-base font-normal leading-6 text-gray-title m-0 text-center md:text-sm md:leading-5">
            <template v-if="statusCode === 404">
              {{ $t("Désolé, nous n'avons pas trouvé la page que vous recherchez. Il se peut que le lien soit incorrect ou que la page ait été déplacée ou supprimée. Si cela vous semble une erreur n'hésitez pas à") }}
              <NuxtLink
                to="/support"
                class="text-datagouv-dark"
              >
                {{ $t('nous écrire') }}
              </NuxtLink>.
            </template>
            <template v-else-if="statusCode === 403">
              {{ $t("Vous n'avez pas la permission d'accéder à cette page. Cela peut être dû à des restrictions de droits ou à une authentification manquante. Si cela vous semble une erreur n'hésitez pas à") }}
              <NuxtLink
                to="/support"
                class="text-datagouv-dark"
              >
                {{ $t('nous écrire') }}
              </NuxtLink>.
            </template>
            <template v-else-if="statusCode === 410">
              {{ $t("Ce contenu a été volontairement retiré. Il n'est plus accessible, car il a été supprimé définitivement par son producteur. Si cela vous semble une erreur n'hésitez pas à") }}
              <NuxtLink
                to="/support"
                class="text-datagouv-dark"
              >
                {{ $t('nous écrire') }}
              </NuxtLink>.
            </template>
            <template v-else-if="statusCode >= 500">
              {{ $t("Une erreur interne est survenue. Veuillez nous excuser pour la gêne occasionnée. Si le problème persiste, merci de nous écrire avec les détails de l'erreur pour que nous puissions y remédier rapidement.") }}
            </template>
            <template v-else>
              {{ $t("Une erreur inattendue s'est produite. Veuillez nous excuser pour la gêne occasionnée. Si le problème persiste, merci de") }}
              <NuxtLink
                to="/support"
                class="text-datagouv-dark"
              >
                {{ $t('nous écrire') }}
              </NuxtLink>
              {{ $t("avec les détails de l'erreur pour que nous puissions y remédier rapidement.") }}
              <span
                v-if="errorMessage"
                class="fr-mt-2w fr-text--sm fr-text--bold"
              >{{ errorMessage }}</span>
            </template>
          </p>

          <div
            v-if="statusCode >= 500 && errorMessage"
            class="fr-mt-4w fr-p-2w"
          >
            <p class="fr-text--sm">
              <span class="fr-text--bold">{{ $t('Code erreur') }} :&nbsp;</span>
              <span class="font-mono">{{ errorMessage }}</span>
              <CopyButton
                :label="$t('Copier le code erreur')"
                :copied-label="$t('Code erreur copié !')"
                :text="errorMessage || ''"
                class="ml-2"
              />
              <pre
                v-if="error.stack"
                class="text-left"
              >
              {{ error.stack }}
            </pre>
            </p>
          </div>

          <div class="mt-0">
            <BrandedButton
              v-if="statusCode >= 500"
              href="/support"
              color="primary"
              size="lg"
            >
              {{ $t("Nous écrire") }}
            </BrandedButton>
            <BrandedButton
              v-else
              href="/"
              color="primary"
              size="lg"
            >
              {{ $t("Retour à l'accueil") }}
            </BrandedButton>
          </div>
        </div>
      </div>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import { BrandedButton, CopyButton } from '@datagouv/components-next'
import error404Svg from '~/public/nuxt_images/errors/404.svg'
import error403Svg from '~/public/nuxt_images/errors/403.svg'
import error410Svg from '~/public/nuxt_images/errors/410.svg'
import error500Svg from '~/public/nuxt_images/errors/500.svg'

const error = useError()

const { locale } = useTranslation()

// Computed properties to avoid repeating error checks
const statusCode = computed(() => error.value?.statusCode as number)
const errorMessage = computed(() => error.value?.message)

useHeadSafe({
  htmlAttrs: {
    lang: locale,
  },
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - data.gouv.fr` : 'data.gouv.fr'
  },
})
useSeoMeta({ robots: 'noindex' })
</script>