---
title: Global error
description: Use GlobalError to show a clear 404 or 500 error page.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.156Z
checksum: 03f15188a08cecbc845bbbc78df5c6797d2f8ae2d694cc26bfe0b8748ceacc97
---

# Global error

## Import

```tsx
import { GlobalError } from '@dnb/eufemia'
```

## Description

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.

### Heading level

The GlobalError component uses the [Heading](/web/components/heading) component for its title. By default it renders as an `h1`, but it automatically respects the surrounding `Heading.Level` context. This means you can place it inside a `Heading.Level` to avoid duplicate `h1` elements on your page:

```tsx
<Heading.Level reset={1}>
  <Heading>Page Title</Heading>
  {/* GlobalError title will render as h2 */}
  <GlobalError statusCode="500" />
</Heading.Level>
```

You may also take a look at how it behaves once [404](/404) or [500](/500) is used in an application.

## Relevant links

- [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/web/components/global-error)


## Related components

Global error is part of the [Feedback and dialogs](/web/components/overview/#feedback) category. More components in this category:

- [Badge](/web/components/badge/) – to highlight new, unread, or important information.
- [Dialog](/web/components/dialog/) – when people need to make a choice or read an important message before continuing.
- [Drawer](/web/components/drawer/) – to show extra content in a panel that slides in from the side.
- [Form status](/web/components/form-status/) – to show validation errors, warnings, or messages near a form.
- [Global status](/web/components/global-status/) – to show important page-level messages or a summary of form errors.
- [Modal](/web/components/modal/) – when people must focus on one task or message before returning to the page.

[See all in Feedback and dialogs](/web/components/overview/#feedback)


## Demos

### To showcase the 404 status code component


```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>);
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```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"
    },
    "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"
    },
    "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](/web/styling-and-themes/configuration/localization/) if needed.",
      "type": "string",
      "status": "optional"
    },
    "children": {
      "doc": "To display additional related content, like useful links etc.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```


## Translations


```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.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:"
    }
  }
}
```