diff --git a/.eslintrc b/.eslintrc index be379f8e..912dae2b 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,6 +5,7 @@ "rules": { "@typescript-eslint/no-unused-vars": [ "off" - ] + ], + "no-console": "off" } } diff --git a/README.md b/README.md index 959e0ebb..2d2af31f 100755 --- a/README.md +++ b/README.md @@ -86,13 +86,47 @@ is added automatically to requests. Defaults to `false`. - `useLocalizedMenuEndpoint`: If enabled, the menu endpoint will use a language prefix as configured by [nuxtjs/i18n](https://v8.i18n.nuxtjs.org) module. Defaults to `true`. - -## TODO - List of 1.x options not yet implemented - -- `pageErrorHandler`: The default page error handler can be overridden. - -- `menuErrorHandler`: The default menu error handler can be overridden. - +## Error handling + +The module provides a default error handler for the `fetchPage` and `fetchMenu` methods: + +- `fetchPage`: Throws an error with the status code and message provided by Drupal. +- `fetchMenu`: Logs an error message to the console and displays a message in the frontend. + +## Customizing error handling + +You have the option to override the default error handlers by using a parameter when calling the `fetch` methods. + +- `fetchPage`: + ```javascript + + ``` + +- `fetchMenu`: + ```javascript + + ``` + +Note: The `error` parameter is optional and can be omitted. ## Previous options not supported in 2.x version diff --git a/src/runtime/composables/useDrupalCe.ts b/src/runtime/composables/useDrupalCe.ts index 61552c54..6e50e0b9 100644 --- a/src/runtime/composables/useDrupalCe.ts +++ b/src/runtime/composables/useDrupalCe.ts @@ -27,7 +27,7 @@ export const useDrupalCe = () => { * @param path Path of the Drupal page to fetch * @param useFetchOptions Optional Nuxt useFetch options */ - const fetchPage = async (path: string, useFetchOptions:UseFetchOptions = {}) => { + const fetchPage = async (path: string, useFetchOptions: UseFetchOptions = {}, overrideErrorHandler?: (error?: any) => void) => { const nuxtApp = useNuxtApp() // Workaround for issue - useState is not available after async call (Nuxt instance unavailable) @@ -71,12 +71,8 @@ export const useDrupalCe = () => { return pageState } - if (error.value && (!error.value?.data?.content || config.customErrorPages)) { - throw createError({ statusCode: error.value.statusCode, statusMessage: error.value.message, data: error.value.data, fatal: true }) - } - if (error.value) { - callWithNuxt(nuxtApp, setResponseStatus, [error.value.statusCode]) + overrideErrorHandler ? overrideErrorHandler(error) : pageErrorHandler(error, { config, nuxtApp }) page.value = error.value?.data } @@ -91,7 +87,7 @@ export const useDrupalCe = () => { * @param name Menu name being fetched * @param useFetchOptions Optional Nuxt useFetch options */ - const fetchMenu = async (name: string, useFetchOptions:UseFetchOptions = {}) => { + const fetchMenu = async (name: string, useFetchOptions: UseFetchOptions = {}, overrideErrorHandler?: (error?: any) => void) => { const nuxtApp = useNuxtApp() useFetchOptions = processFetchOptions(useFetchOptions) useFetchOptions.key = `menu-${name}` @@ -110,8 +106,7 @@ export const useDrupalCe = () => { const { data: menu, error } = await useFetch(menuPath, useFetchOptions) if (error.value) { - errorMenuHandler(error) - return + overrideErrorHandler ? overrideErrorHandler(error) : menuErrorHandler(error) } return menu } @@ -119,12 +114,12 @@ export const useDrupalCe = () => { /** * Use messages state */ - const getMessages = () => useState('drupal-ce-messages', () => []) + const getMessages = (): Ref => useState('drupal-ce-messages', () => []) /** * Use page data */ - const getPage = () => useState('drupal-ce-page-data', () => ({})) + const getPage = (): Ref => useState('drupal-ce-page-data', () => ({})) /** * Render elements from page data returned from fetchPage @@ -160,9 +155,17 @@ const pushMessagesToState = (messages) => { process.client && useDrupalCe().getMessages().value.push(...messagesArray) } -const errorMenuHandler = (error) => { +const menuErrorHandler = (error: Record) => { + console.error({ statusCode: error.value.statusCode, statusMessage: error.value.message, data: error.value.data }) process.client && useDrupalCe().getMessages().value.push({ type: 'error', message: `Menu error: ${error.value.message}.` }) } + +const pageErrorHandler = (error: Record, context: Record) => { + if (error.value && (!error.value?.data?.content || context.config.customErrorPages)) { + throw createError({ statusCode: error.value.statusCode, statusMessage: error.value.message, data: error.value.data, fatal: true }) + } + callWithNuxt(context.nuxtApp, setResponseStatus, [error.value.statusCode]) +}