RxJS তে ত্রুটি হ্যান্ডলিং

RxJS (Reactive Extensions for JavaScript) হল একটি লাইব্রেরি যা asynchronous ডেটা স্ট্রিম এবং ইভেন্ট-ভিত্তিক প্রোগ্রামিং পরিচালনা করার জন্য ব্যবহৃত হয়। Angular অ্যাপ্লিকেশনগুলোতে RxJS ব্যাপকভাবে ব্যবহৃত হয়, বিশেষ করে HTTP অনুরোধ, ফর্ম ভ্যালিডেশন, এবং ইভেন্ট হ্যান্ডলিংয়ে।

RxJS তে ত্রুটি হ্যান্ডলিং একটি গুরুত্বপূর্ণ অংশ। যখন আমরা Observable স্ট্রিম ব্যবহার করি, তখন বিভিন্ন কারণে ত্রুটি (error) আসতে পারে, যেমন নেটওয়ার্ক সমস্যা, সার্ভার ত্রুটি, অথবা ইউজার ইন্টারঅ্যাকশন থেকে।

RxJS তে ত্রুটি হ্যান্ডলিং কিভাবে কাজ করে?

RxJS-এ catchError এবং throwError এর মাধ্যমে ত্রুটি হ্যান্ডলিং করা হয়। catchError অপারেটরটি স্ট্রিমে ত্রুটি হলে তার পরবর্তী অপারেশন কিভাবে পরিচালনা হবে তা নির্ধারণ করে।

ত্রুটি হ্যান্ডলিং এর মূল উপাদান:

• catchError: এই অপারেটরটি যখন Observable এর মধ্যে ত্রুটি ঘটবে তখন তার পরবর্তী স্ট্রিমে ত্রুটি ধরতে সাহায্য করে।
• throwError: ত্রুটি ঘটানোর জন্য এটি ব্যবহৃত হয়, যেমন নির্দিষ্ট ত্রুটি ছুড়ে দেয়া।

1. catchError অপারেটর ব্যবহার

catchError অপারেটরটি ত্রুটি গ্রহণ এবং সেগুলিকে হ্যান্ডল করতে ব্যবহৃত হয়। এটি একটি নতুন Observable রিটার্ন করে যা ত্রুটির পরে পুনরায় স্ট্রিম চালু রাখে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data')
      .pipe(
        catchError(error => {
          console.error('Error occurred:', error);
          // আপনি এখানে Error Handling করতে পারেন যেমন Alert বা Message প্রেরণ করা
          return throwError(() => new Error('Something went wrong!'));
        })
      );
  }
}

এখানে:

• http.get() ব্যবহার করে ডেটা ফেচ করার চেষ্টা করা হচ্ছে। যদি কোন ত্রুটি ঘটে, তবে catchError অপারেটরটি তা ধরবে এবং একটি নতুন ত্রুটি রিটার্ন করবে।
• throwError() ব্যবহার করে আমরা একটি কাস্টম ত্রুটি ছুঁড়ে দিয়েছি।

2. catchError এর সাথে ব্যবহারকারী-friendly ত্রুটি বার্তা প্রদর্শন

আসুন, এবার ত্রুটির বার্তা ব্যবহারকারীর জন্য আরও উপকারী ও বিস্তারিত উপায়ে প্রদর্শন করি।

উদাহরণ:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data')
      .pipe(
        catchError(error => {
          let errorMessage = 'Unknown error occurred!';
          
          if (error.status === 0) {
            errorMessage = 'Network error: Please check your internet connection.';
          } else if (error.status === 404) {
            errorMessage = 'Data not found!';
          } else if (error.status === 500) {
            errorMessage = 'Server error. Please try again later.';
          }

          console.error(errorMessage); // Console-এ ত্রুটি লগ করুন
          return throwError(() => new Error(errorMessage)); // কাস্টম ত্রুটি বার্তা রিটার্ন
        })
      );
  }
}

এখানে:

• error.status এর মাধ্যমে আমরা HTTP ত্রুটির ধরন চেক করছি এবং ত্রুটির ভিত্তিতে কাস্টম ত্রুটি বার্তা তৈরি করছি।
• throwError() মাধ্যমে কাস্টম ত্রুটি বার্তা ক্লায়েন্টে পাঠানো হচ্ছে।

3. Angular কম্পোনেন্টে ত্রুটি হ্যান্ডলিং

এখন, আমাদের সার্ভিসে ত্রুটি হ্যান্ডলিং করার পর, আমরা কম্পোনেন্টে ত্রুটিগুলির উপর প্রতিক্রিয়া জানাতে পারি। এখানে, আমরা DataService এর getData() ফাংশন ব্যবহার করছি এবং ত্রুটি যদি ঘটে, তবে সেটি দেখানোর জন্য UI তে একটি মেসেজ প্রিন্ট করছি।

উদাহরণ:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data: any;
  errorMessage: string | null = null;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe({
      next: (response) => {
        this.data = response;
      },
      error: (error) => {
        this.errorMessage = error.message;  // ত্রুটি বার্তা UI তে দেখানো
      }
    });
  }
}

এখানে:

• subscribe() ব্যবহার করা হয়েছে যেটি ডেটা পাওয়ার পর next হ্যান্ডলার কাজ করবে এবং ত্রুটি ঘটলে error হ্যান্ডলার কার্যকর হবে।
• ত্রুটি ঘটলে, error.message অ্যাক্সেস করে তা UI তে প্রদর্শন করা হচ্ছে।

HTML টেমপ্লেট:

<div *ngIf="errorMessage" class="error-message">
  {{ errorMessage }}
</div>

<div *ngIf="data">
  <h1>Data:</h1>
  <pre>{{ data | json }}</pre>
</div>

এখানে:

• ত্রুটি ঘটলে, errorMessage ভেরিয়েবলটি দেখানো হবে।
• ডেটা সফলভাবে পাওয়া গেলে, data এর মান JSON ফরম্যাটে প্রদর্শিত হবে।

সারাংশ

RxJS তে ত্রুটি হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ, বিশেষ করে যখন আপনি HTTP অনুরোধ বা অন্য ধরনের asynchronous অপারেশন চালান। catchError এবং throwError অপারেটরগুলো ত্রুটি হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয় এবং এই ত্রুটিগুলো কাস্টম বার্তা হিসেবে ব্যবহারকারীকে জানানো যায়। এই প্রক্রিয়াটি অ্যাপ্লিকেশনের ব্যবহারকারী অভিজ্ঞতাকে উন্নত করতে সাহায্য করে, কারণ আপনি ত্রুটি ঘটলে ব্যবহারকারীকে সঠিক এবং স্পষ্ট বার্তা দিতে পারেন।