👏

バジェットがない中、それでもJavaScriptのエラーを拾う涙ぐましいやつ。

2021/06/23に公開

みなさんはイケてるログ収集ツールをつかいましょう。

ページ側

<script>
    const errorReport = (event) => {
        console.log(event);
        const payload = {
            message: event.message,
            filename: event.filename,
            lineno: event.lineno,
            colno: event.colno
        };
        fetch("/error_collector.php",
            {
                method: "POST",
                cache: "no-cache",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                body: Object.keys(payload).map((key) => key + "=" + encodeURIComponent(payload[key])).join("&")
            }
        );
    }
    window.addEventListener('error', errorReport);
    window.addEventListener('unhandledrejection', errorReport);
</script>

受取側

<?php // error_collector.php
$message = $_POST['message'] ?? "-";
$file_name = $_POST['filename'] ?? "-";
$line_no = $_POST['lineno'] ?? "-";
$col_no = $_POST['colno'] ?? "-";
error_log("JS Error: {$file_name}:{$line_no}:{$col_no} {$message}");
echo "God bless you.";

私「私の自腹で導入できませんか?できませんか…」

Discussion