@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
207 lines (186 loc) • 6.6 kB
Markdown
---
title: 'GlobalError (404)'
description: 'The GlobalError is a simple component to integrate where a 404 or 500 message has to be shown.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:09.781Z
checksum: 4324f46f1ca330649e6d2284e2e49931506e145839e3e8f0c2ea7cc3bee65ee3
---
```tsx
import { GlobalError } from '@dnb/eufemia'
```
The GlobalError is a simple component to integrate when a `404` or `500` has to be shown.
This page component is **responsive** and should be used as a **client wide** (fullscreen) component.
You may also take a look at how it behaves once [404](/404) or [500](/500) is used in an application.
- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=22259-19235)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/global-error)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/global-error)
```tsx
render(<GlobalError statusCode="404" />)
```
### To showcase the 500 status code component
```tsx
render(<GlobalError statusCode="500" />)
```
### To showcase a custom status code component
```tsx
const links = [
{
text: 'Forside',
url: 'https://www.dnb.no/',
},
{
text: 'Forsikring',
url: 'https://www.dnb.no/forsikring/',
},
{
text: 'Sparing',
url: 'https://www.dnb.no/sparing/',
},
{
text: 'Lån',
url: 'https://www.dnb.no/lan/',
},
{
text: 'Kontakt',
url: 'https://www.dnb.no/hjelp-og-veiledning/',
},
]
render(
<GlobalError
statusCode="403"
title="Access Denied"
text="More related text"
links={links}
>
Additional Content
</GlobalError>
)
```
```json
{
"props": {
"statusCode": {
"doc": "Defines a status code as a string. When `404` or `500` is given, predefined `text` and `title` will be shown. Defaults to `404`.",
"type": ["404", "500", "string"],
"status": "optional"
},
"status": {
"doc": "Defines a status code as a string. When `404` or `500` is given, predefined `text` and `title` will be shown. Defaults to `404`. This prop is deprecated and will be removed in v11, please use `statusCode` instead.",
"type": ["404", "500", "string"],
"status": "deprecated"
},
"title": {
"doc": "Overwrites the default title for the provided `statusCode`.",
"type": "React.ReactNode",
"status": "optional"
},
"text": {
"doc": "Overwrites the default text for the provided `statusCode`.",
"type": "React.ReactNode",
"status": "optional"
},
"code": {
"doc": "Overwrites the default error message code text `Feilmeldings-kode:`. . This prop is deprecated and will be removed in v11, please use `errorMessageCode` instead.",
"type": "React.ReactNode",
"status": "deprecated"
},
"errorMessageCode": {
"doc": "Overwrites the default error message code text `Feilmeldings-kode: %statusCode`.",
"type": "React.ReactNode",
"status": "optional"
},
"help": {
"doc": "Overwrites the default additional help text `Her er noen lenker som kanskje kan hjelpe:`. This text is only rendered when `links` are provided.",
"type": "React.ReactNode",
"status": "optional"
},
"links": {
"doc": "Provide an array with objects `{ text: \"Text\", url: \"https://...\" }` to display a list of anchor links.",
"type": ["Array<GlobalErrorLink>"],
"status": "optional"
},
"center": {
"doc": "If true, it will use `80vh` as the height and center its content.",
"type": "boolean",
"status": "optional"
},
"skeleton": {
"doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
"type": "boolean",
"status": "optional"
},
"locale": {
"doc": "Set a [supported locale](/uilib/usage/customisation/localization/) if needed.",
"type": "string",
"status": "optional"
},
"children": {
"doc": "To display additional related content, like useful links etc.",
"type": "React.Node",
"status": "optional"
},
"[Space](/uilib/layout/space/properties)": {
"doc": "Spacing properties like `top` or `bottom` are supported.",
"type": ["string", "object"],
"status": "optional"
}
}
}
```
```json
{
"locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"],
"entries": {
"GlobalError.404.text": {
"nb-NO": "Sikker på at du har skrevet riktig adresse? Eller har vi rotet med lenkene?",
"en-GB": "Are you sure you have entered the correct address? Or have we messed with the links?",
"sv-SE": "Är du säker på att du har skrivit rätt adress?",
"da-DK": "Er du sikker på, at du har skrevet den rigtige adresse?"
},
"GlobalError.404.title": {
"nb-NO": "Vi finner ikke siden du leter etter …",
"en-GB": "We can't find the page you're looking for …",
"sv-SE": "Vi kan inte hitta sidan du letar efter …",
"da-DK": "Vi kan ikke finde den siden du leder efter …"
},
"GlobalError.500.text": {
"nb-NO": "Tjenesten fungerer ikke slik den skal for øyeblikket, men prøv igjen senere.",
"en-GB": "The service is not working properly at the moment. Try again later.",
"sv-SE": "Tjänsten fungerar inte som den ska just nu, men försök igen senare.",
"da-DK": "Tjenesten fungerer ikke som den skal i øjeblikket, prøv igen senere."
},
"GlobalError.500.title": {
"nb-NO": "Beklager, her skjedde det noe feil!",
"en-GB": "Sorry, a technical error occurred!",
"sv-SE": "Tyvärr, något gick fel!",
"da-DK": "Beklager, der opstod en fejl!"
},
"GlobalError.code": {
"nb-NO": "Feilmeldings-kode:",
"en-GB": "Error code:",
"sv-SE": "Felmeddelande-kod:",
"da-DK": "Fejlkode:"
},
"GlobalError.errorMessageCode": {
"nb-NO": "Feilmeldings-kode: %statusCode",
"en-GB": "Error code: %statusCode",
"sv-SE": "Felmeddelande-kod: %statusCode",
"da-DK": "Fejlkode: %statusCode"
},
"GlobalError.help": {
"nb-NO": "Her er noen lenker som kanskje kan hjelpe:",
"en-GB": "Here are some links that might help:",
"sv-SE": "Här är några länkar som kanske kan hjälpa:",
"da-DK": "Her er nogle links, der måske kan hjælpe:"
}
}
}
```