{"id":21057873,"url":"https://github.com/rastmob/report-from-website","last_synced_at":"2026-01-28T23:01:38.805Z","repository":{"id":262255488,"uuid":"886652747","full_name":"rastmob/report-from-website","owner":"rastmob","description":"Angular library component that allows users to report issues they encounter, along with screenshots and logs, to a specified server endpoint. This library is particularly useful for gathering user feedback and debugging information in a visual format, helping development teams better understand and resolve issues.","archived":false,"fork":false,"pushed_at":"2024-11-12T11:00:30.000Z","size":176,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-29T20:54:45.667Z","etag":null,"topics":["angular","bug","bugreport","bugs","javascript","library","reporting","screenshot","widget"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/report-from-website","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rastmob.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-11T11:11:45.000Z","updated_at":"2024-11-12T11:00:33.000Z","dependencies_parsed_at":"2024-11-16T07:46:28.544Z","dependency_job_id":null,"html_url":"https://github.com/rastmob/report-from-website","commit_stats":null,"previous_names":["rastmob/report-from-website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rastmob/report-from-website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rastmob%2Freport-from-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rastmob%2Freport-from-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rastmob%2Freport-from-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rastmob%2Freport-from-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rastmob","download_url":"https://codeload.github.com/rastmob/report-from-website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rastmob%2Freport-from-website/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28854420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"ssl_error","status_checked_at":"2026-01-28T22:56:00.861Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bug","bugreport","bugs","javascript","library","reporting","screenshot","widget"],"created_at":"2024-11-19T17:05:17.984Z","updated_at":"2026-01-28T23:01:38.801Z","avatar_url":"https://github.com/rastmob.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Report From Website - JavaScript Library\n\n## Overview\n\n`report-from-website` is a **pure JavaScript** library that allows you to capture essential state information (like the URL, user agent, timestamp) and send it to a backend API. It's typically used for error reporting or logging user activity in the background.\n\nThe library is designed to be **easy to use** and can be integrated into any web project (including Angular, React, or plain HTML).\n\n### Key Features:\n- Capture the current **URL** of the page.\n- Capture the **user agent** (browser details).\n- Capture a **timestamp** of when the report is triggered.\n- **Send data** to a custom endpoint via a **POST request**.\n- **Capture a screenshot** of the current page using **html2canvas**.\n\n## Installation\n\nTo include this library in your project, you can either download the raw JavaScript file or install it via npm (if published).\n\n### Option 1: Download the raw JavaScript file\n- Download `report-from-website.js` from the **dist/** folder and include it in your project.\n\n### Option 2: Install via npm\n```bash\nnpm install report-from-website\n```\n\n## Usage\n\n### 1. Include the Library in Your Project\n\n#### **Option 1: In HTML**\n```html\n\u003cscript src=\"path/to/report-from-website.js\"\u003e\u003c/script\u003e\n```\n\n#### **Option 2: In JavaScript Module (ESM or CommonJS)**\n```javascript\nimport ReportFromWebsite from 'report-from-website';  // If installed via npm\n\n// Initialize the report functionality\nconst report = new ReportFromWebsite('#reportButton', '/custom/log');  // URL is optional\n```\n\n### 2. HTML Button to Trigger the Report\n\nAdd a button to your HTML that will trigger the report:\n\n```html\n\u003cbutton id=\"reportButton\"\u003eSend a Report\u003c/button\u003e\n```\n\n### 3. Handling the Report Data\n\nWhen the button is clicked, the library will send the data to the provided URL (default is `/error/log`). You can replace the default URL with any custom endpoint.\n\n## Example Usage\n\n**HTML Example**:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eReport From Website Example\u003c/title\u003e\n  \u003cscript src=\"path/to/report-from-website.js\"\u003e\u003c/script\u003e \u003c!-- Library script --\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n  \u003cbutton id=\"reportButton\"\u003eSend a Report\u003c/button\u003e\n\n  \u003cscript\u003e\n    // Initialize the library with the button selector and optional URL for reporting\n    const report = new ReportFromWebsite('#reportButton', 'https://yourwebsite.com/error/log');\n  \u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 4. Backend Example (Node.js/Express)\n```javascript\nconst express = require('express');\nconst app = express();\nconst port = 3000;\n\napp.use(express.json({ limit: '50mb' }));  // Ekran görüntüsünün büyük olabileceğini dikkate alarak\n\napp.post('/error/log', (req, res) =\u003e {\n  console.log('Received report data:', req.body);  // Gelen veriyi kontrol et\n\n  // Eğer screenshot varsa, base64 resmini işleyebilirsiniz (örneğin kaydedebilir ya da işleyebilirsiniz)\n  if (req.body.screenshot) {\n    console.log('Screenshot data received:', req.body.screenshot);\n  }\n\n  res.status(200).json({ message: 'Report received successfully!' });\n});\n\napp.listen(port, () =\u003e {\n  console.log(`Server running at http://localhost:${port}`);\n});\n```\n\n## License\n\nMIT License. See `LICENSE` for more information.\n\n## Contributing\n\nContributions are welcome! Please fork this repository, make changes, and submit a pull request.\n\n---\n\nFeel free to reach out if you have any questions or need support. Thank you for using `report-from-website`!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frastmob%2Freport-from-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frastmob%2Freport-from-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frastmob%2Freport-from-website/lists"}