کدهای قسمت 

حال با کدهای مربوط به ارورهای جاوا اسکریپت که در قسمت قبل گفتیم آشنا می شویم:

const express = require('express')
const router = express.Router()
const CustomError = require('../CustomError')

router.use(async (req, res) => {
    try {
        const route = require(`.${req.path}`)[req.method]

        try {
            const result = route(req) // We pass the request to the route function
            res.send(result) // We just send to the client what we get returned from the route function
        } catch (err) {
            /*
            This will be entered, if an error occurs inside the route function.
            */
            if (err instanceof CustomError) {
                /* 
                In case the error has already been handled, we just transform the error 
                to our return object.
                */

                return res.status(err.status).send({
                    error: err.code,
                    description: err.message,
                })
            } else {
                console.error(err) // For debugging reasons

                // It would be an unhandled error, here we can just return our generic error object.
                return res.status(500).send({
                    error: 'GENERIC',
                    description: 'Something went wrong. Please try again or contact support.',
                })
            }
        }
    } catch (err) {
        /* 
        This will be entered, if the require fails, meaning there is either 
        no file with the name of the request path or no exported function 
        with the given request method.
        */
        res.status(404).send({
            error: 'NOT_FOUND',
            description: 'The resource you tried to access does not exist.',
        })
    }
})

module.exports = router

توضیح کدهای بالا

امیدوارم که بتوانید کامنت ها و توضیحات کد را مطالعه کنید، من فکر کردم که این کامنت ها بهتر از هر توضیحی برای شما هستند، حال بگذارید ببینیم که یک فایل route واقعی شبیه کد زیر چه چیزی است:

const CustomError = require('../CustomError')

const GET = req => {
    // example for success
    return { name: 'Rio de Janeiro' }
}

const POST = req => {
    // example for unhandled error
    throw new Error('Some unexpected error, may also be thrown by a library or the runtime.')
}

const DELETE = req => {
    // example for handled error
    throw new CustomError('CITY_NOT_FOUND', 404, 'The city you are trying to delete could not be found.')
}

const PATCH = req => {
    // example for catching errors and using a CustomError
    try {
        // something bad happens here
        throw new Error('Some internal error')
    } catch (err) {
        console.error(err) // decide what you want to do here

        throw new CustomError(
            'CITY_NOT_EDITABLE',
            400,
            'The city you are trying to edit is not editable.'
        )
    }
}

module.exports = {
    GET,
    POST,
    DELETE,
    PATCH,
}

توضیح مثال بالا از ارورهای جاوا اسکریپت

در این مثال من با درخواست واقعی کاری انجام نمی دهم، من فقط سناریو ارورهای مختلف جاوا اسکریپت را جعل می کنم، بنابراین به عنوان مثال دستور Get/city در خط سوم به پایان خواهد رسید و همینطور POST/city در خط هشتم به پایان خواهد رسید و ... . این در واقع با پارامترهای کوئری کار می کند. در اصل شما یکی از ارورهای جاوا اسکریپت که مدیریت نشده را خواهید داشت که فرانت اند آن را به شکل زیر دریافت می کند:

{
    error: 'GENERIC',
    description: 'Something went wrong. Please try again or contact support.'
}

و یا شما یکی از ارورهای جاوا اسکریپت که شخصی سازی شده است را به صورت دستی به شکل زیر به وجود می آورید:

throw new CustomError('MY_CODE', 400, 'Error description')

که به کد زیر تبدیل می شود:

{
    error: 'MY_CODE',
    description: 'Error description'
}

حال که ما این تنظیمات زیبای بک اند را در اختیار داریم ما دیگر هیچ خطای ناشناخته ای در فرانت اند نخواهیم داشت و اطلاعات قابل استفاده درباره ارورهای جاوا اسکریپت که اتفاق افتاده اند به ما برمی گردد.

نشان دادن ارورهای جاوا اسکریپت به کاربر

گام بعدی و در واقع آخرین گام مدیریت ارورهای جاوا اسکریپت در فرانت اند می باشد، در این جا شما می خواهید ارورهای جاوا اسکریپت که توسط منطق فرانت اند اپلیکیشن شما ایجاد شده اند را با استفاده از ابزاری که در قسمت اول معرفی شدند مدیریت کنید، اگر چه ارورهای جاوا اسکریپت که در بک اند به وجود می آیند نیز باید نشان داده شوند. بیایید ابتدا ببینیم چگونه باید ارورهای جاوا اسکریپت را نمایش دهیم. همانطور که قبلا گفته شد ما می توانیم از React در برنامه خود استفاده کنیم.

ذخیره کردن ارورهای جاوا اسکریپت در استیت React

درست مانند سایر داده ها ارورهای جاوا اسکریپت و پیغام های ارورهای جاوا اسکریپت می توانند تغییر کنند، بنابراین شما می خواهید آن ها را درون state کامپوننت های جداگانه قرار دهید. به طور پیش فرض و در هنگام نصب شما می خواهید که ارورهای جاوا اسکریپت را مجددا تنظیم کنید، بنابراین زمانی که کاربر برای اولین بار صفحه را می بیند هیچ اروری را مشاهده نمی کند. چیز دیگری که باید آن را برای شما روشن کنیم انواع مختلف ارورهای جاوا اسکریپت به همراه روش های به نمایش گذاشتن آن ها است. همانطور که قبلا گفتیم سه نوع ارور در بک اند وجود دارد که در ادامه معرفی خواهیم کرد.

انواع ارورهای جاوا اسکریپت

ارورهای جاوا اسکریپت را می توان به چند دسته زیر تقسیم بندی کرد:

1. ارورهای global: به عنوان مثال یکی از خطاهای عمومی ممکن است از بک اند بیایند و یا ممکن است کاربر signin نشده باشد و ... .

2. ارورهای خاص که از بک اند می آیند، کاربر مشخصات خود را به بک اند ارسال می کند. بک اند پاسخ می دهد که پسورد درست نیست، این موضوع توسط فرانت اند تایید نمی شود، بنابراین حتما باید توسط بک اند انجام شود.

3. ارورهای خاصی که توسط فرانت اند ایجاد می شوند، به عنوان مثال اعتبار سنجی یکی از فیلدهای ایمیل.

مورد دوم و سوم بسیار مشابه هستند و در همان لحظه مدیریت می شوند( اگر بخواهیم) اما دارای یک تفاوت اصلی هستند، ما در کد می‌بینیم که آنها چگونه کار می کنند.

من می خواهم از اجرای state در React Native استفاده کنم، اما شما می توانید از ابزارهای مدیریت state مانند MOBX و یا Redux استفاده کنید.

ارورهای جاوا اسکریپت به صورت گلوبال

معمولا من این ارورهای جاوا اسکریپت را در کامپوننت های خارج از رده مقدماتی ذخیره می کنم و یک عنصر رابط گرافیکی استاتیک را رندر می کنم، این می تواند همچون یک پرده قرمز رنگ در بالای صفحه نمایش شما نشان داده شود.

مثالی از عنصر رابط گرافیکی برای ارورهای گلوبال

بگذارید مثال زیر را در نظر بگیریم:

import React, { Component } from 'react'

import GlobalError from './GlobalError'

class Application extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
        }

        this._resetError = this._resetError.bind(this)
        this._setError = this._setError.bind(this)
    }

    render() {
        return (
            <div className="container">
                <GlobalError error={this.state.error} resetError={this._resetError} />
                <h1>Handling Errors</h1>
            </div>
        )
    }

    _resetError() {
        this.setState({ error: '' })
    }

    _setError(newError) {
        this.setState({ error: newError })
    }
}

export default Application

توضیح این مثال از ارورهای جاوا اسکریپت

همانطور که می توانید مشاهده کنید ما یک ارور ر state در اپلیکیشن داریم، ما همچنین توابعی داریم تا مقادیر ارورها را تغییر دهیم و یا آن را reset کنیم. ما مقدار را ارسال می کنیم و تابع ریست آن را ریست می کند. اجازه دهید ببینیم چگونه GlobalErr کار می کند:

import React, { Component } from 'react'

class GlobalError extends Component {
    render() {
        if (!this.props.error) return null

        return (
            <div
                style={{
                    position: 'fixed',
                    top: 0,
                    left: '50%',
                    transform: 'translateX(-50%)',
                    padding: 10,
                    backgroundColor: '#ffcccc',
                    boxShadow: '0 3px 25px -10px rgba(0,0,0,0.5)',
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                {this.props.error}
                &nbsp;
                <i
                    className="material-icons"
                    style={{ cursor: 'pointer' }}
                    onClick={this.props.resetError}
                >
                    close
                </i>
            </div>
        )
    }
}

export default GlobalError

export default GlobalError

همانطور که می توانید در خط پنج مشاهده کنید اگر هیچ یک از ارورهای جاوا اسکریپت رخ ندهد ما هیچ چیزی را رندر نمی کنیم، این کار باعث می شود که ما نوارهای قرمز رنگ خالی نداشته باشیم. توجه داشته باشید که شما می توانید کارکرد این کامپوننت را تغییر دهید، به عنوان مثال شما می توانید ‘x’ را با ارور timeout تعویض کنید که حالت ارورهای جاوا اسکریپت را بعد از گذشت مدت زمانی تغییر دهد. حالا شما می توانید هر جایی که خواستید از این global error state استفاده کنید، برای این کار تنها کافی است _setError را از Application.js منتقل کنید و بعد از آن می توانید global error را تنظیم کنید.

یک مثال دیگر

import React, { Component } from 'react'
import axios from 'axios'

class GenericErrorReq extends Component {
    constructor(props) {
        super(props)

        this._callBackend = this._callBackend.bind(this)
    }

    render() {
        return (
            <div>
                <button onClick={this._callBackend}>Click me to call the backend</button>
            </div>
        )
    }

    _callBackend() {
        axios
            .post('/api/city')
            .then(result => {
                // do something with it, if the request is successful
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                }
            })
    }
}

export default GenericErrorReq

یک نکته مهم درباره ارورهای جاوا اسکریپت

اگر تنبل هستید تا همین جا کافی است، حتی اگر شما یکی از ارورهای جاوا اسکریپت را دارید که یک ارور خاص است تنها کافی است global error state را تغییر دهید و آن را در یک نوار بالای صفحه به نمایش بگذارید. با این حال من می خواهم به شما نشان دهم که چگونه خاص ترین ارورهای جاوا اسکریپت را مدیریت کنید و آن ها را نمایش دهید. چرا؟ اولا این یک راهنمایی کامل درباره مدیریت ارورهای جاوا اسکریپت است، بنابراین من نمی توانم آن را در این نقطه متوقف کنم. دوما برنامه نویسان UX احتمالا اگر شما تمامی ارورهای جاوا اسکریپت را به صورت global  نمایش دهید تعجب می کنند.

مدیریت ارورهای خاص در جاوا اسکریپت

مشابه ارورهای گلوبال ما می توانیم یک Error state محلی درون کامپوننت های دیگر داشته باشیم، روش این کار به شکل زیر می باشد:

import React, { Component } from 'react'
import axios from 'axios'

import InlineError from './InlineError'

class SpecificErrorRequest extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
        }

        this._callBackend = this._callBackend.bind(this)
    }

    render() {
        return (
            <div>
                <button onClick={this._callBackend}>Delete your city</button>
                <InlineError error={this.state.error} />
            </div>
        )
    }

    _callBackend() {
        this.setState({
            error: '',
        })

        axios
            .delete('/api/city')
            .then(result => {
                // do something with it, if the request is successful
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                } else {
                    this.setState({
                        error: err.response.data.description,
                    })
                }
            })
    }
}

export default SpecificErrorRequest

نکته ای که باید به یاد داشته باشید این است که از بین بردن خطا معمولا یک روند متفاوت می باشد. در هنگام ایجاد یک درخواست جدید بهتر است که ارور را پاک کنید، همچنین می توانید زمانی که کاربر تغییری را ایجاد می کند نیز این کار را انجام دهید، به عنوان مثال زمانی که کاربر مقدار ورودی را تغییر می دهد.

ارورهای جاوا اسکریپت در فرانت اند

همان طور که به زودی گفته می شود این ارورهای جاوا اسکریپت نیز با همان روش که برای ارورهای جاوا اسکریپت که از بک اند می آیند استفاده می شد ( روش state) مدیریت می شوند، اجازه دهید با یک مثال که در آن یک فیلد ورودی وجود دارد شروع کنیم که به کاربر اجازه می دهد نام یک شهر را حذف کند:

import React, { Component } from 'react'
import axios from 'axios'

import InlineError from './InlineError'

class SpecificErrorRequest extends Component {
    constructor(props) {
        super(props)

        this.state = {
            error: '',
            city: '',
        }

        this._callBackend = this._callBackend.bind(this)
        this._changeCity = this._changeCity.bind(this)
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.city}
                    style={{ marginRight: 15 }}
                    onChange={this._changeCity}
                />
                <button onClick={this._callBackend}>Delete your city</button>
                <InlineError error={this.state.error} />
            </div>
        )
    }

    _changeCity(e) {
        this.setState({
            error: '',
            city: e.target.value,
        })
    }

    _validate() {
        if (!this.state.city.length) throw new Error('Please provide a city name.')
    }

    _callBackend() {
        this.setState({
            error: '',
        })

        try {
            this._validate()
        } catch (err) {
            return this.setState({ error: err.message })
        }

        axios
            .delete('/api/city')
            .then(result => {
                // do something with it, if the request is successful
            })
            .catch(err => {
                if (err.response.data.error === 'GENERIC') {
                    this.props.setError(err.response.data.description)
                } else {
                    this.setState({
                        error: err.response.data.description,
                    })
                }
            })
    }
}

export default SpecificErrorRequest

Error internationalation با استفاده از کدهای مربوط به ارور

ممکن است شما تعجب کرده باشید که ما چرا باید کدهای ارورهای بالا را داشته باشیم، به عنوان مثال GENERIC، ما فقط توضیحات مربوط به ارورهای جاوا اسکریپت را که به بک اند ارسال می شوند نشان می دهیم. حال زمانی که اپلیکیشن شما رشد کند شما می توانید امیدوار باشید که مارکت های جدیدی داشته باشید و در بعضی موارد در مواجهه با مشکلات مختلف بتوانید آن ها را با استفاده از زبان های برنامه نویسی مختلف حل کنید. اگر شما در این نقطه هستید شما می توانید از کدهای مربوط به ارورهای جاوا اسکریپت که گفته شد استفاده کنید تا بتوانید توضیحات درستی را به کاربر نمایش دهید.

جمع بندی ارورهای جاوا اسکریپت

امیدوارم اطلاعات کافی درباره این که چگونه با ارورهای جاوا اسکریپت برخورد کنید را بدست آورده باشید، یکی از مهم ترین توصیه های من به شما این است که از

log level هم حتما استفاده کنید.