# ActiveReportsJS: 트러블슈팅

## Content

이 페이지에서는 ActiveReportsJS를 사용하면서 발생할 수 있는 가장 일반적인 문제를 나열하고 해결책을 제시합니다.

### 보고서가 브라우저와 내보낸 PDF 문서에서 다르게 표시됩니다.

적절한 [Fonts configuration](/activereportsjs/docs/GettingStarted/FontConfiguration)을 확인합니다.

### 응용 프로그램이 Bootstrap과 ActiveReportsJS 뷰어를 사용할 때, 보고서 출력이 독립 실행형 디자이너 응용프로그램과 일치하지 않습니다.

`Bootstrap`은 모든 HTML 요소에 대한 [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) 값을 `1.5`으로 설정하며, 이는 보고서 출력에 영향을 미칩니다. 이를 수정하는 가장 좋은 방법은 이 값을 `normal`로 변경하는 것입니다. 이를 달성하는 한 가지 방법은 [Bootstrap Theming](https://getbootstrap.com/docs/4.6/getting-started/theming/#importing) 기능을 사용하고, 사용자 정의 SCSS 스타일 선언에서 `reboot` 모듈을 불러오기 전에 `line-height-base` 변수의 값을 덮어쓰는 것입니다.

```scss
$line-height-base: normal;
@import "../node_modules/bootstrap/scss/reboot";
```

또는 ActiveReportsJS 보고서 뷰어 컴포넌트를 분리하여 Bootstrap 스타일에 의해 전혀 변경되지 않도록 할 수 있습니다. 하지만 이를 달성하기 위한 구체적인 방법은 응용 프로그램의 아키텍처에 따라 달라집니다.

### 데이터 요청은 디자인 탭에서는 잘 동작하지만, 독립 실행형 디자이너 응용 프로그램의 미리보기 탭에서는 실패합니다.

만약 디자인 탭에서 [데이터 집합](/activereportsjs/docs/ReportAuthorGuide/Databinding)을 생성하고 유효성 검사할 수 있으나, 미리보기 탭에서 `Data processing error`가 발생한다면, 엔드포인트가 CORS 요청을 허용하는지 확인합니다.

### 독립 실행형 디자이너 응용 프로그램에서 데이터 요청을 디버깅하려면 어떻게 해야 하나요?

독립 실행형 디자이너 응용 프로그램의 폴더에 `config.json`이라는 파일을 생성합니다.

* Windows : %AppData%\\ActiveReportsJS Designer
* MacOS: \~/Library/Application Support/ActiveReportsJS Designer
* Linux: \~/.config/ActivereportsJS Designer

해당 파일에 다음 내용을 추가합니다.

```json
{
  "debug":true
}
```

독립 실행형 디자이너 응용 프로그램을 재시작하고, Windows의 경우 `Ctrl + Shfit + F12` 단축키를 사용하고 Mac의 경우 `⌘ + Shift + F12` (또는, 키보드가 기본 function 키를 사용하지 않을 경우, `⌘ + fn+ Shift + F12`)를 사용하여 `개발자 도구`를 엽니다. 데이터 요청을 모니터링하기 위해 `Network` 탭을 사용합니다.

[도넛 차트 데모 보고서](https://demo.mescius.co.kr/activereportsjs/demos/Reports/PieChart/purejs)의 데이터 요청 디버깅 스크린샷은 다음과 같습니다.

![debug-eud](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/debug-eud.8f4804.png)