0

Tengo la siguiente tabla que se llena al consultar un servicio back en Java a través del método obtenerLista() lo que quiero hacer es que cuando el servicio Java por alguna razon no este disponible, se encuentre down, el front mande una alerta de "Servicio no disponible" al entrar a la pagina

este es mi codigo en el component.ts

import { Component, ViewChild } from '@angular/core';
import { Control } from './Control';
import { ControlService } from './control.service';
import { MatTableDataSource } from '@angular/material/table';
import { Estado } from './Estado.ts';
import { DateAdapter } from '@angular/material/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { formatDate } from '@angular/common';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'prueba-angular-material';
  displayedColumns: string[] = [
    'idControl',
    'cveEstado',
    'comentario',
    'horaInicio',
    'fechaRegistro',
    'botonSave',
  ];
  estadoModel: Estado[] = [];
  control: Control[] = [];
  controlModel: Control = new Control();
  estadoSeleccionado: any;
  idSeleccionado: string = '';
  comentIngresado: string = '';
  horaIngresada: string ='';
  fechaIngresada: any;
  dataModel: any[] = [];
  horaInvalida = true;
  
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(
    private controlService: ControlService,
    private dataAdapter: DateAdapter<Date>
  ) {
    this.dataAdapter.setLocale('es-MX');
  }

  ngOnInit(): void {
    this.obtenerLista();
    this.obtenerListaEstados();
    
  }

  //obtiene la lista del servicio
  dataSource: any;
  private obtenerLista() {
    this.controlService.obtenerLista().subscribe((response) => {
      this.control = response.data;
      console.log("PRUEBA " ,response.data);
      this.dataSource = new MatTableDataSource(this.control);
      this.dataSource.paginator = this.paginator;
    });
  }

  //obtiene la lista de estados para el select
  private obtenerListaEstados() {
    this.controlService.obtenerEstados().subscribe((response) => {
      console.log("PRUEBA  estados" ,response.data);
      this.estadoModel = response.data;
    });
  }

  //obtiene la cve del estado que se selecciona y su id
  cambiarEstado(valor: Event, row: any) {
    this.estadoSeleccionado = valor;
    this.idSeleccionado = row.idControl;

    console.log(' ID SELECC ' + this.idSeleccionado);
    console.log(' ESTADO SELECC ' + this.estadoSeleccionado);
  }

  //obtiene el valor ingresado en el input coment  y el id
  changeValue(e: any, row: any) {
    this.comentIngresado = e.value;
    console.log(' INPUT COMENT  ' + this.comentIngresado);
  }

 //obtiene el valor ingresado en el input hora, y el id
 changeValueHora(e: any, row: any) {
  this.horaIngresada = e.value;
  console.log(' INPUT HORA   ' +this.horaIngresada);
  this.validarHora();
}

validarHora() {
  console.log(' ENTRA A VALIDAR HORA');
  const regex = new RegExp("^[0-9]{1,2}:[0-9]{1,2}$");
  this.horaInvalida = !regex.test(this.horaIngresada);
  console.log('HORA '  + this.horaInvalida);
}


  //OBTIENE EL VALOR DE LA FECHA SELECCIONADA
  onDateChange(valor: Event, row: any) {
    this.fechaIngresada = valor;
    console.log('FECHA SELECC  ' + this.fechaIngresada);
  }

  //funcion para darle formato a la fecha internamente
  formatDateToString(date: Date): string {
    if (date) {
      const format = 'yyyy-MM-dd';
      const locale = 'en-US';
      return formatDate(date, format, locale);
    }
    return '';
  }

  deshabilitarOpcion(cveEstado: string): string[] {
    console.log("disabled    ",cveEstado);
    switch (cveEstado) {
      case 'INP':
        return ['FINISHED','PENDING'];
      case 'En Proceso':
        return ['Iniciado'];
      default:
        return [];
    }
  }

  guardar(element: any) {
    if (element.editar) {
      console.log(`Desactivado para ${element.idControl}`);
      element.editar = false;

      if (this.comentIngresado == '') {
        alert('No se han modificado campos');
      } else {
        console.log(' ENTRA ELSE  ');
        this.controlModel.cveEstado = this.estadoSeleccionado;
        this.controlModel.comentario = this.comentIngresado;
        this.controlModel.idControl = this.idSeleccionado;
        this.controlModel.fechaRegistro = this.formatDateToString(
          this.fechaIngresada
        );

        console.log('prueba fecha final  ' + this.controlModel.fechaRegistro);
        this.controlService
          .updateCampo(this.controlModel)
          .subscribe((data) => {
            this.controlModel = data;
            this.comentIngresado = '';
            this.estadoSeleccionado = '';
            this.fechaIngresada = '';

            alert('Agregado correctamente');
          });
      }
    } else {
      console.log(`Activado para ${element.idControl}`);
      element.editar = true;
    }
  }
}

service.ts

private baseUrl="http://localhost:8080/getLista";
  constructor( private httpClient: HttpClient) { }

  obtenerLista():Observable<any>{
    return this.httpClient.get<Control>(this.baseUrl); 
  }

y mi controller en Java

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping({"/getLista"})
public class ControlEController {
    
    
    @Autowired
    private ControlEService controlService;
    
    @GetMapping
    private ResponseEntity<?> listado() throws Exception{
        ResponseEntity<?> list = null;
        try {
            list = controlService.listar();
            //System.out.println("PRUEBA DATOS" +list);
        }catch(Exception e) {
            throw e;
        }
        return list;
        
    }

serviceImpl

    @Override
    public ResponseEntity<?> listar() throws Exception {
        Map<String, Object> response = new HashMap<>();
        List<ControlEntity> list = new ArrayList<ControlEntity>();
        try {
            list = repository.listar();
        } catch (Exception e) {
            response.put("sucess", false);
            response.put("error", e.getMessage());
            return new ResponseEntity<Map<String, Object>>(response, HttpStatus.INTERNAL_SERVER_ERROR);
        }
        response.put("success", true);
        response.put("data", list);
        return new ResponseEntity<>(response, HttpStatus.OK);
    }

Actualmente si el servicio esta abajo, marca esto en la consola del navegador, y es lo que quiero controlar introducir la descripción de la imagen aquí

1 respuesta 1

3

como puedes revisar tu mismo en la guía de angular,

cuando HttpClient no puede obtener la respuesta ideal regresa un objeto de error

en este caso en tu service.ts deberás de hacer las siguientes modificaciones:

  • encadenar un manejador de errores personalizado
  • cuando el código de error sea 0 manejar los problemas de conexión
  • cuando el código sea otro manejarlo de otra manera
  • usar un mensaje amigable al usuario (que no quiere saber detalles técnicos)

En código se vería algo así:

  import { Observable, throwError } from 'rxjs';
  import { catchError, retry } from 'rxjs/operators';



  private baseUrl="http://localhost:8080/getLista";
  constructor( private httpClient: HttpClient) { }

  obtenerLista():Observable<any>{
    return this.httpClient.get<Control>(this.baseUrl).pipe(
      catchError(this.manejaError)
    ); 
  }

private manejaError(error: HttpErrorResponse) {
  if (error.status === 0) {
    // Error del lado cliente o problema de red.
    console.error('El servicio back no esta disponible:', error.error);
  } else {
    // El backend responde pero con un codigo de error.
    // Los detalles del error pueden venir en el cuerpo de la respuesta.
    // aquí puedes en vez de imprimirlos en consola mandarlos por correo al equipo de desarrollo
    console.error(
      `Codigo de error del servidor ${error.status}, comparta con soporte tecnico la siguiente informacion de depuracion: `, error.error);
  }
  // Regresar un observable con le mensaje que se le mostrara al usuario
  return throwError(() => new Error('Ya valió... o tal vez no intenta mas tarde.'));
}
3
  • Si en el catchError devuelves un throwError va a seguir teniendo un problema porque en su suscripción solo está esperando que todo vaya bien, debería modificarla para manejar el error obtenido también.
    – Benito-B
    Commented el 19 may. 2023 a las 5:53
  • si, puede poner un catch en su controlador para mostrar un alert o algo similar, lo puse así para no mezclar lógicas distintas, ya sabes... responsabilidad única Commented el 19 may. 2023 a las 6:50
  • Si, si lo entiendo, y la respuesta responde perfectamente a la pregunta. Pero no es muy user-friendly pegar errores en consola sin reflejarlos en la pantalla, pocos usuarios van a tener abierta la consola jeje Simplemente quería aclararlo para que sepa qué curso tomar a continuación para mostrarle el error a los usuarios :)
    – Benito-B
    Commented el 19 may. 2023 a las 6:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.